How can i fix the error "Must use import to load ES Module"?

Question

I found this error while testing with jest.

 Must use import to load ES Module: ...\node_modules\react-markdown\index.js

      1 | import React from "react";
      2 | import styled from "styled-components";
    > 3 | import MDEditor from "@uiw/react-md-editor";
        | ^
      4 |
      5 | import { useNavigate } from "react-router-dom";
      6 |

      at Runtime.requireModule (node_modules/jest-runtime/build/index.js:840:21)
      at Object.require (node_modules/@uiw/react-markdown-preview/src/index.tsx:2:1)
      at Object.<anonymous> (node_modules/@uiw/react-md-editor/src/Editor.tsx:2:1)
      at Object.<anonymous> (node_modules/@uiw/react-md-editor/src/index.tsx:1:1)
      at Object.require (src/components/Card.tsx:3:1)
      at Object.require (src/pages/MainPage/Main.tsx:1:1)
      at Object.require (src/App.tsx:1:1)
      at Object.require (src/index.test.js:4:1)

Here is my jest.config.js file.

jest: {
        roots: ["<rootDir>/src"],
        collectCoverageFrom: [
            "src/**/*.{js,jsx,ts,tsx}",
            "!src/**/*.d.ts",
            "!**/node_modules/**",
        ],
        globals: {
            "js-jest": {
                useESM: true,
            },
        },
        extensionsToTreatAsEsm: [".js"],
        setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"],
        testMatch: [
            "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
            "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}",
        ],
        testEnvironment: "jsdom",
        transform: { "^.+\\.(js|jsx|ts|tsx)?$": "babel-jest" },
        transformIgnorePatterns: ["node_modules/(?!react-markdown/)"],
        moduleNameMapper: {
            "^.+\\.svg$": "jest-svg-transformer",
            "\\.(css|less|scss|sass)$": "identity-obj-proxy",
        },
        moduleFileExtensions: ["js", "ts", "jsx", "tsx", "json", "node"],
        resetMocks: true,
    },

and babel.config.js

  presets: [
        "@babel/preset-react",
        ["@babel/preset-env", { targets: { node: "current" } }],
        "@babel/preset-typescript",
    ],

script

  "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"

I've tried many things, but I can't find the problem. I am not using react-markdown, so can I know why this error occurs?

add the script : "--experimental-vm-modules node_modules/jest/bin/jest.js"

add the 'globals' in jest.config.js : "js-jest": {useESM: true,},

How can i fix the error "Must use import to load ES Module"?

0 Answers0