Angular is a JavaScript framework for writing web interfaces (Front-end), developed by Google. Currently, Angular is being used by many large companies.

While executing some simple flask code, many people are confronted with the message “ERROR in./node modules/ngx-window-token/fesm2015/ngx-window-token.mjs. Can’t import the named export ‘InjectionToken’ from non EcmaScript module“.

Please refer to the quickest solution immediately below if you find yourself in this situation!

What is “ERROR in ./node_modules/ngx-window-token/fesm2015/ngx-window-token.mjs. Can’t import the named export ‘InjectionToken’ from non EcmaScript module” ?

You are attempting to run the Angular project but encountering the following error.

ERROR in ./node_modules/ngx-window-token/fesm2015/ngx-window-token.mjs. Can't import the named export 'InjectionToken' from non EcmaScript module

In another case, the issue may appear like this.

Error: ./node_modules/ngx-window-token/fesm2015/ngx-window-token.mjs 3:19-33

Can't import the named export 'InjectionToken' from non EcmaScript module (only default export is available)

    at HarmonyImportSpecifierDependency._getErrors (/home/runner/work/juice-shop/juice-shop/frontend/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:88:6)

    at HarmonyImportSpecifierDependency.getErrors (/home/runner/work/juice-shop/juice-shop/frontend/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)

    at Compilation.reportDependencyErrorsAndWarnings (/home/runner/work/juice-shop/juice-shop/frontend/node_modules/webpack/lib/Compilation.js:1463:22)

    at /home/runner/work/juice-shop/juice-shop/frontend/node_modules/webpack/lib/Compilation.js:1258:10

    at _next0 (eval at create (/home/runner/work/juice-shop/juice-shop/frontend/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:43:1)

    at eval (eval at create (/home/runner/work/juice-shop/juice-shop/frontend/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:57:1)

    at runMicrotasks (<anonymous>)

    at processTicksAndRejections (node:internal/process/task_queues:96:5)

 @ ./node_modules/ngx-clipboard/fesm2015/ngx-clipboard.js

 @ ./src/app/app.module.ts

 @ ./src/main.ts

 @ multi ./src/main.ts

How Would The Problem Be Solved?

Here are some solutions for you. Take a look and choose the right solution.

Method 1:

The Best Solution is to update ngx-window-token to the most recent version. All you have to do is update it to the most recent version. Include this line in your frontend/package.json.

"ngx-window-token": "^5.0.0"

Rebuild the project now, and your error should be resolved.

Method 2:

Making changes to the vue.config.js file with the webpack rule:

// vue.config.js
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
}
]
}
}
}

Method 3:

For error cases like this, The solution is to ensure that you have the webpack.config.js file located in the root directory of your project that is similar to this:

const config = {
mode: 'production', // "production" | "development" | "none"
resolve: {
extensions: ['*', '.mjs', '.js', '.json']
},
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
}
]
}
}

module.exports = config

Conclusion

Angular is considered an open-source (open source) or free framework dedicated to web design work. This tool has been in development since 2009 and is maintained by Google. In addition, it is widely used to build a Single Page Application project.

You receive the error “ERROR in ./node_modules/ngx-window-token/fesm2015/ngx-window-token.mjs. Can’t import the named export ‘InjectionToken’ from non EcmaScript module” cannot be imported someday.

We are confident that our solution will assist you in completing your assignment as soon as possible. If you have any other ideas for solving this problem, please share them in the Chat Box. We will, without a doubt, respond as soon as possible.