After upgrading to Webpack 5, I'm now encountering this error:
./node-modules/@fizz/my-library/components/MyComponent/MyComponent.js:97:19-39 - Error: Should not import the named export 'foo' (imported as 'bar') from default-exporting module (only default export is available soon)
The issue occurs in an imported library that I cannot modify. The problematic import is this:
import { foo as bar } from '../ParentComponent.css.json';
ParentComponent.css.json looks like this:
{
"foo": {
"a": 1,
"b": 2,
"c": 3
},
...
}
I have the following in tsconfig.json:
"compilerOptions": {
"module": "commonjs",
"moduleResolution": 'node",
"target": "es2015",
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"esModuleInterop": true,
...
}
Any ideas on how I can resolve this error? I have tried deleting node_modules and package-lock.json but have had no success.
Problem that you are facing is related to how modules are built in JavaScript.
You can export a default module from a file, or a named one. Difference looks like that:
export default myFunction vs export myFunction
The obvious conclusion is that a particular file can not contain more than one default export.
So to import this file, you actually can name it anyway you want it to, as no matter what you will call it, JavaScript will take the object exported by default and will reference to it correctly.