@babel/helper-compilation-targets: 'production' is not a valid target

[ucabaur]

Environment

• Node version: 14.15.0
• Yarn: 1.19.1

Description

On fresh install, yarn bootstrap commands fail on the bob build instruction
Option selected: Swift + Kotlin

$ bob build
ℹ Building target commonjs
ℹ Cleaning up previous build at lib/commonjs
ℹ Compiling 1 files in src with babel
bob build

then

Stack trace:

Error: [BABEL] /Users/me/dev/my-proj/bis/react-native-tru-sdk/src/index.tsx: @babel/helper-compilation-targets: 'production' is not a valid target
- Did you mean 'electron'? (While processing: "/Users/me/dev/my-proj/bis/react-native-tru-sdk/node_modules/@babel/preset-env/lib/index.js")
    at validateTargetNames (/Users/me/dev/my-proj/bis/react-native-tru-sdk/node_modules/@babel/helper-compilation-targets/lib/index.js:85:13)
    at getTargets (/Users/me/dev/my-proj/bis/react-native-tru-sdk/node_modules/@babel/helper-compilation-targets/lib/index.js:194:17)
    at /Users/me/dev/my-proj/bis/react-native-tru-sdk/node_modules/@babel/preset-env/lib/index.js:258:57
    at /Users/me/dev/my-proj/bis/react-native-tru-sdk/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at /Users/me/dev/my-proj/bis/react-native-tru-sdk/node_modules/@babel/core/lib/config/full.js:211:14
    at Generator.next (<anonymous>)
    at Function.<anonymous> (/Users/me/dev/my-proj/bis/react-native-tru-sdk/node_modules/@babel/core/lib/gensync-utils/async.js:26:3)
    at Generator.next (<anonymous>)
    at step (/Users/me/dev/my-proj/bis/react-native-tru-sdk/node_modules/gensync/index.js:261:32)
    at evaluateAsync (/Users/me/dev/my-proj/bis/react-native-tru-sdk/node_modules/gensync/index.js:291:5)

[cainaleaouk]

@ucabaur Changing the following in my package.json seems to fix the issue for me:

  "scripts": {
    "test": "jest",
    "typescript": "tsc --noEmit",
    "lint": "eslint \"**/*.{js,ts,tsx}\"",
    "prepare": "bob build",
    "release": "release-it",
    "example": "yarn --cwd example",
-    "pods": "cd example && pod-install --quiet",
+    "pods": "cd example/ios && pod install --silent",
    "bootstrap": "yarn example && yarn && yarn pods"
  },
  "@react-native-community/bob": {
    "source": "src",
    "output": "lib",
-    "targets": ["commonjs", "module", "typescript"]
+    "targets": [
+      ["commonjs", { "configFile": true }],
+      ["module", { "configFile": true }],
+      "typescript"
+    ]
  }

[satya164]

Can you provide a repro?

[jonrigerths2]

If anyone is also having this issue - removing browserslist from my package.json resolved the issue for me. I tried @cainaleaouk 's solution, it worked but then for some reason the module bundle stripped out all the imports (basically just duplicated the commonjs build)

[MoOx]

That's pretty weird but in my case, I was working inside a {project_root}/node_modules/react-native-bars to make a patch for a project. From here, I ran yarn and bob build.
I had to remove browserslist from my root {project_root}/package.json for the command to be ok.
Pretty weird that Babel was trying to read in a parent package.json... What a mess.

[Dwikavindra]

still having this issue on my M1 Macbook Air 2020, I don't see any browsersList in my package.json and I did change it to so

@ucabaur Changing the following in my package.json seems to fix the issue for me:

  "scripts": {
    "test": "jest",
    "typescript": "tsc --noEmit",
    "lint": "eslint \"**/*.{js,ts,tsx}\"",
    "prepare": "bob build",
    "release": "release-it",
    "example": "yarn --cwd example",
-    "pods": "cd example && pod-install --quiet",
+    "pods": "cd example/ios && pod install --silent",
    "bootstrap": "yarn example && yarn && yarn pods"
  },
  "@react-native-community/bob": {
    "source": "src",
    "output": "lib",
-    "targets": ["commonjs", "module", "typescript"]
+    "targets": [
+      ["commonjs", { "configFile": true }],
+      ["module", { "configFile": true }],
+      "typescript"
+    ]
  }

but it still doesn't work

[satya164]

Closing since this is an old issue without a way to repro.

[jonrigerths2]

Commenting in case anyone else runs into this...

The fix for me (I'll explain below) was to add this to my package.json:

"browserslist": {}

I made a comment a while back about removing browserslist from your package.json: #102 (comment)

But just today I ran into this error again, with a new project. My package.json didn't have a browserslist. So I did some digging...

The way browserslist works (and therefore the babel plugins I assume?) is that it first checks your package.json, and if it doesn't find a browserslist, it actually searches up through parent directories until it finds one: https://github.com/browserslist/browserslist#queries

In my case, I have no clue where it's getting the list from. But I'm working in a pretty large monorepo so maybe somewhere in here or in a package. But setting "browserslist": {} fixes the issue.

I still don't fully understand the issue, but I think it's something with @babel/helper-compilation-targets and nothing really related to react-native-builder-bob. I tried "browserslist": ["defaults"] which is supposed to work per the browserslist specs, but I get @babel/helper-compilation-targets: 'defaults' is not a valid target. So I'm pretty confused about what this plugin is trying to do and why. But for now this is my workaround, because I don't really need browserslist.

[cfogelklou]

OMG! @satya164 , @jonrigerths2 nailed the answer. This is a very tricky bug... and very environment dependant. I just tried this in a brand spanking new turbo module template, created from scratch, and was having this issue. Added browswerslist{} to package.json and the problem went away. So it is certainly a bug in that it fetches browserslist from ??? in an upper directory and if it doesn't like what it finds, it pukes.