webpack version 5.64.4-5.75.0 bug, resolve only because it was resolved as fully specified

[geektcp]

Bug report

Module not found: Error: Can't resolve 
'./getPrototypeOf' in
 'D:\xxx\lab-react\beta-simple\node_modules\babel-preset-react-app\node_modules\@babel\runtime\helpers\esm'
Did you mean 'getPrototypeOf.js'?
BREAKING CHANGE: 
The request './getPrototypeOf' 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"').

What is the current behavior?

Currently, no version has solved this problem， version 5.64.4 - 5.75.0 have this bug

Provide the steps to reproduce.

just run build it ,then u can see the bug.
npm run build
or
npm run buildR

package.json：

{
  "name": "beta-simple",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "web-vitals": "^2.1.4",
    "axios": "^0.19.0",
    "babel-jest": "^24.8.0",
    "babel-loader": "8.0.6",
    "babel-plugin-named-asset-import": "^0.3.3",
    "babel-preset-react-app": "^9.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "react-router-dom": "^5.0.1",
    "webpack": "^5.64.4",
    "webpack-dev-server": "^4.6.0",
    "webpack-manifest-plugin": "^4.0.2",
    "workbox-webpack-plugin": "^6.4.1",
    "html-webpack-plugin": "^5.5.0"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "eject": "node scripts/test.js",
    "startR": "react-scripts start",
    "buildR": "react-scripts build",
    "ejectR": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Temporary solution

webpack.config.js
module -> rules -> oneOf
add this:

{
  test: /\.m?js/, // fix:issue: https://github.com/webpack/webpack/issues/11467
  resolve: {
    fullySpecified: false,
  },
},

---

webpack version: 5.75.0 or 5.64.4
Node.js version: 12.10
Operating System: win7

[TheLarkInn]

Could you please provide a reproducible example repo. 🙏

[lgk-bsw]

I experienced similar problems in this Create React App project: https://github.com/lgk-bsw/msagl-react-with-problems

ERROR in ./node_modules/@msagl/renderer-svg/dist/index.js 1:0-44
Module not found: Error: Can't resolve './rendererSvg' in 'C:\projects-temp\msagl-react-with-problems\node_modules\@msagl\renderer-svg\dist'
Did you mean 'rendererSvg.js'?
BREAKING CHANGE: The request './rendererSvg' 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.

webpack compiled with 4 errors

The error occurs when using microsoft/msagljs in a new CRA project.
Webpack version is 5.80.0 when I run react-scripts eject.

[alexander-akait]

In ESM you need to write extensions

[olejorgenb]

When importing third party libraries as well? I get the same thing when importing lodash/isSet

[NullVoxPopuli]

if a package provides an exports map, this error seems... wrong?
the exports map provides a map from extension-less imports to extensioned imports, see: https://github.com/statelyai/xstate/blob/next/packages/xstate-fsm/package.json#L25

[alexander-akait]

Ok, here I proved myself wrong: https://github.com/NullVoxPopuli/webpack-example-test-package-exports

It is real not good to use this and have the same options for babel:

test: /\.(?:js|mjs|cjs)$/

Maybe it's just for tests, but if you really have it, I highly recommend not doing it - you can generate CommonJS for mjs and CommonJS for js when you have type: "module" (i.e. for ES modules), I think you understand why this is not very good, but yes, it can be made to work.

In my real issue, even though this stack is coming out of lib/Compilation.js: https://github.com/embroider-build/embroider/actions/runs/5213641901/jobs/9408936920#step:4:162

Can you fine where you import/require v2-addon/components/example-component and provide a code (part of code), also look at a file extensions, also maybe you have type: "javascript/esm" for some loaders?

[NullVoxPopuli]

Can you fine where you import/require v2-addon/components/example-component

yeah, it's in a test, which generates a fixture'd project: https://github.com/embroider-build/embroider/pull/1466/files#diff-586aa4fa21de254979f04d9f037d6c967a8fe5b615d14b54d58869c66a2bb64bR142
I've uploaded the output here: https://github.com/NullVoxPopuli/v2-addon-basics-test-2023-06-08-exploring-type-module
(which re-creates the issue)
But my hunch is that I need to debug the webpack-generating code, and maybe look at some intermediate output

maybe you have

It's gonna take some debugging -- the real config is quite complex: https://github.com/embroider-build/embroider/blob/main/packages/webpack/src/ember-webpack.ts#L209
(we're translating legacy stuff into modern spec-compliant JS, to get apps that have been around for 9+ years doing more modern things)

[alexander-akait]

Yeah, feel free to ping me if you need help.

Also does "v2-addon" have an "exports" field?

[NullVoxPopuli]

Also does "v2-addon" have an "exports" field?

yeah. However, the thick plottens,

"exports": {   
   "./*": "./*"    
},  

I had missed that the test had been setup goofy (it was probably me ages ago, tbh)
changing it to

"exports": {   
   "./*": "./*.js"    
},  

Resolves the issue.

HOWEVER where the thick plots over here: https://github.com/universal-ember/ember-primitives/pull/33/files
in a real project that I was trying to modify an existing test to reproduce the issue present here in an actual project. 🤔
so.. I think I have a couple more options to explore tho -- just thought I'd post an update -- I think there is no issue with webpack atm.
I'll probably continue tomorrow. 🙃

[alexander-akait]

@NullVoxPopuli Great, you found a problem, feel free to ping me if you need a help or will face with something hard