react-native: [0.46] Packager fails: Unknown plugin "transform-runtime"

Create a fresh app with: react-native init rn46 --version "0.46.0-rc.2", then CMD+R in Xcode which attempts to fire up the packager, but immediately bombs with:

ReferenceError: Unknown plugin "transform-runtime" specified in "/rn46/node_modules/regenerator-transform/package.json" at 0, attempted to resolve relative to "/rn46/node_modules/regenerator-transform" (While processing preset: "/rn46/node_modules/babel-preset-react-native/index.js")
    at /rn46/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (native)
    at Function.normalisePlugins (/rn46/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/rn46/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (/rn46/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at compile (/rn46/node_modules/babel-register/lib/node.js:103:45)
    at loader (/rn46/node_modules/babel-register/lib/node.js:144:14)
    at Object.require.extensions.(anonymous function) [as .js] (/rn46/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)

Since it’s a reference error, I add the dependency npm i babel-plugin-transform-runtime --save-dev and rerun, which now bombs with:

Error: Couldn't find preset "env" relative to directory "/rn46/node_modules/regenerator-transform" (While processing preset: "/rn46/node_modules/babel-preset-react-native/index.js")
    at /rn46/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (native)
    at OptionManager.resolvePresets (/rn46/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/rn46/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/rn46/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/rn46/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at compile (/rn46/node_modules/babel-register/lib/node.js:103:45)
    at loader (/rn46/node_modules/babel-register/lib/node.js:144:14)
    at Object.require.extensions.(anonymous function) [as .js] (/rn46/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:488:32)

Okay, let’s now try npm i --save-dev babel-preset-env, which bombs with:

Error: Options {"loose":true} passed to /rn46/node_modules/babel-preset-env/lib/index.js which does not accept options. (While processing preset: "/rn46/node_modules/babel-preset-env/lib/index.js") (While processing preset: "/rn46/node_modules/babel-preset-env/lib/index.js") (While processing preset: "/rn46/node_modules/babel-preset-react-native/index.js")
    at /rn46/node_modules/babel-core/lib/transformation/file/options/option-manager.js:314:17
    at Array.map (native)
    at OptionManager.resolvePresets (/rn46/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/rn46/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/rn46/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/rn46/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at compile (/rn46/node_modules/babel-register/lib/node.js:103:45)
    at loader (/rn46/node_modules/babel-register/lib/node.js:144:14)
    at Object.require.extensions.(anonymous function) [as .js] (/rn46/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:488:32)

Something has definitely gone wrong down this rabbit hole. I noticed that @davidaurelio just upgraded babel-preset-react-native with commit bc22a4d, not sure if it’s related but the update is already showing up in the initialized package.json:

	"devDependencies": {
		"babel-jest": "20.0.3",
		"babel-preset-react-native": "2.0.0",
		"jest": "20.0.4",
		"react-test-renderer": "16.0.0-alpha.12"
	}

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 10
Comments: 41 (10 by maintainers)

Commits related to this issue

Remove .babelrc to work around https://github.com/facebook/react-native/issues/14530 — committed to jevakallio/FlatUIImplementationBugRepro by jevakallio 7 years ago

Most upvoted comments

I don’t know why Facebook releases RN with bug which is so obvious. User reported this issue in rc and the bug still exists in the stable release. User even couldn’t run a react-native init and make it run straightforward. Similar packager issue was found in 0.45. So disappointing.

jp928 on Jul 6, 2017

Ok rm -rf .babelrc on the project root solved that problem for me. No idea why.

SudoPlz on Jun 20, 2017

So, the original problem “Unknown plugin “transform-runtime”” should now be fixed for v0.46 if you do a clean set-up, or if you upgrade the metro-bundler package to 0.7.8 in your repo/lockfile. I’ll wait for confirmation this is fixed for you folks as well before closing.

Creating a project from scratch with v0.46 worked for me, and the simulator loads the app correctly. For the other problems that may still happen, please open new issues 😃

jeanlauliac on Jul 7, 2017

Also getting this error in 0.46.0

Update: rm -rf .babelrc and re-running react-native run-ios fixed the issue for me

joriswa on Jul 5, 2017

I confirm fixed with yarn upgrade, and inside yarn.lock file went from version "0.7.6" to version "0.7.8", under the line metro-bundler@^0.7.4:. Thanks for the clarification!

A side issue I noticed now on React Packager’s terminal below. Does this warrant a new issue?

Loading dependency graph...jest-haste-map: @providesModule naming collision:
  Duplicate module name: base64-js
  Paths: /Users/<user>/Documents/code/<project>/node_modules/react-native/node_modules/base64-js/package.json collides with /Users/<user>/Documents/code/<project>/node_modules/react-native/node_modules/simple-plist/node_modules/base64-js/package.json

This warning is caused by a @providesModule declaration with the same name across two different files.

fungilation on Jul 7, 2017

Does it include running a react-native-git-upgrade?

I believe not. The action necessary depends on what package manager you use. For yarn, you have to upgrade the version of metro-bundler used in the lockfile. I believe yarn upgrade can be used for that. For npm 5, there should be a similar command to upgrade the locked dependencies, but I’m not familiar. For npm 4, deleting node_modules and running npm install again should do the deal, or upgrading the shrinkwrap file if any.

jeanlauliac on Jul 7, 2017

As a quick workaround, you can use haul which works just fine.

zamotany on Jul 6, 2017

Also got this error after upgrading from 0.45 to 0.46

I resolved it by deleting .babelrc and then adding babel-plugin-transform-runtime & regenerator-transform to dev dependencies.

Then running ./node_modules/react-native/scripts/packager.sh --reset-cache

cmdshepard on Jul 5, 2017

@jp928 I am really sorry for the inconvenience. The “RC” bug report somewhat got lost in my inbox full of notifications. During manual testing that I usually do (as well as testing on the CI) the bug wasn’t revealed. Sometimes not every single issue can be reproduced, but I think we did our best to fix it as soon as possible post the release.

grabbou on Jul 7, 2017

@SudoPlz because I’m using transform-decorators-legacy in my project, and I have decorators all over the place.

However just to check, I did try deleting my .babelrc just to see if it get passed the problem; it does, but unfortunately I just get slammed with Unable to resolve module 'AccessibilityInfo' that everyone is dealing with on #14209. Yes I tried:

rm -rf node_modules
rm -rf $TMPDIR/react-*
watchman watch-del-all
npm i
npm start -- --reset-cache

So gracious for what react-native and the core team, but honestly the amount of instability over the past few releases is pretty staggering – 0.44.2+, 0.45+, and 0.46 rc all have their own set of problems. We really need the bug fixes in FlatList and NativeAnimated in the past two months, but can’t get at them no matter how hard we try…

sjmueller on Jun 21, 2017