Babel 7: Uncaught ReferenceError after transpiling a module

Question

My Chrome extension project uses the Chrome-Promise module from https://github.com/tfoxy/chrome-promise/blob/master/chrome-promise.js in order to promisify Chrome API's callback-style functions.

Transpiling the project with Babel 6 has always worked fine. Recently I moved to Babel 7. Since then, when I allow the chrome-promise.js file to be transpiled by Babel, this results in a "Uncaught ReferenceError: ChromePromise is not defined" error when running the extension. The program works well when I leave chrome-promise.js as is, untranspiled.

Here is an excerpt of my webpack config js file:

module.exports = {
  mode: 'production',
  entry: {
    cs: ['./build/cs.js'],
    bg: ['./build/bg.js'],
    popup: ['./build/popup.js'],
    chromepromise: ['./build/chromepromise.js']
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].js'
  },
  module: {
    rules: [{ 
      test: /\.js$/, 
      exclude: [/node_modules/],
      loader: "babel-loader" 
    }]
  },

and one of my package.json with the Babel settings:

{
  "name": "Test_CRX",
  "version": "1.0.0",
  "main": "cs.js",
  "scripts": {
    "build": "node build",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@babel/runtime": "^7.1.2",
    "archiver": "^3.0.0",
    "babel-polyfill": "^6.26.0",
    "babel-regenerator-runtime": "^6.5.0",
    "chrome-promise": "^3.0.1",
    "terser": "^3.10.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-decorators": "^7.1.2",
    "@babel/plugin-proposal-function-bind": "^7.0.0",
    "@babel/plugin-transform-modules-umd": "^7.1.0",
    "@babel/plugin-transform-regenerator": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-add-module-exports": "^1.0.0",
    "shelljs": "^0.8.1",
    "terser-webpack-plugin": "^1.1.0",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  },
  "babel": {
    "presets": [
      [
        "@babel/env",
        {
          "targets": {
            "chrome": 60
          }
        }
      ],
      "@babel/react"
    ],
    "plugins": [
    ]
  }
}

Note: although I use Terser to minify the JS code, the error still occurs when I deactivate it.

EDIT Check out the minimal repo I made at github.com/Steve06/chrome-promise-babel-7-issue-repo

Answer 1

@babel/env preset transpiles your files to commonjs by default, which requires the transpiled files to be included by require or import. To make this compatible with your Chrome extension, you need to transpile the files as umd module. Put this in your package.json:

"presets": [
  [
    "@babel/env",
    {
      "targets": {
        "chrome": 60,
        "modules": "umd"
      }
    }
  ]
],

You should also know that source/chrome-promise.js is already a umd module, so it actually does not need to be transpiled.