Babel loader issues with polkadotjs and create-react-app

Question

We're working to update our dApp to node 16 and update the dev config to point to the latest polkadot dev config.

We are using customize-cra to customize the babel loaders which looks partially as:

module.exports = override(
  ...addExternalBabelPlugins(
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-optional-chaining',
    ['@babel/plugin-transform-runtime', { "useESModules": false }],
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-private-methods',
    '@babel/plugin-proposal-private-property-in-object',
    '@babel/plugin-syntax-bigint',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    '@babel/plugin-syntax-top-level-await',
    'babel-plugin-styled-components',
  ),
  ...addBabelPlugins(
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-optional-chaining',
    ['@babel/plugin-transform-runtime', { "useESModules": false }],
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-private-methods',
    '@babel/plugin-proposal-private-property-in-object',
    '@babel/plugin-syntax-bigint',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    '@babel/plugin-syntax-top-level-await',
    'babel-plugin-styled-components',
  ),

We are getting issues as below:

Module parse failed: Unexpected token (6:14)
File was processed with these loaders:
 * ../../node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| export const packageInfo = {
|   name: '@polkadot/api',
>   path: import.meta && import.meta.url ? new URL('.', import.meta.url).pathname : 'auto',
|   type: 'esm',
|   version: '7.12.1'

Any ideas how to resolve this?

Answer 1

I think the issue can be solved either by using a babel transform or maybe not using the import.meta.url as can be seen in your error:

import.meta && import.meta.url ? new URL('.', import.meta.url).pathname : 'auto'`

as the starting import.meta.url returns this error.

Maybe a simpler solution would be to:

const url = new URL('.', import.meta.url);
const result = url?.pathName || 'auto';

UPDATE: Above was not finally a correct response. Here is a link with the solution