babel7 config for newer node targets fails on `import` statements

Question

When building my node api with webpack and babel and node v12.13, I'm getting this error:

Module build failed (from /../node_modules/babel-loader/lib/index.js):TypeError: /../src/handler.js:
Property name expected type of string but got null

This seems to be related to ES6 import statements in the source files.

Below is the config I have ended up with. Based on this, the only thing that makes it work is setting { targets: { node: 6 }} but I need to set target to v12.

I haven't found a relevant discussion. What could be the reason for this issue? This is a package inside a yarn workspace , but I think this shouldn't matter.

.babelrc: (located in api package root, same result with a .babelrc.js or babel.config.json )

  comments: false,
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current'
        }
      }
    ]
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-transform-regenerator',
    '@babel/plugin-transform-modules-commonjs',
    '@babel/plugin-proposal-object-rest-spread',
    'source-map-support'
  ]

webpack.config.js:

const path = require('path')
const nodeExternals = require('webpack-node-externals')
const slsw = require('serverless-webpack')
const webpack = require('webpack')

module.exports = {
  entry: slsw.lib.entries,
  target: 'node',
  mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
  optimization: {
    minimize: false
  },
  performance: {
    hints: false
  },
  devtool: slsw.lib.webpack.isLocal ? 'eval-source-map' : 'none',
  externals: [
    nodeExternals({ whitelist: ['workspace-package-b'] }),
    nodeExternals({
      modulesDir: path.resolve(__dirname, '../../node_modules'),
      whitelist: ['workspace-package-b']
    })
  ],
  module: {
    rules: [
      {
        test: /\.graphql$/,
        loader: 'graphql-tag/loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['imports-loader?graphql', 'babel-loader']
      }
    ]
  },
  output: {
    libraryTarget: 'commonjs2',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js',
    sourceMapFilename: '[file].map'
  },
  plugins: [new webpack.DefinePlugin({ 'global.GENTLY': false })]
}

Relevant package.json:

(dependencies)
"babel-runtime": "^6.26.0",
"core-js": "^3.6.4",
(devDependencies)
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-object-rest-spread": "^7.4.4",
"@babel/plugin-transform-modules-commonjs": "^7.9.0",
"@babel/plugin-transform-regenerator": "^7.8.7",
"@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"babel-jest": "24.9.0",
"babel-loader": "8.1.0",
"babel-plugin-source-map-support": "^2.0.1",
"jest": "24.9.0",
"webpack": "4.19.1",
"webpack-node-externals": "^1.7.2"

Answer 1

that form of .babelrc config file is deprecated, instead of that use the one babeljs recommends babel.config.js , with this "form" if u wanna call it like that, there is one cool feature. you get a param that has quite a few tricks you can use.

... BTW you are missing @babel/cli, @babel/runtime @babel/core, babel-core@7.0.0-bridge.0

    "use strict";

    module.exports = function (api) {
      const {NODE_ENV} = process.env;

      api.cache(()=>NODE_ENV)
      api.env()

      if (NODE_ENV === "development") {
         api.async();
      }

      return {
    plugins: [],
    presets: []
      }
    }

Answer 2

It turns out the gist is this:

I had initially added these plugins because jest complained about seeing an import .

    '@babel/plugin-transform-runtime',
    '@babel/plugin-transform-regenerator',
    '@babel/plugin-transform-modules-commonjs'

But then I realized that this now broke my normal webpack build.

The two issues related to this seem to be:

• how webpack relates to jest :

webpack 2 offers native support for ES modules. However, Jest runs in Node, * and thus requires ES modules to be transpiled to CommonJS modules.

• the breaking upgrade of jest to v24 which stopped injecting regenerator-runtime (and babels preset-env assuming it's there)

The following .babelrc.js resolves this issue for me:

/*
 * webpack 2 offers native support for ES modules. However, Jest runs in Node,
 * and thus requires ES modules to be transpiled to CommonJS modules.
 *
 * Reads:
 * https://jestjs.io/docs/en/webpack
 * https://github.com/facebook/jest/issues/6229
 *
 */
const configByEnv = isTest => {
  // https://babeljs.io/docs/en/babel-preset-env#targets
  // "Sidenote, if no targets are specified, @babel/preset-env will transform
  // all ECMAScript 2015+ code by default."
  const targets = isTest ? {} : { node: 'current' }

  const addPlugins = isTest
    ? [
        '@babel/plugin-transform-runtime',
        '@babel/plugin-transform-regenerator',
        '@babel/plugin-transform-modules-commonjs'
      ]
    : []

  return {
    comments: false,
    presets: [['@babel/preset-env', { targets }]],
    plugins: [
      ...addPlugins,
      '@babel/plugin-proposal-object-rest-spread',
      'source-map-support'
    ]
  }
}

module.exports = api => {
  const isTest = api.env('test')

  return configByEnv(isTest)
}