Webpack 5 Error: Should not import the named export 'foo' (imported as 'bar') from default-exporting module

user_464188 0
Viewed 3699

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.

tsconfig webpack typescript javascript
1 Answers

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.

user_123213950
Related