Cannot find module '@babel/preset-env'

[lukaskoeller]

When I run the following command…

pnpm dlx vite-bundle-visualizer

…in the root of my vite project which is part of a pnpm monorepo, I get the following error:

[vite:legacy-post-process] Cannot find module '@babel/preset-env'

[lukaskoeller]

Workaround Solution

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.

[KusStar]

It seems weird. Can you provide your monorepo directory structure and vite.config.ts? Or try use npx vite-bundle-visualizer?

[lukaskoeller]

@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/@[email protected]/node_modules/@babel/core/lib/config/files/plugins.js',
    '/Users/path/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/files/index.js',
    '/Users/path/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/index.js',
    '/Users/path/node_modules/.pnpm/@[email protected]/node_modules/@vitejs/plugin-react/dist/index.js',
    '/Users/path/src/mf/banking2.0/vite.config.ts',
    '/Users/path/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/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]

@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/@[email protected]/node_modules/@babel/core/lib/config/files/plugins.js',
    '/Users/path/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/config/files/index.js',
    '/Users/path/node_modules/.pnpm/@[email protected]/node_modules/@babel/core/lib/index.js',
    '/Users/path/node_modules/.pnpm/@[email protected]/node_modules/@vitejs/plugin-react/dist/index.js',
    '/Users/path/src/mf/banking2.0/vite.config.ts',
    '/Users/path/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/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

[lukaskoeller]

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".

[KusStar]

Your project structure is complex. Can you provide a reproduce repo?

[lukaskoeller]

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

[KusStar]

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.