Question 301029 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Static html export fails 'Error: Unsupported Server Component type: {…}'

I’ve got this error when trying to export a next js blog page to static html.

I’m trying to get the basic html (+tailwind) page structure from this blog template.

Following the instructions on the next js documentation I’ve changed module.exports in next.config.js to this

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
 
  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // trailingSlash: true,
 
  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
  // skipTrailingSlashRedirect: true,
 
  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}
 
module.exports = nextConfig

where previously, it was

/**
 * @type {import('next/dist/next-server/server/config').NextConfig}
 **/
module.exports = () => {
  const plugins = [withContentlayer, withBundleAnalyzer]
  return plugins.reduce((acc, next) => next(acc), {
    reactStrictMode: true,
    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
    eslint: {
      dirs: ['app', 'components', 'layouts', 'scripts'],
    },
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'picsum.photos',
        },
      ],
    },
    async headers() {
      return [
        {
          source: '/(.*)',
          headers: securityHeaders,
        },
      ]
    },
    webpack: (config, options) => {
      config.module.rules.push({
        test: /.svg$/,
        use: ['@svgr/webpack'],
      })

      return config
    },
  })
}

When I try to export, I get this error:

Error occurred prerendering page "/tags/code". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Unsupported Server Component type: {...}
    at em (/Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:129087)
    at /Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:140081
    at Object.toJSON (/Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:143659)
    at stringify (<anonymous>)
    at eE (/Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:132044)
    at eR (/Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:132487)
    at Timeout._onTimeout (/Users/charlie/python_projects/tailwind_blog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:129267)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7)
   Generating static pages (21/43) [==  ]

Is there a way to change the server component type to get past this error? Is exporting a static html file even possible with the way the project is set up?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Best way I found was to host the server locally and save the html webpage produced.


  2. 0

    The error is related to an unsupported Server Component type during the prerendering phase of the "/tags/code" page within your Next.js application. It is imperative to acknowledge that the current version of Next.js does not facilitate the export of pages dependent on specific functionalities, notably Server Components, to static HTML.

    In instances where a project heavily relies on Server Components or analogous dynamic features, exporting to static HTML may prove unfeasible within the existing project configuration. To address this issue judiciously, one should contemplate alternative strategies:

    Leverage Static Generation for Predominant Pages:
    Discern pages amenable to static generation devoid of dependencies on dynamic features. Employ the getStaticProps and getStaticPaths methods for such pages to facilitate static generation.
    Employ Client-Side Rendering (CSR) for Dynamic Content:
    Pages necessitating dynamic content or features should explore client-side rendering (CSR) as an alternative to static HTML export. This approach allows dynamic components to be rendered on the client side, circumventing the limitations associated with static generation.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search