Open lukaskoeller opened 10 months ago
The main problem here is the @vitejs/plugin-legacy
in the vite.config.ts
. If you comment the import and its usage out or remove it, the command works fine.
It seems weird. Can you provide your monorepo directory structure and vite.config.ts?
Or try use npx vite-bundle-visualizer
?
@KusStar I had the same issue using npx
.
The path to the vite app I tested
my-monorepo/src/mf/my-app/vite.config.ts
Excerpt of the error pointing to the vite legacy plugin:
code: 'PLUGIN_ERROR',
requireStack: [
'/Users/path/node_modules/.pnpm/@babel+core@7.22.9/node_modules/@babel/core/lib/config/files/plugins.js',
'/Users/path/node_modules/.pnpm/@babel+core@7.22.9/node_modules/@babel/core/lib/config/files/index.js',
'/Users/path/node_modules/.pnpm/@babel+core@7.22.9/node_modules/@babel/core/lib/index.js',
'/Users/path/node_modules/.pnpm/@vitejs+plugin-react@1.2.0/node_modules/@vitejs/plugin-react/dist/index.js',
'/Users/path/src/mf/banking2.0/vite.config.ts',
'/Users/path/node_modules/.pnpm/vite@4.3.1_@types+node@17.0.45_sass@1.43.3_terser@5.19.2/node_modules/vite/dist/node/chunks/dep-24daf00c.js'
],
pluginCode: 'MODULE_NOT_FOUND',
plugin: 'vite:legacy-post-process',
hook: 'renderChunk'
vite.config.ts
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
import tsconfigPaths from 'vite-tsconfig-paths';
import { execSync } from 'child_process';
import legacy from '@vitejs/plugin-legacy';
import { PROJECT_DEVELOPMENT_PORTS } from "../../lib/fe-project-configs";
import packageJson from './package.json';
export default defineConfig(({ mode }) => {
const branchName = execSync('git rev-parse --abbrev-ref HEAD')
.toString()
.trimEnd();
process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
process.env.VITE_APP_BRANCH = process.env?.CI_COMMIT_BRANCH ?? branchName;
if (mode === 'production-local') {
process.env.VITE_DEPLOYMENT_STAGE = 'prod';
}
return {
define: {
'process.env.APP_VERSION': `'${packageJson.version}'`,
'process.env.MODE': `"${mode}"`,
},
server: {
port: PROJECT_DEVELOPMENT_PORTS.app,
host: '127.0.0.1'
},
preview: {
port: PROJECT_DEVELOPMENT_PORTS.app,
strictPort: true,
},
plugins: [
react(),
svgr(),
tsconfigPaths(),
legacy({}),
],
/**
* Optimise local dependencies for development.
* Pre-bundles the ones used this way,
* so only the ones used will be loaded.
*
* Downside: You'll have to restart your DEV server, when updates are made to
* the optimised deps.
*
*/
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: 'globalThis', // <-- AWS SDK
},
},
include: ['@appname/assets'],
exclude: ['reports'],
entries: ['!reports'],
},
build: {
commonjsOptions: {
include: [/@appname\/assets/, /node_modules/],
},
},
resolve: {
alias: {
'./runtimeConfig': './runtimeConfig.browser',
},
},
};
});
@KusStar I had the same issue using
npx
.The path to the vite app I tested
my-monorepo/src/mf/my-app/vite.config.ts
Excerpt of the error pointing to the vite legacy plugin:
code: 'PLUGIN_ERROR', requireStack: [ '/Users/path/node_modules/.pnpm/@babel+core@7.22.9/node_modules/@babel/core/lib/config/files/plugins.js', '/Users/path/node_modules/.pnpm/@babel+core@7.22.9/node_modules/@babel/core/lib/config/files/index.js', '/Users/path/node_modules/.pnpm/@babel+core@7.22.9/node_modules/@babel/core/lib/index.js', '/Users/path/node_modules/.pnpm/@vitejs+plugin-react@1.2.0/node_modules/@vitejs/plugin-react/dist/index.js', '/Users/path/src/mf/banking2.0/vite.config.ts', '/Users/path/node_modules/.pnpm/vite@4.3.1_@types+node@17.0.45_sass@1.43.3_terser@5.19.2/node_modules/vite/dist/node/chunks/dep-24daf00c.js' ], pluginCode: 'MODULE_NOT_FOUND', plugin: 'vite:legacy-post-process', hook: 'renderChunk'
vite.config.ts
import { defineConfig, loadEnv } from 'vite'; import react from '@vitejs/plugin-react'; import svgr from 'vite-plugin-svgr'; import tsconfigPaths from 'vite-tsconfig-paths'; import { execSync } from 'child_process'; import legacy from '@vitejs/plugin-legacy'; import { PROJECT_DEVELOPMENT_PORTS } from "../../lib/fe-project-configs"; import packageJson from './package.json'; export default defineConfig(({ mode }) => { const branchName = execSync('git rev-parse --abbrev-ref HEAD') .toString() .trimEnd(); process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }; process.env.VITE_APP_BRANCH = process.env?.CI_COMMIT_BRANCH ?? branchName; if (mode === 'production-local') { process.env.VITE_DEPLOYMENT_STAGE = 'prod'; } return { define: { 'process.env.APP_VERSION': `'${packageJson.version}'`, 'process.env.MODE': `"${mode}"`, }, server: { port: PROJECT_DEVELOPMENT_PORTS.app, host: '127.0.0.1' }, preview: { port: PROJECT_DEVELOPMENT_PORTS.app, strictPort: true, }, plugins: [ react(), svgr(), tsconfigPaths(), legacy({}), ], /** * Optimise local dependencies for development. * Pre-bundles the ones used this way, * so only the ones used will be loaded. * * Downside: You'll have to restart your DEV server, when updates are made to * the optimised deps. * */ optimizeDeps: { esbuildOptions: { // Node.js global to browser globalThis define: { global: 'globalThis', // <-- AWS SDK }, }, include: ['@quirion/assets'], exclude: ['reports'], entries: ['!reports'], }, build: { commonjsOptions: { include: [/@appname\/assets/, /node_modules/], }, }, resolve: { alias: { './runtimeConfig': './runtimeConfig.browser', }, }, }; });
And what's in package.json?
What if your execute in my-monorepo
and use -c
point to src/mf/my-app/vite.config.ts?
# in my-monorepo
npx vite-bundle-visualizer -c src/mf/my-app/vite.config.ts
Dependencies from package.json
:
"dependencies": {
"@companyName/api": "workspace:*",
"@companyName/assets": "workspace:*",
"@companyName/components": "workspace:*",
"@companyName/data": "workspace:*",
"@companyName/data-deprecated": "workspace:*",
"@companyName/error": "workspace:*",
"@companyName/project-configs": "workspace:*",
"@companyName/theme": "workspace:*",
"@companyName/types": "workspace:*",
"@companyName/utils": "workspace:*",
"@companyName/validate": "workspace:*",
"dayjs": "^1.11.5",
"dotenv": "^16.3.1",
"echarts": "^5.3.0",
"echarts-for-react": "^3.0.2",
"formik": "^2.2.9",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-device-detect": "^2.2.3",
"react-dom": "^18.2.0",
"react-gtm-module": "^2.0.11",
"react-redux": "^8.0.5",
"react-router-dom": "^6.12.0",
"redux": "^4.2.1",
"redux-thunk": "^2.4.2",
"styled-components": "^5.3.0",
"yup": "0.32.11"
},
"devDependencies": {
"@aws-sdk/client-dynamodb": "^3.18.0",
"@aws-sdk/client-s3": "^3.17.0",
"@aws-sdk/util-dynamodb": "^3.18.0",
"@playwright/test": "1.37.0",
"@companyName/eslint-config": "workspace:*",
"@companyName/fe-tests": "workspace:*",
"@companyName/playwright-config": "workspace:*",
"@types/react-gtm-module": "^2.0.1",
"@vitejs/plugin-legacy": "^4.0.3",
"@vitejs/plugin-react": "^1.0.0",
"avris-generator": "^0.8.1",
"chance": "^1.1.7",
"postcss-custom-media": "^8.0.0",
"postcss-preset-env": "^8.0.1",
"postcss-scss": "^4.0.3",
"sass": "^1.43.3",
"typescript": "^4.7.4",
"vite": "^4.3.1",
"vite-plugin-svgr": "^2.4.0",
"vite-tsconfig-paths": "^3.3.17"
}
Running from the monorepo root and pointing to the vite.config of the app throws the following error:
Could not resolve entry module "index.html".
Your project structure is complex. Can you provide a reproduce repo?
Your project structure is complex. Can you provide a reproduce repo?
Sure. Here is a repro on Stackblitz: https://stackblitz.com/edit/vitejs-vite-mkjnwn?file=vite.config.ts
I literally just added the @vitejs/plugin-legacy
package and adjusted vite.config.ts
accordingly. It is the same reason it is failing in my app. The error though is a different one: [visualizer] recursive use of an object detected which would lead to unsafe aliasing in rust
Seems like the rust error was caused in WebContainer?
On my local machine, it was fine
And by the way, @vitejs/plugin-legacy actually has problem to visualize bundle, i will try to find out why.
When I run the following command…
…in the root of my vite project which is part of a pnpm monorepo, I get the following error: