Can't import the named export x from non EcmaScript module
See original GitHub issueErrors
Error: ./node_modules/ng-apexcharts/fesm2015/ng-apexcharts.mjs 321:10-19
Can't import the named export 'Component' from non EcmaScript module (only default export is available)
Error: ./node_modules/ng-apexcharts/fesm2015/ng-apexcharts.mjs 330:12-17
Can't import the named export 'Input' from non EcmaScript module (only default export is available)
Error: ./node_modules/ng-apexcharts/fesm2015/ng-apexcharts.mjs 333:12-17
Can't import the named export 'Input' from non EcmaScript module (only default export is available)
//...
I have tried adding this to compilerOptions.
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
I have tried configuring webpakc
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
}
]
}
}
}
package.json
{
"name": "xxx",
"version": "0.1.00",
"scripts": {
"ng": "ng",
"start": "npm install && ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"protractor": "protractor e2e/protractor.conf.js"
},
"private": true,
"dependencies": {
"@angular/animations": "~11.2.14",
"@angular/cdk": "^11.2.13",
"@angular/common": "~11.2.14",
"@angular/compiler": "~11.2.14",
"@angular/core": "~11.2.14",
"@angular/forms": "~11.2.14",
"@angular/localize": "^11.2.14",
"@angular/material": "^11.2.13",
"@angular/material-moment-adapter": "^12.2.1",
"@angular/platform-browser": "~11.2.14",
"@angular/platform-browser-dynamic": "~11.2.14",
"@angular/router": "~11.2.14",
"@angular/service-worker": "~11.2.14",
"@ng-bootstrap/ng-bootstrap": "^10.0.0",
"@ng-idle/core": "^10.0.0-beta.1",
"@ngneat/until-destroy": "^8.1.4",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@popperjs/core": "^2.9.2",
"@swimlane/ngx-charts": "^19.1.0",
"apexcharts": "^3.33.1",
"bootstrap": "^5.0.1",
"deepmerge": "^4.2.2",
"humanize-duration": "^3.27.0",
"leader-line-new": "^1.1.9",
"moment": "^2.29.1",
"ng-apexcharts": "^1.7.0",
"ng-circle-progress": "^1.6.0",
"ng-click-outside": "^7.0.0",
"ng2-tooltip-directive": "~2.9.22",
"ngx-drag-scroll": "^12.0.0-beta.1",
"ngx-humanize-duration": "^1.2.5",
"ngx-infinite-scroll": "^10.0.1",
"ngx-material-timepicker": "^5.5.3",
"ngx-spinner": "^11.0.0",
"rxjs": "^6.6.7",
"tslib": "^2.0.0",
"uuid": "^8.3.2",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1102.14",
"@angular-eslint/builder": "4.3.0",
"@angular-eslint/eslint-plugin": "4.3.0",
"@angular-eslint/eslint-plugin-template": "4.3.0",
"@angular-eslint/schematics": "4.3.0",
"@angular-eslint/template-parser": "4.3.0",
"@angular/cli": "~11.2.14",
"@angular/compiler-cli": "~11.2.14",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "4.16.1",
"@typescript-eslint/parser": "4.16.1",
"eslint": "^7.6.0",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.0.8"
}
}
This works:
"apexcharts": "3.33.0",
"ng-apexcharts": "1.6.0",
Issue Analytics
- State:
- Created 2 years ago
- Reactions:5
- Comments:7 (2 by maintainers)
Top Results From Across the Web
Can't import the named export XXXX from non EcmaScript ...
the solution is to make sure that you have a webpack.config.js file in the root of your project directory that looks something like...
Read more >Can't import the named export from non EcmaScript module
Hi My site name is stupefied-lamarr-20c8d9 On the server side of my app I have lambda functions and within those I'm using apollo-server-lambda...
Read more >"Can't import the named export from non EcmaScript module ...
KJS: "Can't import the named export from non EcmaScript module (only default export is available)" with react-map-gl-draw external interface.
Read more >can't import the named export from non ecmascript module ...
I am using the html-entities package from npm and trying to import the decode method in my nodejs application. I have updated to...
Read more >webpack/webpack - Gitter
Can't import the named export 'a' from non EcmaScript module (only default export is available) ERROR in ./node_modules/@ionic/core/dist/esm/loader.mjs 7:4- ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
To temporary solve it, in package.json downgrade the version of ng-apexcharts to 1.6.0 You can keep latest the version of apexcharts (3.35.2)
then run npm install
I have the same issue, if somebody have a solution please!