reactjs - Vitest require ESM Error. How do I get past this - Stack Overflow

admin管理员组

文章数量:1202806

Im running React+Vite. And im trying to setup unit test cases for components, but when I try to run it, I'm getting the following error

Error: require() of ES module ...\index.js from ...\node_modules@nivo\core\dist\nivo-core.cjs.js not supported Instead change the require of index.js in ... to a dynamic import() which is available in all CommonJS modules.

It throws a @nivo package error, but I haven't directly used it here, it's from a component UI library. How can I resolve this error.

Tried various solutions from stackoverflow and github, but nothing seems to resolve this issue.

package.json of repo

{
  "name": "admin-portal",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@hookform/resolvers": "^1.3.2",
    "@material-table/core": "^2.3.20",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^3.2.10",
    "@microsoft/signalr": "^6.0.16",
    "@mui/icons-material": "^5.0.1",
    "@mui/material": "^5.0.2",
    "@reduxjs/toolkit": "^1.6.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.28.1",
    "date-fns": "^2.16.1",
    "file-saver": "^2.0.5",
    "html-react-parser": "^1.4.0",
    "lodash": "^4.17.21",
    "test-ui-library": "^0.12.43",
    "msal": "^1.4.12",
    "notistack": "^1.0.6",
    "query-string": "^6.13.8",
    "react": "^17.0.2",
    "react-aad-msal": "^2.3.5",
    "react-dom": "^17.0.2",
    "react-dropzone": "^11.3.2",
    "react-fetching-library": "^1.7.5",
    "react-hook-form": "^6.14.2",
    "react-idle-timer": "^5.5.2",
    "react-movable": "^3.0.4",
    "react-number-format": "^4.5.5",
    "react-quill": "^1.3.5",
    "react-responsive-carousel": "^3.2.23",
    "react-router-dom": "^5.3.1",
    "react-signature-canvas": "^1.0.6",
    "react-to-print": "^2.14.7",
    "redux-persist": "^6.0.0",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4",
    "yup": "^0.32.8"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:coverage": "vitest run --coverage",
    "prettier": "prettier \"src/**/*.+(ts|tsx|js)\"",
    "format": "npm run prettier -- --write",
    "dev": "vite",
    "preview": "vite preview --port=3000"
  },
  "eslintConfig": {
    "extends": [
      "react-app"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@hookform/devtools": "^2.2.1",
    "@svgr/core": "^8.1.0",
    "@svgr/plugin-jsx": "^8.1.0",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^12.1.5",
    "@testing-library/user-event": "^14.5.2",
    "@types/file-saver": "^2.0.2",
    "@types/node": "^20.11.5",
    "@types/react": "^17.0.1",
    "@types/react-dom": "^17.0.1",
    "@types/react-input-mask": "^3.0.1",
    "@types/react-redux": "^7.1.18",
    "@types/react-router-dom": "^5.1.7",
    "@types/yup": "^0.29.11",
    "@typescript-eslint/eslint-plugin": "^5.3.1",
    "@typescript-eslint/parser": "^5.3.1",
    "@vitejs/plugin-react": "^4.2.1",
    "@vitest/coverage-v8": "^1.2.2",
    "@vitest/ui": "^1.2.2",
    "eslint": "^7.26.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.26.1",
    "jsdom": "^24.0.0",
    "prettier": "^2.3.0",
    "regenerator-runtime": "^0.14.1",
    "vite": "^5.1.1",
    "vite-plugin-node-polyfills": "^0.21.0",
    "vite-tsconfig-paths": "^4.3.1",
    "vitest": "^1.2.2"
  }
}

vite.config.ts

import react from "@vitejs/plugin-react";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";
import {
  createFilter,
  defineConfig,
  loadEnv,
  Plugin,
  transformWithEsbuild,
} from "vite";
import { nodePolyfills } from "vite-plugin-node-polyfills";
import tsconfigPaths from "vite-tsconfig-paths";

// /config/
export default defineConfig(({ mode }) => {
  setEnv(mode);
  return {
    define: {
      "process.versions.electron": {},
      "process.version": JSON.stringify("v21.7.2"),
    },
    envPrefix: ["REACT_APP_"],
    plugins: [
      react({
        include: "**/*.tsx",
      }),
      tsconfigPaths(),
      envPlugin(),
      devServerPlugin(),
      sourcemapPlugin(),
      buildPathPlugin(),
      importPrefixPlugin(),
      htmlPlugin(mode),
      svgrPlugin(),
      nodePolyfills({
        include: ["crypto", "util", "stream", "fs", "zlib", "vm"],
      }),
    ],
  };
});

