Migrating from CRA to Vite: Unable to determine current node version

Question

Migrating from CRA to Vite for a react project. Vite builds ok but displays a blank page after build. There's a console error:

@emotion_styled_macro.js:32600 Uncaught TypeError: Unable to determine current node version
    at versionIncluded (@emotion_styled_macro.js:32600:15)
    at isCore (@emotion_styled_macro.js:32614:33)
    at node_modules/resolve/lib/core.js (@emotion_styled_macro.js:33117:22)
    at __require2 (chunk-XZ6WXOVE.js?v=dcdf163e:2132:50)
    at node_modules/resolve/index.js (@emotion_styled_macro.js:33350:18)
    at __require2 (chunk-XZ6WXOVE.js?v=dcdf163e:2132:50)
    at node_modules/babel-plugin-macros/dist/index.js (@emotion_styled_macro.js:43001:21)
    at __require2 (chunk-XZ6WXOVE.js?v=dcdf163e:2132:50)
    at node_modules/@emotion/babel-plugin/dist/emotion-babel-plugin.esm.js (@emotion_styled_macro.js:43851:42)
    at __init (chunk-XZ6WXOVE.js?v=dcdf163e:2129:56)

The project runs fine with CRA. I only use emotion as a dependency of Chakra UI, and I'm not keen on swapping out Chakra just because of this issue. Searched online and haven't found anyone with the same issue or at least with a solution.

Thought that maybe it was a difference between how ESBuild and Babel handled the transform process so tried to duplicate CRA's babel setup but no luck.

Here's my Vite config:

export default defineConfig({
  build: {
    target: browserslistToEsbuild(),
  },
  plugins: [react({
    jsxImportSource: '@emotion/react',
    babel: {
    plugins: ['@emotion/babel-plugin'],
    },
    }),nodePolyfills({
    protocolImports: true,
    overrides: {
      // Since `fs` is not supported in browsers, we can use the `memfs` package to polyfill it.
      fs: 'memfs',
    }
  }),
  legacy({
    targets: ['defaults', 'not IE 11'],
  }),
  babel({
    babelConfig:{
      presets:['@babel/preset-react']
    }
  }),
  ],
})

Answer 1

Core Issue

The actual error is probably because you are using a Vite Babel plugin as well as @vitejs/plugin-react. You do not need the babel() Vite plugin since @vitejs/plugin-react already brings along a configured Babel of its own.

You also don't need to reference @babel/preset-react since @vitejs/plugin-react already preconfigures Babel with what it needs to compiled React code.

export default defineConfig({
  build: {
    target: browserslistToEsbuild(),
  },
  plugins: [react({
    jsxImportSource: '@emotion/react',
    babel: {
    plugins: ['@emotion/babel-plugin'],
    },
    }),nodePolyfills({
    protocolImports: true,
    overrides: {
      // Since `fs` is not supported in browsers, we can use the `memfs` package to polyfill it.
      fs: 'memfs',
    }
  }),
  legacy({
    targets: ['defaults', 'not IE 11'],
  }),
  ],
})

Alternate Path

Firstly if your dependency on emotion is via Chakra and you don't make direct use of it, @emotion/babel-plugin is probably not giving you anything. The compile time optimizations it does most likely wouldn't work anyway due to how Chakra abstracts the emotion API with its own.

There's actually no need to bring Babel along here at all (which just hinders the otherwise great build performance of esbuild which underlies Vite). If it's correct that you don't really need it for the emotion plugin, then may as well use the Vite React plugin that utilises the more modern SWC instead which is a lot faster than Babel.

Try changing @vitejs/plugin-react to @vitejs/plugin-react-swc and foregoe the emotion plugins completely. You'd also get rid of the Vite Babel plugin.