Vite.js + React: Maximum call stack size exceeded

Question

I'm migrating a large application created with CRA to Vite.js

I followed this guide to configure the new bundler with the existing app and now everything seems fine when running the development server.

However, when trying to compile the production build, I run in the following error:

vite v2.6.14 building for production...
✓ 162 modules transformed.
[vite:react-jsx] unknown: Maximum call stack size exceeded
file: /Users/matteocarpi/Documents/Web/philip-morris/aws-amplify-multi-tenant/node_modules/react-i18next/dist/es/Trans.js
error during build:
RangeError: unknown: Maximum call stack size exceeded
    at getJSXProps (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/vite-react-jsx/dist/cjs/babelRestoreJsx.js:79:29)
    at getJSXNode (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/vite-react-jsx/dist/cjs/babelRestoreJsx.js:31:23)
    at PluginPass.CallExpression (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/vite-react-jsx/dist/cjs/babelRestoreJsx.js:165:30)
    at newFn (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/@babel/traverse/lib/visitors.js:177:21)
    at NodePath._call (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/@babel/traverse/lib/path/context.js:100:31)
    at TraversalContext.visitQueue (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/@babel/traverse/lib/context.js:103:16)
    at TraversalContext.visitQueue (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/@babel/traverse/lib/context.js:109:21)
    at TraversalContext.visitQueue (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/@babel/traverse/lib/context.js:109:21)

I understand it's something to do with Babel and i18next, but I'm a bit stuck in what the specific problem is.

Any tips on how to debug further?

Thanks in advance,

M

Vinícius Santos · Accepted Answer · 2023-07-21 21:49:47Z

6

.env known issue

For those still facing the problem, there's a known issue with the motdotla/dotenv-expand package (used by Vite) related to duplicated variables' names in the .env file.

Issue opened for vite: https://github.com/vitejs/vite/issues/13399

The error happens when a variable references another variable with the same name, so check your .env file for duplicated names.

This works:

// .env

APP_NAME=$NAME

This breaks:

// .env

APP_NAME=$APP_NAME

or

APP_NAME="${APP_NAME}"

answered Jul 21, 2023 at 21:49

Vinícius Santos

711 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

66h3m3ab Over a year ago

You saved me from endless frustration, it's insane that this still hasn't been fixed

Matteo Carpi · Accepted Answer · 2021-11-16 16:33:20Z

1

I solved this using the reactJsx plugin only in development:

vite.config.js:

export default defineConfig(({ mode }) => {
  const isDevEnv = mode === 'development';
  
  return {
    plugins: [
       isDevEnv && react(),
    ]
  }
}

as suggested in this issue

answered Nov 16, 2021 at 16:33

Matteo Carpi

5848 silver badges26 bronze badges

Collectives™ on Stack Overflow

Vite.js + React: Maximum call stack size exceeded

2 Answers 2

.env known issue

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

.env known issue

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related