function setEnv(mode: string) {
  Object.assign(
    process.env,
    loadEnv(mode, ".", ["REACT_APP_", "NODE_ENV", "PUBLIC_URL"]),
  );
  process.env.NODE_ENV ||= mode;
  const { homepage } = JSON.parse(readFileSync("package.json", "utf-8"));
  process.env.PUBLIC_URL ||= homepage
    ? `${
        homepage.startsWith("http") || homepage.startsWith("/")
          ? homepage
          : `/${homepage}`
      }`.replace(/\/$/, "")
    : "";
}

// Expose `process.env` environment variables to your client code
// Migration guide: Follow the guide below to replace process.env with import.meta.env in your app, you may also need to rename your environment variable to a name that begins with REACT_APP_ instead of REACT_APP_
// /guide/env-and-mode.html#env-variables
function envPlugin(): Plugin {
  return {
    name: "env-plugin",
    config(_, { mode }) {
      const env = loadEnv(mode, ".", ["REACT_APP_", "NODE_ENV", "PUBLIC_URL"]);
      return {
        define: Object.fromEntries(
          Object.entries(env).map(([key, value]) => [
            `process.env.${key}`,
            JSON.stringify(value),
          ]),
        ),
      };
    },
  };
}

// Setup HOST, SSL, PORT
// Migration guide: Follow the guides below
// /config/server-options.html#server-host
// /config/server-options.html#server-https
// /config/server-options.html#server-port
function devServerPlugin(): Plugin {
  return {
    name: "dev-server-plugin",
    config(_, { mode }) {
      const { HOST, PORT, HTTPS, SSL_CRT_FILE, SSL_KEY_FILE } = loadEnv(
        mode,
        ".",
        ["HOST", "PORT", "HTTPS", "SSL_CRT_FILE", "SSL_KEY_FILE"],
      );
      const https = HTTPS === "true";
      return {
        server: {
          host: HOST || "localhost",
          port: parseInt(PORT || "3000", 10),
          open: true,
          ...(https &&
            SSL_CRT_FILE &&
            SSL_KEY_FILE && {
              https: {
                cert: readFileSync(resolve(SSL_CRT_FILE)),
                key: readFileSync(resolve(SSL_KEY_FILE)),
              },
            }),
        },
      };
    },
  };
}

// Migration guide: Follow the guide below
// /config/build-options.html#build-sourcemap
function sourcemapPlugin(): Plugin {
  return {
    name: "sourcemap-plugin",
    config(_, { mode }) {
      const { GENERATE_SOURCEMAP } = loadEnv(mode, ".", ["GENERATE_SOURCEMAP"]);
      return {
        build: {
          sourcemap: GENERATE_SOURCEMAP === "true",
        },
      };
    },
  };
}

// Migration guide: Follow the guide below
// /config/build-options.html#build-outdir
function buildPathPlugin(): Plugin {
  return {
    name: "build-path-plugin",
    config(_, { mode }) {
      const { BUILD_PATH } = loadEnv(mode, ".", ["BUILD_PATH"]);
      return {
        build: {
          outDir: BUILD_PATH || "build",
        },
      };
    },
  };
}

// To resolve modules from node_modules, you can prefix paths with ~
// /docs/adding-a-sass-stylesheet
// Migration guide: Follow the guide below
// /config/shared-options.html#resolve-alias
function importPrefixPlugin(): Plugin {
  return {
    name: "import-prefix-plugin",
    config() {
      return {
        resolve: {
          alias: [{ find: /^~([^/])/, replacement: "$1" }],
        },
      };
    },
  };
}

// In Create React App, SVGs can be imported directly as React components. This is achieved by svgr libraries.
// /docs/adding-images-fonts-and-files/#adding-svgs
function svgrPlugin(): Plugin {
  const filter = createFilter("**/*.svg");
  const postfixRE = /[?#].*$/s;

  return {
    name: "svgr-plugin",
    async transform(code, id) {
      if (filter(id)) {
        const { transform } = await import("@svgr/core");
        const { default: jsx } = await import("@svgr/plugin-jsx");

        const filePath = id.replace(postfixRE, "");
        const svgCode = readFileSync(filePath, "utf8");

        const componentCode = await transform(svgCode, undefined, {
          filePath,
          caller: {
            previousExport: code,
            defaultPlugins: [jsx],
          },
        });

        const res = await transformWithEsbuild(componentCode, id, {
          loader: "jsx",
        });

        return {
          code: res.code,
          map: null,
        };
      }
    },
  };
}

// Replace %ENV_VARIABLES% in index.html
// /guide/api-plugin.html#transformindexhtml
// Migration guide: Follow the guide below, you may need to rename your environment variable to a name that begins with REACT_APP_ instead of REACT_APP_
// /guide/env-and-mode.html#html-env-replacement
function htmlPlugin(mode: string): Plugin {
  const env = loadEnv(mode, ".", ["REACT_APP_", "NODE_ENV", "PUBLIC_URL"]);
  return {
    name: "html-plugin",
    transformIndexHtml: {
      order: "pre",
      handler(html) {
        return html.replace(/%(.*?)%/g, (match, p1) => env[p1] ?? match);
      },
    },
  };
}

vitest.config.ts

/// <reference types="vitest" />
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  resolve: {
    alias: {
      "d3-interpolate": "d3-interpolate/dist/d3-interpolate.min.js",
      "d3-scale": "d3-scale/dist/d3-scale.min.js",
      "d3-shape": "d3-shape/dist/d3-shape.min.js",
    },
  },
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./src/setupTests.ts"],
    coverage: {
      provider: "v8",
      reporter: ["text", "json", "html"],
      exclude: [
        "node_modules/",
        "src/setupTests.ts",
        "**/*.d.ts",
        "**/*.test.{ts,tsx}",
        "**/*.spec.{ts,tsx}",
        "**/types/**",
      ],
      thresholds: {
        statements: 80,
        branches: 80,
        functions: 80,
        lines: 80,
      },
    },
    include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
    exclude: ["node_modules", "dist", "build"],
    deps: {
      inline: [/d3-.*/, /@nivo\/.*/, "regenerator-runtime"],
      interopDefault: true,
      fallbackCJS: true,
    },
    root: "./",
    watchExclude: ["**/node_modules/**", "**/dist/**"],
    passWithNoTests: true,
  },
});

