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

[RahulNag6896]

i fixed it simply doing this
in my package.json
before
"@codemirror/lang-javascript": "^6.2.2", "@codemirror/language": "^6.10.3", "@uiw/codemirror-theme-vscode": "^4.23.5", "@uiw/react-codemirror": "^4.23.5",
before
"@codemirror/lang-javascript": "6.2.2", "@codemirror/language": "6.10.3", "@uiw/codemirror-theme-vscode": "4.23.5", "@uiw/react-codemirror": "4.23.5",

[dhwaj1902]

Hi all,
We’re encountering a build error related to the following module:
Module not found: Error: Can't resolve './useCodeMirror' in '/---/node_modules/@uiw/react-codemirror/esm'
We’re not directly using @uiw/react-codemirror, but it’s a dependency of react-md-editor, which we do use in our project.
This issue is causing our production builds to fail. Please confirm when this will be resolved or if a patch/release is planned soon.

[jaywcjlove]

Hi all, We’re encountering a build error related to the following module: Module not found: Error: Can't resolve './useCodeMirror' in '/---/node_modules/@uiw/react-codemirror/esm' We’re not directly using @uiw/react-codemirror, but it’s a dependency of react-md-editor, which we do use in our project. This issue is causing our production builds to fail. Please confirm when this will be resolved or if a patch/release is planned soon.

@dhwaj1902 I’ve released a new version, but I’m not sure if it resolves the issue.

[dhwaj1902]

@dhwaj1902 I’ve released a new version, but I’m not sure if it resolves the issue.

Hi @jaywcjlove this release solves the issue.
Thanks for the help!

[TimWoolford]

Yes, fixed for us too. Thank you!

[Shellishack]

The new release works for me too. Thanks for everyone's help. Closing this issue now,.

[AlanGreene]

I was seeing the same error with useCodeMirror in vitest. The 4.23.12 release resolved that original issue for me, but I'm still seeing another related issue:

Error: Cannot find module 'node_modules/react/jsx-runtime' imported from node_modules/@uiw/react-codemirror/esm/index.js
Did you mean to import "react/jsx-runtime.js"?

I've been able to workaround it by setting either test.server.deps.inline = ['@uiw/react-codemirror'] or test.server.deps.fallbackCJS: true in my vite.config.js in case it helps others.