[Fix][Azure DevOps] React with babel - No "exports" main resolved in @babel/helper-compilation-targets/package.json

Situation

Having a react app setup with create-react-app, using babel v7.8.3 and having a CI/CD pipeline in Azure DevOps, I noticed builds failing whilst trying to run npm install.

What happened?

The standard node version in Azure DevOps was increased from v12.16.3 to v12.17.0 which resulted in the error.

Trying to locate the actual problem I stumbled upon the following issue in the babel repository:

No "exports" main resolved in @babel/helper-compilation-targets/package.json #11216

Drogglbecher posted on Mar 05, 2020

Bug Report

Current Behavior Since an update to node 13.10.1 I have a problem while building an application with babel-loader:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in node_modules/@babel/helper-compilation-targets/package.json

Expected behavior/code It should build correctly

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

• Filename: babel.config.js

const baseConfig = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry',
        corejs: 3,
      },
    ],
    '@babel/preset-react',
    '@babel/preset-flow',
    '@babel/preset-typescript',
  ],
  plugins: [
    'react-hot-loader/babel',
    'babel-plugin-styled-components',
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    '@babel/plugin-syntax-dynamic-import',
    isTesting && 'babel-plugin-dynamic-import-node-babel-7',
  ].filter(Boolean),
};

module.exports = {
  sourceType: 'unambiguous',
  ...baseConfig,
  plugins: [
    'idx',
    '@babel/plugin-syntax-import-meta',
    '@babel/plugin-proposal-json-strings',
    [
      '@babel/plugin-proposal-decorators',
      {
        legacy: true,
      },
    ],
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-throw-expressions',
    'babel-plugin-macros',
    [
      require.resolve('babel-plugin-module-resolver'),
      {
        root: ['./'],
        alias: {
          'react-router-dom': './packages/components/Router',
          '@@react-router-dom': './node_modules/react-router-dom',
        },
      },
    ],
  ],
  env: {
    test: {
      plugins: [
        ...baseConfig.plugins,
        '@babel/plugin-transform-modules-commonjs',
      ],
    },
  },
};

Environment

  System:
    OS: macOS Mojave 10.14.6
  Binaries:
    Node: 13.10.1 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.2 - /usr/local/bin/npm
  Monorepos:
    Yarn Workspaces: 1.22.0
  npmPackages:
    @babel/core: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-class-properties: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-decorators: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-export-namespace-from: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-function-sent: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-json-strings: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-numeric-separator: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-optional-chaining: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-throw-expressions: ^7.8.3 => 7.8.3
    @babel/plugin-syntax-dynamic-import: ^7.8.3 => 7.8.3
    @babel/plugin-syntax-import-meta: ^7.8.3 => 7.8.3
    @babel/preset-env: ^7.8.3 => 7.8.3
    @babel/preset-flow: ^7.8.3 => 7.8.3
    @babel/preset-react: ^7.8.3 => 7.8.3
    @babel/preset-typescript: ^7.8.3 => 7.8.3
    babel-eslint: ^10.0.3 => 10.0.3
    babel-loader: ^8.0.6 => 8.0.6
    babel-plugin-idx: ^2.4.0 => 2.4.0
    babel-plugin-lodash: ^3.3.4 => 3.3.4
    babel-plugin-macros: ^2.8.0 => 2.8.0
    babel-plugin-module-resolver: ^4.0.0 => 4.0.0
    babel-plugin-styled-components: ^1.10.7 => 1.10.7
    eslint: ^6.8.0 => 6.8.0
    jest: ^25.1.0 => 25.1.0
    webpack: ^4.41.5 => 4.41.5

Possible Solution snowpack resolved the error like this. Maybe this could work here too.

---

Edits by @jlhwung

Solution This is a regression in Node.js. If you hit this issue from search engines, please choose one of the following solutions

1. update @babel deps to v7.8.7
2. use Node < 13.9
3. wait until nodejs/node#32107 is fixed! (Probably in the next Node.js patch release).

View on GitHub

Fastest Solution

The fastest solution was to simply define the node.js version in the build pipeline.

1. Add Node.js tool installer

Before running any npm comands in your pipeline add te Node.js tool installer as a task.

2. Configure Task

In the Node.js tool installer you are able to simply set the node version to for example 12.16.3.

Using the Node.js tool installer can add up to 10 seconds to your build process depending on the used agent.