package.json of the ui-library

{
  "name": "test-ui-library",
  "version": "0.12.42",
  "description": "Made with create-react-library",
  "author": "",
  "license": "UNLICENSED",
  "repository": {
    "type": "git",
    "url": "NONE"
  },
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
  "source": "src/index.ts",
  "engines": {
    "node": ">=18"
  },
  "exports": {
    ".": {
      "import": "./dist/index.modern.js",
      "require": "./dist/index.js"
    }
  },
  "scripts": {
    "build": "microbundle --no-compress --format modern,cjs --jsx React.createElement",
    "start": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement",
    "prepare": "run-s build",
    "test": "run-s test:unit test:lint test:build",
    "test:build": "run-s build",
    "test:lint": "eslint .",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom",
    "predeploy": "cd example && npm install && npm run build",
    "storybook": "storybook dev  -p 6006",
    "build-storybook": "storybook build -o storybookDist"
  },
  "devDependencies": {
    "@babel/core": "^7.12.13",
    "@storybook/addon-actions": "^8.4.7",
    "@storybook/addon-essentials": "^8.4.7",
    "@storybook/addon-links": "^8.4.7",
    "@storybook/react": "^8.4.7",
    "@storybook/react-vite": "^8.4.7",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^25.1.4",
    "@types/node": "^12.12.38",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^16.9.7",
    "@types/react-highlight": "^0.12.2",
    "@types/react-input-mask": "^3.0.1",
    "@typescript-eslint/eslint-plugin": "^5.3.1",
    "@typescript-eslint/parser": "^5.3.1",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.2.2",
    "cross-env": "^7.0.3",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-standard": "^4.0.1",
    "microbundle": "^0.15.1",
    "namor": "^2.0.3",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.2.1",
    "react-highlight": "^0.14.0",
    "typescript": "^4.1.2"
  },
  "files": [
    "dist"
  ],
  "dependencies": {
    "@babel/cli": "^7.12.13",
    "@babel/plugin-transform-modules-commonjs": "^7.13.0",
    "@date-io/moment": "^1.3.13",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^10.3.0",
    "@hookform/devtools": "^2.2.1",
    "@hookform/resolvers": "^1.0.1",
    "@material-table/core": "^2.3.20",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/pickers": "^3.3.10",
    "@mui/material": "^5.13.7",
    "@mui/x-date-pickers": "^7.11.0",
    "@nivo/bar": "^0.85.1",
    "@nivo/core": "^0.85.1",
    "@nivo/line": "^0.85.1",
    "@nivo/pie": "^0.85.1",
    "@types/react-table": "^7.7.7",
    "@types/yup": "^0.29.11",
    "@vitejs/plugin-react": "^4.2.1",
    "auto": "^10.16.0",
    "date-fns": "^2.25.0",
    "dayjs": "^1.11.9",
    "lodash": "^4.17.21",
    "match-sorter": "^6.3.1",
    "moment": "^2.29.1",
    "prop-types": "^15.7.2",
    "react-data-grid": "^7.0.0-beta.7",
    "react-dnd": "^14.0.4",
    "react-dnd-html5-backend": "^14.0.2",
    "react-hook-form": "^6.14.2",
    "react-input-mask": "^2.0.4",
    "react-number-format": "^4.5.5",
    "react-svg": "^12.1.0",
    "react-table": "^7.7.0",
    "storybook": "^8.4.7",
    "vite": "^5.4.11",
    "yup": "^0.32.11"
  },
  "keywords": [
    "test"
  ],
  "types": "./dist/index.d.ts",
  "peerDependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

本文标签： reactjsVitest require ESM Error How do I get past thisStack Overflow