requires to access `.default` after build while it's not required in dev (CJS dependency)
Problem
Describe the bug Encountered “Minified React error” in the production environment, the dev environment is fine. [code block] Reproduction Repo: https://github.com/songquanpeng/snippet-manager/tree/aa02a582c676bd3dcd5254f18d7087bb8a1a7220 My React application is on the `web` folder. System Info - `vite` version: 2.0.0 - Operating System: Windows 10 - Node version: v14.15.3 - Package manager (npm/yarn/pnpm) and version: 7.5.4 Summarization of the root problem https://github.com/vitejs/vite/issues/2139#issuecomment-1024852072
Error Output
error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additi
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix CJS Dependency Access to .default in Production Build
The issue arises because CommonJS (CJS) modules may not export their default exports properly when accessed in a production build environment. This leads to the 'Minified React error #130' when React tries to access an object that is undefined or not structured as expected. In development, the module resolution may work differently, allowing the application to run without errors.
Awaiting Verification
Be the first to verify this fix
- 1
Identify CJS Dependencies
Review your code and identify any CommonJS dependencies that may be causing issues by not exporting their default correctly. Focus on imports that are used in the production build.
- 2
Modify Import Statements
Change the import statements for the identified CJS dependencies to ensure that you are accessing the default export correctly. Use the following syntax to ensure compatibility with both CJS and ESM.
javascriptimport MyModule from 'my-cjs-module'; // Correct usage for default export - 3
Update Vite Configuration
If the issue persists, update your Vite configuration to include the 'optimizeDeps' option to ensure proper handling of CJS modules. This can help Vite pre-bundle the dependencies correctly.
javascriptexport default defineConfig({ optimizeDeps: { include: ['my-cjs-module'] } }); - 4
Rebuild the Application
After making the changes, rebuild your application for production using the command 'npm run build' or 'yarn build'. This will ensure that the changes are reflected in the production bundle.
bashnpm run build - 5
Test the Production Build
Deploy the production build and test the application thoroughly to confirm that the error no longer occurs. Pay special attention to areas where the CJS dependencies are used.
Validation
To confirm the fix worked, check the production environment for the absence of the 'Minified React error #130'. Additionally, ensure that all functionalities relying on the modified CJS dependencies work as expected without any runtime errors.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep