When I convert a React App to ES6, I got Module Not found error, how can I fix it?

Question

My react application works as expected, however; when I attempt to covert the package to an ECMAScript-Module (aka ESM) using the package.json setting "type": "module I get an error.

What I have been doing, is changing the setting in the package.json file, then restarting the application/environment so that the configuration will take effect. When the application loads, I get the following error:

"ERROR in ./src/index.js 8:0-24"
"Module not found: Error: Can't resolve './App' in 'D:\workspace\newApp\src'"
"Did you mean 'App.js'?"

BREAKING CHANGE: "The request ./App failed to resolve only because it was resolved as fully specified."

(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified.

Add the extension to the request.

Is it possible to fix the problem without changing my source code?

According to the solution, it can be solved by changing the webpack.config.js content.

In the newApp\node_modules\react-scripts\config\webpack.config.js, I found the following:

extensions: paths.moduleFileExtensions
    .map(ext => `.${ext}`)
    .filter(ext => useTypeScript || !ext.includes('ts')),

where paths.moduleFileExtensions = [ 'web.mjs', 'mjs', 'web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', ];

It seems like the js extension has been added. So, I don't know how to fix the problem.

Here is my package.json for your reference.

      {
        "name": "itsqm",
        "version": "0.1.0",
        "private": true,
        "type": "module",
        "dependencies": {
          "@testing-library/jest-dom": "^5.16.1",
          "@testing-library/react": "^11.2.7",
          "@testing-library/user-event": "^12.8.3",
          "axios": "^0.25.0",
          "bootstrap": "^5.1.3",
          "cross-env": "^7.0.3",
          "dotenv-flow": "^3.2.0",
          "http-proxy-middleware": "^2.0.1",
          "node-fetch": "^2.6.7",
          "nodemon": "^2.0.15",
          "npm-run-all": "^4.1.5",
          "react": "^17.0.2",
          "react-bootstrap": "^2.0.3",
          "react-dom": "^17.0.2",
          "react-router-dom": "^6.0.2",
          "react-scripts": "^5.0.0",
          "react-select": "^5.2.1",
          "web-vitals": "^1.1.2"
        },
        "scripts": {
          "build": "react-scripts build",
          "dev": "cross-env NODE_ENV=development run-p server start",
          "prod": "cross-env NODE_ENV=production npm run server",
          "server": "nodemon -r dotenv/config ./server/index.js",
          "start": "react-scripts start",
          "test": "react-scripts test",
          "eject": "react-scripts eject"
        },
        "eslintConfig": {
          "extends": [
            "react-app",
            "react-app/jest"
          ]
        },
        "browserslist": {
          "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
          ],
          "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
          ]
        }
      }

Answer 1

Try the following steps,

1. Add the following to .tsconfig.json

{
"compilerOptions": {
...//
 "esModuleInterop": true,
},
...//
  "include": [
    "src/**/*.ts", 
    "src/**/*.tsx",
    "test/**/*.ts"
  ],
};