Angular 13 - Support for the experimental syntax 'importMeta' isn't currently enabled

Question

After upgrading to angular 13 I'm having this issue. I am trying to create a worker like this:

new Worker(new URL('../path/to/worker', import.meta.url), {type: 'module'})

This works fine when I do " ng serve " or " ng build ". However, it does not work when I run " ng build --configuration production ". If I turn buildOptimizer and aot to false it does work but that's something I'm trying to avoid.

It looks like this has everything to to with the import.meta.url . It doesn't make much sense since this is an established standard.

So, when I run "ng build --configuration production" It throws the error:

Error: Module build failed (from./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):

SyntaxError: Support for the experimental syntax 'importMeta' isn't currently enabled (18:102):

Add @babel/plugin-syntax-import-meta ( https://git.io/vbKK6 ) to the 'plugins' section of your Babel config to enable parsing.

This is weird since I'm not using babel, at least directly. Maybe it's Angular's buildOptimizer that uses babel, but if it is, I cannot change it's configs.

Is there any fix or workaround to this issue?

Answer 1

I had the same issue after upgrading to Angular 12 from 9. I managed to fix the issue by removing the node_modules folder and the package-lock.json file and running npm install.

There must have been some conflicting packages or something but doing the above fixed it.