Webpack complains about strict ESM module and requires import clause with .js suffix

[Shellishack]

Hi,

Thanks for the community's hard work on solving issues around ESM/CJS interpretation.

I noticed these build errors on my side since @uiw/react-codemirror4.23.10. Updating to 4.23.11 to adapt #729 doesn't seem to solve the problem. I am using Webpack along with React and ESM.

ERROR in ./node_modules/@uiw/react-codemirror/esm/index.js 5:0-48
Module not found: Error: Can't resolve './useCodeMirror' in 'C:\GitHub\pulse-editor-code-view\node_modules\@uiw\react-codemirror\esm'
Did you mean 'useCodeMirror.js'?
BREAKING CHANGE: The request './useCodeMirror' 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.
 @ ./src/component/code-editor-view.tsx
 @ ./src/main.tsx 3:0-58 13:31-45

ERROR in ./node_modules/@uiw/react-codemirror/esm/index.js 11:0-39
Module not found: Error: Can't resolve './getDefaultExtensions' in 'C:\GitHub\pulse-editor-code-view\node_modules\@uiw\react-codemirror\esm'
Did you mean 'getDefaultExtensions.js'?
BREAKING CHANGE: The request './getDefaultExtensions' 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.
 @ ./src/component/code-editor-view.tsx
 @ ./src/main.tsx 3:0-58 13:31-45

ERROR in ./node_modules/@uiw/react-codemirror/esm/index.js 12:0-24
Module not found: Error: Can't resolve './utils' in 'C:\GitHub\pulse-editor-code-view\node_modules\@uiw\react-codemirror\esm'     
Did you mean 'utils.js'?
BREAKING CHANGE: The request './utils' 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.
 @ ./src/component/code-editor-view.tsx
 @ ./src/main.tsx 3:0-58 13:31-45

Workaround:
As #680 (comment) pointed out, rolling back to 4.23.8 worked for me.

I am happy to help, but I am reletively new to this community so please enlighten me if devs can look into this. A possible direction to look into might be some bugs introduced between 4.23.8 to 4.23.10

[Shellishack]

Okay, I narrowed it down to a potential cause between 4.23.8 and 4.23.9. Webpack starts complaining at 4.23.9

Nvm, I think 4.23.11 caused the issue. I think I initially got the error because I rebuilt my package and somehow that got updated to the latest version. Here is a sandbox https://codesandbox.io/p/github/Shellishack/webpack-esm-sandbox/chore/template_sync_8bcf577?import=true

[TimWoolford]

Same issue, definitely started with update from 4.23.10 to 4.23.11

[nikhilparmar86]

Could you please let us know when the fix will be available and version 4.23.12 will be released?

[Ablewang]

For the same problem, when I downgraded the package version to 4.23.10, this kind of problem didn't occur. I checked the "esm" folder in its output. In version 4.23.11, there was an additional "package.json" file, which declared "type: 'module'". This enabled the ESM strict mode and led to this problem.

[wdolek]

Yesterday when I discovered this issue I also found #710 (which is way older), and hoped I could bend webpack to do the same aliasing/importing, but without any luck.

It's mind boggling such change happens just within patch 😓

[Shellishack]

Hi,

After reviewing the code, and changes in #729, it seems like there were attempts to distinguish esm and cjs by adding {type: "commonjs"} or {type:"module"} to corresponding builds. However, for the ESM build inside core/esm/, it seems like they are not including ".js" in import clauses.

I think I found a potential fix by adding a .babelrc to core/ according to https://wangchujiang.com/tsbb/#babel-project, and using babel-plugin-add-import-extension.

The new .babelrc inside core/ might look like

{
    "env": {
        "cjs": {
            "presets": [
                "@babel/preset-typescript"
            ]
        },
        "esm": {
            "presets": [
                "@babel/preset-env"
            ],
            "plugins": [
                [
                    "babel-plugin-add-import-extension",
                    {
                        "extension": "js"
                    }
                ]
            ]
        }
    }
}

Now when I run npm run build --workspace=core, it fixes import clauses in core/esm by adding ".js" suffixes.

I don't know if this cover all cases. I am happy to create a PR when I get more time