SSG mode couses build fail in Vite js with vite-plugin-ssr

[Kadchenko]

Description

When running yarn build in React Vite project with vite-plugin-ssr

with babel-plugin-styled-components it fails with error:
[vite-plugin-ssr:autoFullBuild] Cannot read properties of undefined (reading 'withConfig') [vite-plugin-ssr:autoFullBuild] Cannot read properties of undefined (reading 'withConfig') (x2) error during build: TypeError: Cannot read properties of undefined (reading 'withConfig')

without babel-plugin-styled-components it fails with error:
[vite-plugin-ssr:autoFullBuild] styled.div is not a function [vite-plugin-ssr:autoFullBuild] styled.div is not a function (x2) error during build: TypeError: styled.div is not a function

vite.config.ts

/renderer/_default.server.page.tsx

[okomarov]

To reproduce

We've recreated a MWE at: https://replit.com/@DmitriiKadchien/React-styled-components-SSG

You can fork the replit and run yarn build in their shell.

Preview of the issue

The example works correctly in dev but fails to build, where the import of the styled components in the .js assets is pointing to .ts files (output with debug info in collapsible details below):

Output of yarn vite build -d

~/React-styled-components-SSG$ yarn vite build -d
yarn run v1.22.17
$ /home/runner/React-styled-components-SSG/node_modules/.bin/vite build -d
 vite:config bundled config file loaded in 968.38ms +0ms
 vite:esbuild init tsconfck (root: /home/runner/React-styled-components-SSG) +0ms
 vite:esbuild init tsconfck (root: /home/runner/React-styled-components-SSG) +17ms
 vite:esbuild init tsconfck (root: /home/runner/React-styled-components-SSG) +1ms
 vite:esbuild init tsconfck (root: /home/runner/React-styled-components-SSG) +1ms
 vite:esbuild init tsconfck end +71ms
 vite:esbuild init tsconfck end +1ms
 vite:esbuild init tsconfck end +0ms
 vite:esbuild init tsconfck end +1ms
 vite:config using resolved config: {
 vite:config   server: {
 vite:config     preTransformRequests: true,
 vite:config     host: '0.0.0.0',
 vite:config     middlewareMode: false,
 vite:config     fs: { strict: true, allow: [Array], deny: [Array] },
 vite:config     port: 3000
 vite:config   },
 vite:config   build: {
 vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
 vite:config     polyfillModulePreload: true,
 vite:config     outDir: 'dist/client',
 vite:config     assetsDir: 'assets',
 vite:config     assetsInlineLimit: 4096,
 vite:config     cssCodeSplit: false,
 vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
 vite:config     sourcemap: false,
 vite:config     rollupOptions: {
 vite:config       output: [Object],
 vite:config       onwarn: [Function (anonymous)],
 vite:config       input: [Object]
 vite:config     },
 vite:config     minify: 'esbuild',
 vite:config     terserOptions: {},
 vite:config     write: true,
 vite:config     emptyOutDir: null,
 vite:config     manifest: true,
 vite:config     lib: {
 vite:config       entry: '/home/runner/React-styled-components-SSG/pages/index.page.tsx',
 vite:config       name: 'StyledComponentsSSG'
 vite:config     },
 vite:config     ssr: false,
 vite:config     ssrManifest: false,
 vite:config     reportCompressedSize: true,
 vite:config     chunkSizeWarningLimit: 500,
 vite:config     watch: null,
 vite:config     polyfillDynamicImport: false,
 vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
 vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
 vite:config   },
 vite:config   plugins: [
 vite:config     'vite:build-metadata',
 vite:config     'vite:pre-alias',
 vite:config     'alias',
 vite:config     'vite:react-babel',
 vite:config     'vite:react-refresh',
 vite:config     'vite:react-jsx',
 vite:config     'vite-plugin-ssr:setVitePluginSsrConfig',
 vite:config     'vite-plugin-ssr:extractAssets-2',
 vite:config     'vite:modulepreload-polyfill',
 vite:config     'vite:resolve',
 vite:config     'vite:html-inline-proxy',
 vite:config     'vite:css',
 vite:config     'vite:esbuild',
 vite:config     'vite:json',
 vite:config     'vite:wasm-helper',
 vite:config     'vite:worker',
 vite:config     'vite:asset',
 vite:config     'vite-plugin-ssr:commonConfig',
 vite:config     'vite-plugin-ssr:virtualModulePageFiles',
 vite:config     'vite-plugin-ssr:buildConfig',
 vite:config     'vite-plugin-ssr:autoFullBuild',
 vite:config     'vite-plugin-ssr:pluginManifest',
 vite:config     'vite-plugin-ssr:packageJsonFile',
 vite:config     'vite-plugin-ssr:removeRequireHookPlugin',
 vite:config     'vite-plugin-ssr:extractAssets-3',
 vite:config     'vite-plugin-ssr:retrieveDevServer',
 vite:config     'vite:wasm-fallback',
 vite:config     'vite:define',
 vite:config     'vite:css-post',
 vite:config     'vite:build-html',
 vite:config     'vite:worker-import-meta-url',
 vite:config     'vite:force-systemjs-wrap-complete',
 vite:config     'vite:watch-package-data',
 vite:config     'commonjs',
 vite:config     'vite:data-uri',
 vite:config     'vite:asset-import-meta-url',
 vite:config     'vite:dynamic-import-vars',
 vite:config     'vite:import-glob',
 vite:config     'vite-plugin-ssr:distFileNames',
 vite:config     'vite-plugin-ssr:extractAssets-1',
 vite:config     'vite-plugin-ssr:extractExportNames',
 vite:config     'vite-plugin-ssr:suppressRollupWarning',
 vite:config     'vite-plugin-ssr:importBuild:config',
 vite:config     'vite:build-import-analysis',
 vite:config     'vite:esbuild-transpile',
 vite:config     'vite:terser',
 vite:config     'vite:manifest',
 vite:config     'vite:reporter',
 vite:config     'vite:load-fallback'
 vite:config   ],
 vite:config   optimizeDeps: {
 vite:config     disabled: 'build',
 vite:config     force: undefined,
 vite:config     include: [ 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react' ],
 vite:config     esbuildOptions: { preserveSymlinks: undefined }
 vite:config   },
 vite:config   resolve: { dedupe: [ 'react', 'react-dom' ], alias: [ [Object], [Object] ] },
 vite:config   vitePluginSsr: {
 vite:config     disableAutoFullBuild: false,
 vite:config     pageFiles: { include: [] },
 vite:config     prerender: {
 vite:config       partial: false,
 vite:config       noExtraDir: false,
 vite:config       parallel: true,
 vite:config       disableAutoRun: false
 vite:config     },
 vite:config     includeCSS: [],
 vite:config     includeAssetsImportedByServer: false
 vite:config   },
 vite:config   appType: 'custom',
 vite:config   experimental: { importGlobRestoreExtension: true, hmrPartialAccept: false },
 vite:config   ssr: {
 vite:config     format: 'esm',
 vite:config     target: 'node',
 vite:config     external: [ 'vite-plugin-ssr' ],
 vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
 vite:config   },
 vite:config   configFile: '/home/runner/React-styled-components-SSG/vite.config.ts',
 vite:config   configFileDependencies: [ '/home/runner/React-styled-components-SSG/vite.config.ts' ],
 vite:config   inlineConfig: {
 vite:config     root: undefined,
 vite:config     base: undefined,
 vite:config     mode: undefined,
 vite:config     configFile: undefined,
 vite:config     logLevel: undefined,
 vite:config     clearScreen: undefined,
 vite:config     optimizeDeps: { force: undefined },
 vite:config     build: {}
 vite:config   },
 vite:config   root: '/home/runner/React-styled-components-SSG',
 vite:config   base: '/',
 vite:config   publicDir: '/home/runner/React-styled-components-SSG/public',
 vite:config   cacheDir: '/home/runner/React-styled-components-SSG/node_modules/.vite',
 vite:config   command: 'build',
 vite:config   mode: 'production',
 vite:config   isWorker: false,
 vite:config   mainConfig: null,
 vite:config   isProduction: true,
 vite:config   preview: {
 vite:config     port: 3000,
 vite:config     strictPort: undefined,
 vite:config     host: '0.0.0.0',
 vite:config     https: undefined,
 vite:config     open: undefined,
 vite:config     proxy: undefined,
 vite:config     cors: undefined,
 vite:config     headers: undefined
 vite:config   },
 vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
 vite:config   assetsInclude: [Function: assetsInclude],
 vite:config   logger: {
 vite:config     hasWarned: false,
 vite:config     info: [Function: info],
 vite:config     warn: [Function: warn],
 vite:config     warnOnce: [Function: warnOnce],
 vite:config     error: [Function: error],
 vite:config     clearScreen: [Function: clearScreen],
 vite:config     hasErrorLogged: [Function: hasErrorLogged]
 vite:config   },
 vite:config   packageCache: Map(0) { set: [Function (anonymous)] },
 vite:config   createResolver: [Function: createResolver],
 vite:config   worker: {
 vite:config     format: 'iife',
 vite:config     plugins: [
 vite:config       'vite:build-metadata',
 vite:config       'vite:pre-alias',
 vite:config       'alias',
 vite:config       'vite:modulepreload-polyfill',
 vite:config       'vite:resolve',
 vite:config       'vite:html-inline-proxy',
 vite:config       'vite:css',
 vite:config       'vite:esbuild',
 vite:config       'vite:json',
 vite:config       'vite:wasm-helper',
 vite:config       'vite:worker',
 vite:config       'vite:asset',
 vite:config       'vite:wasm-fallback',
 vite:config       'vite:define',
 vite:config       'vite:css-post',
 vite:config       'vite:build-html',
 vite:config       'vite:worker-import-meta-url',
 vite:config       'vite:force-systemjs-wrap-complete',
 vite:config       'vite:watch-package-data',
 vite:config       'commonjs',
 vite:config       'vite:data-uri',
 vite:config       'vite:asset-import-meta-url',
 vite:config       'vite:dynamic-import-vars',
 vite:config       'vite:import-glob',
 vite:config       'vite:build-import-analysis',
 vite:config       'vite:esbuild-transpile',
 vite:config       'vite:terser',
 vite:config       'vite:manifest',
 vite:config       'vite:reporter',
 vite:config       'vite:load-fallback'
 vite:config     ],
 vite:config     rollupOptions: {},
 vite:config     getSortedPlugins: [Function: getSortedPlugins],
 vite:config     getSortedPluginHooks: [Function: getSortedPluginHooks]
 vite:config   },
 vite:config   getSortedPlugins: [Function: getSortedPlugins],
 vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
 vite:config } +182ms
vite v3.1.7 building for production...
✓ 156 modules transformed.
dist/client/vite-plugin-ssr.json       0.13 KiB
dist/client/manifest.json              1.68 KiB
dist/client/azava-landing.mjs          0.32 KiB / gzip: 0.26 KiB
dist/client/azava-landing3.mjs         0.04 KiB / gzip: 0.06 KiB
dist/client/azava-landing5.mjs         2.57 KiB / gzip: 1.12 KiB
dist/client/assets/chunk-f4ca50e2.js   22.99 KiB / gzip: 6.97 KiB
dist/client/azava-landing4.mjs         38.23 KiB / gzip: 11.31 KiB
dist/client/assets/chunk-0555f750.js   70.77 KiB / gzip: 17.37 KiB
dist/client/assets/chunk-5594f375.js   58.71 KiB / gzip: 17.95 KiB
 vite:config bundled config file loaded in 98.83ms +21s
 vite:esbuild init tsconfck (root: /home/runner/React-styled-components-SSG) +21s
 vite:esbuild init tsconfck (root: /home/runner/React-styled-components-SSG) +11ms
 vite:esbuild init tsconfck (root: /home/runner/React-styled-components-SSG) +0ms
 vite:esbuild init tsconfck (root: /home/runner/React-styled-components-SSG) +0ms
 vite:esbuild init tsconfck end +73ms
 vite:esbuild init tsconfck end +0ms
 vite:esbuild init tsconfck end +1ms
 vite:esbuild init tsconfck end +0ms
 vite:config using resolved config: {
 vite:config   server: {
 vite:config     preTransformRequests: true,
 vite:config     host: '0.0.0.0',
 vite:config     middlewareMode: false,
 vite:config     fs: { strict: true, allow: [Array], deny: [Array] },
 vite:config     port: 3000
 vite:config   },
 vite:config   build: {
 vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
 vite:config     polyfillModulePreload: true,
 vite:config     outDir: 'dist/server',
 vite:config     assetsDir: 'assets',
 vite:config     assetsInlineLimit: 4096,
 vite:config     cssCodeSplit: false,
 vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
 vite:config     sourcemap: false,
 vite:config     rollupOptions: {
 vite:config       output: [Object],
 vite:config       onwarn: [Function (anonymous)],
 vite:config       input: [Object]
 vite:config     },
 vite:config     minify: false,
 vite:config     terserOptions: {},
 vite:config     write: true,
 vite:config     emptyOutDir: null,
 vite:config     manifest: false,
 vite:config     lib: {
 vite:config       entry: '/home/runner/React-styled-components-SSG/pages/index.page.tsx',
 vite:config       name: 'StyledComponentsSSG'
 vite:config     },
 vite:config     ssr: true,
 vite:config     ssrManifest: false,
 vite:config     reportCompressedSize: true,
 vite:config     chunkSizeWarningLimit: 500,
 vite:config     watch: null,
 vite:config     polyfillDynamicImport: false,
 vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
 vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
 vite:config   },
 vite:config   plugins: [
 vite:config     'vite:build-metadata',
 vite:config     'vite:pre-alias',
 vite:config     'alias',
 vite:config     'vite:react-babel',
 vite:config     'vite:react-refresh',
 vite:config     'vite:react-jsx',
 vite:config     'vite-plugin-ssr:setVitePluginSsrConfig',
 vite:config     'vite-plugin-ssr:extractAssets-2',
 vite:config     'vite:modulepreload-polyfill',
 vite:config     'vite:resolve',
 vite:config     'vite:html-inline-proxy',
 vite:config     'vite:css',
 vite:config     'vite:esbuild',
 vite:config     'vite:json',
 vite:config     'vite:wasm-helper',
 vite:config     'vite:worker',
 vite:config     'vite:asset',
 vite:config     'vite-plugin-ssr:commonConfig',
 vite:config     'vite-plugin-ssr:virtualModulePageFiles',
 vite:config     'vite-plugin-ssr:buildConfig',
 vite:config     'vite-plugin-ssr:autoFullBuild',
 vite:config     'vite-plugin-ssr:pluginManifest',
 vite:config     'vite-plugin-ssr:packageJsonFile',
 vite:config     'vite-plugin-ssr:removeRequireHookPlugin',
 vite:config     'vite-plugin-ssr:extractAssets-3',
 vite:config     'vite-plugin-ssr:retrieveDevServer',
 vite:config     '@brillout/vite-plugin-import-build:vite-plugin-ssr',
 vite:config     'vite:wasm-fallback',
 vite:config     'vite:define',
 vite:config     'vite:css-post',
 vite:config     'vite:build-html',
 vite:config     'vite:worker-import-meta-url',
 vite:config     'vite:force-systemjs-wrap-complete',
 vite:config     'vite:watch-package-data',
 vite:config     'commonjs',
 vite:config     'vite:data-uri',
 vite:config     'vite:asset-import-meta-url',
 vite:config     'vite:dynamic-import-vars',
 vite:config     'vite:import-glob',
 vite:config     'vite-plugin-ssr:distFileNames',
 vite:config     'vite-plugin-ssr:extractAssets-1',
 vite:config     'vite-plugin-ssr:extractExportNames',
 vite:config     'vite-plugin-ssr:suppressRollupWarning',
 vite:config     'vite-plugin-ssr:importBuild:config',
 vite:config     'vite:build-import-analysis',
 vite:config     'vite:esbuild-transpile',
 vite:config     'vite:reporter',
 vite:config     'vite:load-fallback'
 vite:config   ],
 vite:config   configFile: '/home/runner/React-styled-components-SSG/vite.config.ts',
 vite:config   root: '/home/runner/React-styled-components-SSG',
 vite:config   __triggedByAutoFullBuild: true,
 vite:config   resolve: { dedupe: [ 'react', 'react-dom' ], alias: [ [Object], [Object] ] },
 vite:config   optimizeDeps: {
 vite:config     disabled: 'build',
 vite:config     include: [ 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react' ],
 vite:config     esbuildOptions: { preserveSymlinks: undefined }
 vite:config   },
 vite:config   vitePluginSsr: {
 vite:config     disableAutoFullBuild: false,
 vite:config     pageFiles: { include: [] },
 vite:config     prerender: {
 vite:config       partial: false,
 vite:config       noExtraDir: false,
 vite:config       parallel: true,
 vite:config       disableAutoRun: false
 vite:config     },
 vite:config     includeCSS: [],
 vite:config     includeAssetsImportedByServer: false
 vite:config   },
 vite:config   appType: 'custom',
 vite:config   experimental: { importGlobRestoreExtension: true, hmrPartialAccept: false },
 vite:config   ssr: {
 vite:config     format: 'esm',
 vite:config     target: 'node',
 vite:config     external: [ 'vite-plugin-ssr' ],
 vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
 vite:config   },
 vite:config   configFileDependencies: [ '/home/runner/React-styled-components-SSG/vite.config.ts' ],
 vite:config   inlineConfig: {
 vite:config     build: { ssr: true },
 vite:config     configFile: '/home/runner/React-styled-components-SSG/vite.config.ts',
 vite:config     root: '/home/runner/React-styled-components-SSG',
 vite:config     __triggedByAutoFullBuild: true
 vite:config   },
 vite:config   base: '/',
 vite:config   publicDir: '/home/runner/React-styled-components-SSG/public',
 vite:config   cacheDir: '/home/runner/React-styled-components-SSG/node_modules/.vite',
 vite:config   command: 'build',
 vite:config   mode: 'production',
 vite:config   isWorker: false,
 vite:config   mainConfig: null,
 vite:config   isProduction: true,
 vite:config   preview: {
 vite:config     port: 3000,
 vite:config     strictPort: undefined,
 vite:config     host: '0.0.0.0',
 vite:config     https: undefined,
 vite:config     open: undefined,
 vite:config     proxy: undefined,
 vite:config     cors: undefined,
 vite:config     headers: undefined
 vite:config   },
 vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
 vite:config   assetsInclude: [Function: assetsInclude],
 vite:config   logger: {
 vite:config     hasWarned: false,
 vite:config     info: [Function: info],
 vite:config     warn: [Function: warn],
 vite:config     warnOnce: [Function: warnOnce],
 vite:config     error: [Function: error],
 vite:config     clearScreen: [Function: clearScreen],
 vite:config     hasErrorLogged: [Function: hasErrorLogged]
 vite:config   },
 vite:config   packageCache: Map(0) { set: [Function (anonymous)] },
 vite:config   createResolver: [Function: createResolver],
 vite:config   worker: {
 vite:config     format: 'iife',
 vite:config     plugins: [
 vite:config       'vite:build-metadata',
 vite:config       'vite:pre-alias',
 vite:config       'alias',
 vite:config       'vite:modulepreload-polyfill',
 vite:config       'vite:resolve',
 vite:config       'vite:html-inline-proxy',
 vite:config       'vite:css',
 vite:config       'vite:esbuild',
 vite:config       'vite:json',
 vite:config       'vite:wasm-helper',
 vite:config       'vite:worker',
 vite:config       'vite:asset',
 vite:config       'vite:wasm-fallback',
 vite:config       'vite:define',
 vite:config       'vite:css-post',
 vite:config       'vite:build-html',
 vite:config       'vite:worker-import-meta-url',
 vite:config       'vite:force-systemjs-wrap-complete',
 vite:config       'vite:watch-package-data',
 vite:config       'commonjs',
 vite:config       'vite:data-uri',
 vite:config       'vite:asset-import-meta-url',
 vite:config       'vite:dynamic-import-vars',
 vite:config       'vite:import-glob',
 vite:config       'vite:build-import-analysis',
 vite:config       'vite:esbuild-transpile',
 vite:config       'vite:reporter',
 vite:config       'vite:load-fallback'
 vite:config     ],
 vite:config     rollupOptions: {},
 vite:config     getSortedPlugins: [Function: getSortedPlugins],
 vite:config     getSortedPluginHooks: [Function: getSortedPluginHooks]
 vite:config   },
 vite:config   getSortedPlugins: [Function: getSortedPlugins],
 vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks],
 vite:config   vitePluginDistImporter: {
 vite:config     libraries: [ [Object] ],
 vite:config     importerAlreadyGenerated: false,
 vite:config     disableAutoImporter: null,
 vite:config     configVersion: 1
 vite:config   }
 vite:config } +103ms
vite v3.1.7 building SSR bundle for production...
dist/client/azava-landing2.mjs         638.07 KiB / gzip: 148.61 KiB
✓ 14 modules transformed.
vite-plugin-ssr 0.4.40 pre-rendering HTML...
dist/server/package.json                              0.02 KiB
dist/server/importBuild.cjs                           0.32 KiB
dist/server/pageFiles.mjs                             2.80 KiB
dist/server/importBuild.mjs                           0.22 KiB
dist/server/assets/index.page.a4d18177.js             0.34 KiB
dist/server/assets/chunk-b3d8d8f2.js                  0.14 KiB
dist/server/assets/_error.page.7aeea150.js            0.03 KiB
dist/server/assets/_default.page.server.05af44d5.js   1.79 KiB
 vite:config bundled config file loaded in 15.24ms +904ms
 vite:esbuild init tsconfck (root: /home/runner/React-styled-components-SSG) +908ms
 vite:esbuild init tsconfck (root: /home/runner/React-styled-components-SSG) +1ms
 vite:esbuild init tsconfck end +3ms
 vite:esbuild init tsconfck end +0ms
 vite:config using resolved config: {
 vite:config   server: {
 vite:config     preTransformRequests: true,
 vite:config     host: '0.0.0.0',
 vite:config     middlewareMode: false,
 vite:config     fs: { strict: true, allow: [Array], deny: [Array] },
 vite:config     port: 3000
 vite:config   },
 vite:config   build: {
 vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
 vite:config     polyfillModulePreload: true,
 vite:config     outDir: 'dist',
 vite:config     assetsDir: 'assets',
 vite:config     assetsInlineLimit: 4096,
 vite:config     cssCodeSplit: false,
 vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
 vite:config     sourcemap: false,
 vite:config     rollupOptions: {},
 vite:config     minify: 'esbuild',
 vite:config     terserOptions: {},
 vite:config     write: true,
 vite:config     emptyOutDir: null,
 vite:config     manifest: false,
 vite:config     lib: {
 vite:config       entry: '/home/runner/React-styled-components-SSG/pages/index.page.tsx',
 vite:config       name: 'StyledComponentsSSG'
 vite:config     },
 vite:config     ssr: false,
 vite:config     ssrManifest: false,
 vite:config     reportCompressedSize: true,
 vite:config     chunkSizeWarningLimit: 500,
 vite:config     watch: null,
 vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
 vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
 vite:config   },
 vite:config   plugins: [
 vite:config     'vite:pre-alias',
 vite:config     'alias',
 vite:config     'vite:react-babel',
 vite:config     'vite:react-refresh',
 vite:config     'vite:react-jsx',
 vite:config     'vite-plugin-ssr:setVitePluginSsrConfig',
 vite:config     'vite:modulepreload-polyfill',
 vite:config     'vite:optimized-deps',
 vite:config     'vite:resolve',
 vite:config     'vite:html-inline-proxy',
 vite:config     'vite:css',
 vite:config     'vite:esbuild',
 vite:config     'vite:json',
 vite:config     'vite:wasm-helper',
 vite:config     'vite:worker',
 vite:config     'vite:asset',
 vite:config     'vite-plugin-ssr:commonConfig',
 vite:config     'vite-plugin-ssr:virtualModulePageFiles',
 vite:config     'vite-plugin-ssr:retrieveDevServer',
 vite:config     'vite:wasm-fallback',
 vite:config     'vite:define',
 vite:config     'vite:css-post',
 vite:config     'vite:worker-import-meta-url',
 vite:config     'vite:dynamic-import-vars',
 vite:config     'vite:import-glob',
 vite:config     'vite-plugin-ssr:extractExportNames',
 vite:config     'vite-plugin-ssr:importBuild:config',
 vite:config     'vite:client-inject',
 vite:config     'vite:import-analysis'
 vite:config   ],
 vite:config   configFile: '/home/runner/React-styled-components-SSG/vite.config.ts',
 vite:config   root: '/home/runner/React-styled-components-SSG',
 vite:config   resolve: { dedupe: [ 'react', 'react-dom' ], alias: [ [Object], [Object] ] },
 vite:config   optimizeDeps: {
 vite:config     disabled: 'build',
 vite:config     include: [ 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react' ],
 vite:config     esbuildOptions: { preserveSymlinks: undefined }
 vite:config   },
 vite:config   vitePluginSsr: {
 vite:config     disableAutoFullBuild: false,
 vite:config     pageFiles: { include: [] },
 vite:config     prerender: {
 vite:config       partial: false,
 vite:config       noExtraDir: false,
 vite:config       parallel: true,
 vite:config       disableAutoRun: false
 vite:config     },
 vite:config     includeCSS: [],
 vite:config     includeAssetsImportedByServer: false
 vite:config   },
 vite:config   appType: 'custom',
 vite:config   experimental: { importGlobRestoreExtension: true, hmrPartialAccept: false },
 vite:config   configFileDependencies: [ '/home/runner/React-styled-components-SSG/vite.config.ts' ],
 vite:config   inlineConfig: {
 vite:config     configFile: '/home/runner/React-styled-components-SSG/vite.config.ts',
 vite:config     root: '/home/runner/React-styled-components-SSG'
 vite:config   },
 vite:config   base: '/',
 vite:config   publicDir: '/home/runner/React-styled-components-SSG/public',
 vite:config   cacheDir: '/home/runner/React-styled-components-SSG/node_modules/.vite',
 vite:config   command: 'vite-plugin-ssr pre-rendering',
 vite:config   mode: 'production',
 vite:config   ssr: {
 vite:config     format: 'esm',
 vite:config     target: 'node',
 vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
 vite:config   },
 vite:config   isWorker: false,
 vite:config   mainConfig: null,
 vite:config   isProduction: true,
 vite:config   preview: {
 vite:config     port: 3000,
 vite:config     strictPort: undefined,
 vite:config     host: '0.0.0.0',
 vite:config     https: undefined,
 vite:config     open: undefined,
 vite:config     proxy: undefined,
 vite:config     cors: undefined,
 vite:config     headers: undefined
 vite:config   },
 vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
 vite:config   assetsInclude: [Function: assetsInclude],
 vite:config   logger: {
 vite:config     hasWarned: false,
 vite:config     info: [Function: info],
 vite:config     warn: [Function: warn],
 vite:config     warnOnce: [Function: warnOnce],
 vite:config     error: [Function: error],
 vite:config     clearScreen: [Function: clearScreen],
 vite:config     hasErrorLogged: [Function: hasErrorLogged]
 vite:config   },
 vite:config   packageCache: Map(0) {},
 vite:config   createResolver: [Function: createResolver],
 vite:config   worker: {
 vite:config     format: 'iife',
 vite:config     plugins: [
 vite:config       'vite:pre-alias',
 vite:config       'alias',
 vite:config       'vite:modulepreload-polyfill',
 vite:config       'vite:optimized-deps',
 vite:config       'vite:resolve',
 vite:config       'vite:html-inline-proxy',
 vite:config       'vite:css',
 vite:config       'vite:esbuild',
 vite:config       'vite:json',
 vite:config       'vite:wasm-helper',
 vite:config       'vite:worker',
 vite:config       'vite:asset',
 vite:config       'vite:wasm-fallback',
 vite:config       'vite:define',
 vite:config       'vite:css-post',
 vite:config       'vite:worker-import-meta-url',
 vite:config       'vite:dynamic-import-vars',
 vite:config       'vite:import-glob',
 vite:config       'vite:client-inject',
 vite:config       'vite:import-analysis'
 vite:config     ],
 vite:config     rollupOptions: {},
 vite:config     getSortedPlugins: [Function: getSortedPlugins],
 vite:config     getSortedPluginHooks: [Function: getSortedPluginHooks]
 vite:config   },
 vite:config   getSortedPlugins: [Function: getSortedPlugins],
 vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
 vite:config } +9ms
[vite-plugin-ssr:autoFullBuild] Cannot read property 'withConfig' of undefined
[vite-plugin-ssr:autoFullBuild] Cannot read property 'withConfig' of undefined (x2)
error during build:
TypeError: Cannot read property 'withConfig' of undefined
   at file:///home/runner/React-styled-components-SSG/dist/server/assets/index.page.a4d18177.js:4:22
   at ModuleJob.run (internal/modules/esm/module_job.js:183:25)
   at async Loader.import (internal/modules/esm/loader.js:178:24)
   at async Object.pageFile.loadFile (/home/runner/React-styled-components-SSG/node_modules/vite-plugin-ssr/dist/cjs/shared/getPageFiles/parseGlobResults.js:25:40)
   at async Promise.all (index 0)
   at async loadPageFilesServerSide (/home/runner/React-styled-components-SSG/node_modules/vite-plugin-ssr/dist/cjs/shared/getPageFiles/analyzePageServerSide/loadPageFilesServerSide.js:8:5)
   at async Promise.all (index 0)
   at async loadPageFilesServer (/home/runner/React-styled-components-SSG/node_modules/vite-plugin-ssr/dist/cjs/node/renderPage.js:375:69)
   at async /home/runner/React-styled-components-SSG/node_modules/vite-plugin-ssr/dist/cjs/node/prerender.js:203:48
error Command failed with exit code 1.

[adrifer]

I'm facing the same issue. I'm trying to setup Vite 3 with SSR and Styled-components and I'm getting same errors.

Does anyone have any idea what could be causing this? I tried everything I could think of.
Thanks!

[adrifer]

It seems I found a workaround. I need to do more testing but now it seems it's working. It's related to this workaround.

Basically I created a styled-components2.ts file on my root folder like this:

import styled from "styled-components-old";
import type { StyledInterface } from "styled-components-old";

export * from "styled-components-old";

const defaultStyled: StyledInterface = typeof styled === "function" ? styled : (styled as any).default;

export { defaultStyled as default };

And my second part to make it work with Vite, was to add a couple of resolve aliases on vite.config.ts like this:

export default defineConfig({
    plugins: [
        react(),
        viteTsconfigPaths(),
        svgrPlugin()
    ],
    resolve: {
        alias: {
            "styled-components-old": "styled-components",
            "styled-components": "styled-components2"
        }
    }
});

So basically, with the first file we are fixing the styled-components importing issue (importing styled or styled.default depending on the needs), and with the second step we are overriding the import "styled-components" to use our own.

Honestly I don't like this workaround much, but at least is a first step to make it work :)

[oscarcornejo]

Parece que encontré una solución. Necesito hacer más pruebas, pero ahora parece que está funcionando. Está relacionado con esta solución .

Básicamente, creé un archivo styled-components2.ts en mi carpeta raíz como este:

import styled from "styled-components-old";
import type { StyledInterface } from "styled-components-old";

export * from "styled-components-old";

const defaultStyled: StyledInterface = typeof styled === "function" ? styled : (styled as any).default;

export { defaultStyled as default };

Y mi segunda parte para que funcione con Vite fue agregar un par de alias de resolución en vite.config.ts como este:

export default defineConfig({
    plugins: [
        react(),
        viteTsconfigPaths(),
        svgrPlugin()
    ],
    resolve: {
        alias: {
            "styled-components-old": "styled-components",
            "styled-components": "styled-components2"
        }
    }
});

Básicamente, con el primer archivo estamos solucionando el problema de importación de componentes con estilo (importando con estilo o con estilo. predeterminado según las necesidades), y con el segundo paso estamos anulando la importación de "componentes con estilo" para usar los nuestros.

Honestamente, no me gusta mucho esta solución, pero al menos es un primer paso para que funcione :)

My solution, based on what @adrifer commented, was to create a wrapper of styled components:

// wrapper-styled-components.ts

import styled, { StyledInterface } from "styled-components";
export * from "styled-components";

const defaultStyled: StyledInterface =
   typeof styled === "function" ? styled : (styled as any).default;
export { defaultStyled as default };

// component.style.ts

import styled from "./utils/wrapper-styled-components"; // here I use my new wrapper

export const Styled = {
   Icon: styled.i`
     font-size: 24px;
     background:transparent;
   `,
};

Thanks for sharing @adrifer.

[adrifer]

I think I found a new cleaner workaround for this. The only change I did was to add this section to my vite.config.ts

    ssr: {
        noExternal: ["styled-components", "@emotion/*"]
    }

In my case just adding this made it work.

[okomarov]

@adrifer Can you share your vite config and package.json?

Our minimal example on replit from #3832 (comment) does not build with a similar error on the import for react-dom/server (which I also tried adding to noExternal, but still nothing, and similarly if I force everything to be noExternal)

For reference, we switched to Next.js which felt overkill but I wish we went with that straight away...

[zenstok]

@adrifer i think your last solution is the cleanest way to implement ssr styled-components with vite.

I think the reason why it fails is because of styled components "not using conditional exports to tell Node.js which bundle is ESM vs. CommonJS."

If styled-components is externalized by vite as it is by default the transpiled output is something like this:

import styled from "styled-components";
import { a as jsx, j as jsxs, F as Fragment } from "./chunk-2839ff2c.js";
import "react/jsx-runtime";
const Container = styled.button.withConfig({
  displayName: "Container",
  componentId: "sc-9bu7gl-0"
})(["height:50px;background:pink;color:black;padding:16px;"]);

Notice how styled-components is imported. The problem with this is that styled is default exported and you need to change from styled to styled.default in order for everything to work as expected.

By adding ssr: { noExternal: ['styled-components', '@emotion/*'] }, you will have the following transpiled output:

import { s as styled } from "./chunk-9fd3be1d.js";
import { a as jsx, j as jsxs, F as Fragment } from "./chunk-2839ff2c.js";
import "react-is";
import "react";
import "shallowequal";
import "hoist-non-react-statics";
import "react/jsx-runtime";
const Container = styled.button.withConfig({
  displayName: "Container",
  componentId: "sc-9bu7gl-0"
})(["height:50px;background:pink;color:black;padding:16px;"]);

Notice how styled-components is no longer "externalized" and it's now included in vite's pipeline (included the styled-components depedency and transpiled it correctly in the chunk).

Why it works in dev but not in prod is maybe because the process is different as said in docs:

Dependency pre-bundling only applies in development mode, and uses esbuild to convert dependencies to ESM. In production builds, @rollup/plugin-commonjs is used instead.