React: "'importMeta' isn't currently enabled"

[lgkonline]

Blocked: waiting for Webpack to add support for import.meta

I tried to use wc-monaco-editor on a new React project that I created with create-react-app. But I always get this error message:

./node_modules/@vanillawc/wc-monaco-editor/index.js
SyntaxError: C:\wegdamit\empty-react\node_modules\@vanillawc\wc-monaco-editor\index.js: Support for the experimental syntax 'importMeta' isn't currently enabled (9:45):

   7 | /* eslint no-undef: 0 */
   8 | 
>  9 | const monacoDir = new URL('monaco/', import.meta.url);
     |                                             ^
  10 | 
  11 | // eslint-disable-next-line
  12 | self.MonacoEnvironment = {

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

Also adding @babel/plugin-syntax-import-meta as a Babel plugin didn't work. Because it's a CRA project I couldn't edit the Babel config directly, so I followed this guide and used customize-cra and react-app-rewired to change the config: https://devinschulz.com/modify-create-react-apps-babel-configuration-without-ejecting/

[evanplaice]

Import.meta.url is necessary to load the service workers relative to the WC source.

Unfortunately, this is a Webpack issue with no fix. Here's a link to the relevant issue.

https://github.com/webpack/webpack/issues/6719

[evanplaice]

Update: The import.meta TC39 proposal has reached Stage 4 so it will officially land in ES2020. Hopefully, that means we'll see a fix in Webpack soon.