Upgrade to RN 0.49 - bundling failed: Error: require() must have a single string literal argument #16216

forki · 2017-10-05T12:40:34Z

Is this a bug report?

yes

Have you read the Contributing Guidelines?

yes

Environment

react-native.cmd info
Scanning folders for symlinks in D:\code\msu.Reading\node_modules (18ms)

Environment:
OS: Windows 10
Node: 7.0.0
Yarn: 1.0.2
npm: 3.10.9
Watchman: Not Found

Steps to Reproduce

having production app in RN 0.48
upgrade to RN 0.49 and react 16.0.0-beta.5

react-native run-android:

Expected Behavior

Normal app start

Actual Behavior

error: bundling failed: Error: require() must have a single string literal argument
    at pushDependency (D:\code\msu.Reading\node_modules\react-native\node_modules\metro-bundler\src\JSTransformer\worker\extract-dependencies.js:39:13)
    at CallExpression (D:\code\msu.Reading\node_modules\react-native\node_modules\metro-bundler\src\JSTransformer\worker\extract-dependencies.js:50:9)
    at NodePath._call (D:\code\msu.Reading\node_modules\babel-traverse\lib\path\context.js:76:18)
    at NodePath.call (D:\code\msu.Reading\node_modules\babel-traverse\lib\path\context.js:48:17)
    at NodePath.visit (D:\code\msu.Reading\node_modules\babel-traverse\lib\path\context.js:105:12)
    at TraversalContext.visitQueue (D:\code\msu.Reading\node_modules\babel-traverse\lib\context.js:150:16)
    at TraversalContext.visitMultiple (D:\code\msu.Reading\node_modules\babel-traverse\lib\context.js:103:17)
    at TraversalContext.visit (D:\code\msu.Reading\node_modules\babel-traverse\lib\context.js:190:19)
    at Function.traverse.node (D:\code\msu.Reading\node_modules\babel-traverse\lib\index.js:114:17)

react-native-modal-datetime-picker@^4.11.0:
  version "4.11.0"
  resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-4.11.0.tgz#bd2eb3a21cda584c6a018b11f6aed4bf4d020aca"
  dependencies:
    moment "^2.18.1"
    prop-types "15.5.10"
    react-native-modal "3.1.0"

@jeremistadler so what should I do?

24ark · 2017-10-05T13:42:55Z

@forki Try moment:"git+https://github.com/tqc/moment.git#no-dynamic-import"

forki · 2017-10-05T14:00:10Z

I added the following to package.json

"dependencies": {
  "buffer": "^5.0.7",
  "core-js": "^2.5.1",
  "react": "16.0.0-beta.5",
  "react-native": "0.49.1",
  "react-native-modal-datetime-picker": "^4.11.0",
  "react-native-image-picker": "0.26.7",
  "react-native-image-resizer": "1.0.0",
  "react-native-camera": "0.10.0",
  "moment": "git+https://github.com/tqc/moment.git#no-dynamic-import",
  "react-native-signature-view": "https://github.com/forki/react-native-signature-view.git#patch-1"
},

but now yarn gives me two entries for moment:

moment@^2.18.1:
  version "2.18.1"
  resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"

"moment@git+https://github.com/tqc/moment.git#no-dynamic-import":
  version "2.18.1"
  resolved "git+https://github.com/tqc/moment.git#7fb40264e87ff7c8d167c6ccda9aecac70516302"

that doesn't seem right and also doesn't fix it

binchik · 2017-10-05T15:30:47Z

I'm having the same issue with moment. I use react-native-datepicker, which uses moment as its subdependency. Is there a way I can point the react-native-datepicker's moment to the "git+https://github.com/tqc/moment.git#no-dynamic-import"?

albinekb · 2017-10-05T16:01:18Z

@binchik I think you need to fork react-native-datepicker and change it there to fix it.. 😢

binchik · 2017-10-05T16:02:19Z

@albinekb Yeah just did that, thanks. Here is my fork, for anyone having the same issue. https://github.com/binchik/react-native-datepicker

fungilation · 2017-10-05T19:29:25Z

Same error reproduced. For me, I have the package moment-timezone. Was fine on RN 0.48.1.

anwarhamr · 2017-10-05T22:47:20Z

+1 this has broken so many dependencies. I'm hosed until we have a fix.

Nickersoft · 2017-10-05T22:51:16Z

@anwarhamr Same.

TGPSKI · 2017-10-05T22:55:53Z

+1

fungilation · 2017-10-05T23:05:36Z

Metro Bundler breaks again.

anwarhamr · 2017-10-05T23:06:44Z

I reverted to 48.4 and working again. I hope this is fixed soon. 💃

forki · 2017-10-06T06:52:22Z

ok is someone from RN team able to explain the strategy to fix it completely?

…ted dynamic import

willymulyana · 2017-10-06T12:28:01Z

It's so recent, and I think should be fixed asap. By upgrading to 0.49.1, on first build I got this error on load image with require(imageLocation), and second build got complain from moment.

forki · 2017-10-06T12:38:16Z

it's happening when you require an image?! wtf

/cc @alfonsogarciacaro looks like you had the right idea. unfortunately

willymulyana · 2017-10-06T12:54:52Z

yeah, basically you'll get the error if doing this against RN 0.49.1:

let packageOrImageLocation = 'path/to/the/target';
require(packageOrImageLocation); //here require not see single string literal

So it's big problem if the image comes from backend response.

kyle-ssg · 2017-10-06T13:40:09Z

Yep unfortunately moment.js has a require that isn't a string literal, will also be reverting to .48 until this gets sorted 😕

fungilation · 2017-10-06T17:25:02Z

With @willymulyana 's example. Is dynamic imports correct Javascript? If so, there's no excuse for "it not being supported" especially when it breaks popular libs like Moment.

forki · 2017-10-07T07:28:30Z

@hramos any official statement from the RN team?

albinekb · 2017-10-07T12:49:36Z

There's a lot more discussion about this here facebook/metro#65

johanschram · 2017-10-07T15:02:21Z

@binchik
I have the same issue and stupid question if there are, (i'm a beginner) but to install your fork, I have to do :
npm install --save binchik/react-native-datepicker ?
Probably not, has it doesn't work...

mrlaunch · 2017-10-08T23:41:00Z

I am facing the same issue while using react-native-gifted-chat.
Hope it will be fixed soon.

jingfreeks · 2017-10-11T06:13:23Z

nice so no need to put a comment on the require('./locale/' + name); in the \node_modules\moment.js

zuoge85 · 2017-10-11T09:49:11Z

add "resolutions": {
"moment": "2.19.0"
},
delete "react-native/metro-bundler": "0.20.0"

To solve the

thank @tonybennett

jspiers · 2017-10-11T17:37:06Z

@gurudev51
I'm having the same problem "require() must have a single literal argument" error in node_modules/moment/min/moment-with-locales.min.js

It looks like only "moment.js" was fixed in moment 2.19.0.
"min/moment-with-locales.min.js" still has a require() that RN 0.49 doesn't like.

j-mendez · 2017-10-13T13:41:49Z

upgrading to 0.49 is a pain going to wait till later versions since a handful of dependancies broke.

danieloprado · 2017-10-18T12:50:01Z

any update? moment was upgraded to 2.19 but I'm still facing this error.

How can I discover which packages causes this error?

Bundling `index.js`  [development, non-minified]  99.4% (1401/1405), failed.
error: bundling failed: Error: require() must have a single string literal argument
    at pushDependency (/home/prado/projects/fitfood-app/node_modules/metro-bundler/src/JSTransformer/worker/extract-dependencies.js:39:13)
    at CallExpression (/home/prado/projects/fitfood-app/node_modules/metro-bundler/src/JSTransformer/worker/extract-dependencies.js:50:9)
    at NodePath._call (/home/prado/projects/fitfood-app/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/home/prado/projects/fitfood-app/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/home/prado/projects/fitfood-app/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/home/prado/projects/fitfood-app/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/home/prado/projects/fitfood-app/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/home/prado/projects/fitfood-app/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (/home/prado/projects/fitfood-app/node_modules/babel-traverse/lib/index.js:114:17)

machour · 2017-10-20T12:46:07Z

Changing
import moment from 'moment/min/moment-with-locales.min';
to
import moment from 'moment/min/moment-with-locales';

seems to work for me.

zuoge85 · 2017-10-21T14:00:49Z

Suggest ignoring this version and not upgrading to 4.9.x

release There are bugs

azat-co · 2017-11-20T10:24:11Z

I have this bug in RN 0.50.3

krishnalelas · 2017-12-05T13:27:27Z

I have this bug in RN 0.50.4

trying metro-bundler 0.22.1 resolutions using yarn. but getting this exception

this._opts.getModulesRunBeforeMainModule is not a function

https://github.com/facebook/metro/issues/101

"resolutions": {
    "react-native/metro-bundler": "0.22.1",
  },

krishnalelas · 2017-12-07T11:32:55Z

Working on RN 0.51.0. Finally! 👍

joaom182 · 2018-01-02T00:29:29Z

I have same issue with <Image /> component from react-native.

Example:

import {Image} from 'react-native';
...
const imageUri = '../../../assets/images/bg.png';
...
<Image source={require(imageUri)} />

And Metro bundler throw this Error:
TransformError: require() must have a single string literal argument. (null)

araujobarret · 2018-01-19T18:09:42Z

I am on RN 0.51 even with moment 2.19.0 and the bug persists.

jpmoyn · 2018-02-09T19:28:11Z

I have exact same error as @joaom182. Dynamic import for an Image

forki · 2018-02-13T09:08:37Z

@grabbou you closed this - but it still persists in RN 0.53

kyle-ssg · 2018-02-13T10:05:12Z

@joaom182 @jpmoyn This is not a bug, dynamic image imports via require have never been supported.

See https://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources

forki · 2018-02-13T10:45:44Z

@kyle-ssg the problem is that require now only accepts string literals - not strings that have been computed. that used to work.

kyle-ssg · 2018-02-13T10:56:11Z

@forki Sorry but I'm going to have to correct you, I found out this 2-3 years ago attempting to use computed strings. This is due to the way react native packages assets and is not a require related issue. See this 3 year old doc https://github.com/facebook/react-native/blob/0.5-stable/docs/Image.md

we need to find a way to know statically which images are being used in the app. To do that, we introduced a marker on require. The only allowed way to refer to an image in the bundle is to literally write require('image!name-of-the-asset') in the source.

forki · 2018-02-13T10:57:17Z

@kyle-ssg I have code, with UI Tests, that work /shrug

kyle-ssg · 2018-02-13T11:03:48Z

For requiring images ? Well I'd love to see how you managed that 😄

j-mendez · 2018-02-14T13:11:39Z

Upgrade to 0.53.0 a couple things changed but, everything is smooth!

forki · 2018-02-14T13:18:05Z

@kyle-ssg I have a theory about why it may have worked for us. What if the image files were already bundled? Then the "static marker" would not be needed, right? Then require may have just worked as no-op and would have transported the computed file name to the image component. With the change that now require only accepts literals, this behaviour broke. Does this sound plausible?

mtrabelsi · 2018-02-16T13:53:13Z

For guys having troubles with images - to do dynamic import you need to require different images in advance and based on some conditions later you put what you want:

function Arrow(prop) {
  const imgUpDirection = <Image source={require('./triangleUp.png')} />;
  const imgDownDirection = <Image source={require('./triangleDown.png')} />;
  const imgRightDirection = <Image source={require('./triangleRight.png')} />;
  let appliedDirection = imgUpDirection; // by default it is up
  if (prop.val === 0) {
    appliedDirection = imgRightDirection;
  } else if (prop.val < 0) {
    appliedDirection = imgDownDirection;
  }
  return (
    <Text>
        {appliedDirection}
    </Text>
  );
}

then

rochapablo · 2018-04-06T15:10:01Z

Just import moment from 'moment'; worked for me.

* upgrade native native to avoid issue facebook/react-native#16216

agrosner mentioned this issue Oct 5, 2017

Dynamic require() breaks RN 49.0+ mikeerickson/validatorjs#214

Closed

fungilation mentioned this issue Oct 5, 2017

[0.49.1] Broken bundling on run-ios in simulator #16208

Closed

serratus pushed a commit to serratus/react-native-gifted-chat that referenced this issue Oct 6, 2017

Changed dependency of moment to facebook/react-native#16216 fix unwan…

737b170

…ted dynamic import

bnjm mentioned this issue Oct 19, 2017

3dio.js can't be bundled with React Native because of dynamic requires archilogic-com/3dio-js#89

Open

machour mentioned this issue Oct 20, 2017

chore: Upgrade to RN 0.49.3 gitpoint/git-point#523

Closed

ahmb84 mentioned this issue Nov 13, 2017

web3 import in react-native web3/web3.js#1022

Closed

grabbou closed this as completed Dec 19, 2017

changtimwu added a commit to changtimwu/react-native-boilerplate-mobx-state-tree-typescript that referenced this issue Apr 26, 2018

* add web3 and necessary modules for NodeJS compatibility

73d89fb

* upgrade native native to avoid issue facebook/react-native#16216

facebook locked as resolved and limited conversation to collaborators Dec 19, 2018

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Dec 19, 2018

Upgrade to RN 0.49 - bundling failed: Error: require() must have a single string literal argument #16216

Upgrade to RN 0.49 - bundling failed: Error: require() must have a single string literal argument #16216

Comments

forki commented Oct 5, 2017

Is this a bug report?

Have you read the Contributing Guidelines?

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Related

hackdie commented Oct 5, 2017

forki commented Oct 5, 2017

hackdie commented Oct 5, 2017

forki commented Oct 5, 2017

jeremistadler commented Oct 5, 2017

forki commented Oct 5, 2017

24ark commented Oct 5, 2017

forki commented Oct 5, 2017

binchik commented Oct 5, 2017

albinekb commented Oct 5, 2017 • edited Loading

binchik commented Oct 5, 2017 • edited Loading

fungilation commented Oct 5, 2017

anwarhamr commented Oct 5, 2017

Nickersoft commented Oct 5, 2017

TGPSKI commented Oct 5, 2017

fungilation commented Oct 5, 2017

anwarhamr commented Oct 5, 2017

forki commented Oct 6, 2017

willymulyana commented Oct 6, 2017

forki commented Oct 6, 2017

willymulyana commented Oct 6, 2017 • edited Loading

kyle-ssg commented Oct 6, 2017 • edited Loading

fungilation commented Oct 6, 2017

forki commented Oct 7, 2017

albinekb commented Oct 7, 2017

johanschram commented Oct 7, 2017 • edited Loading

mrlaunch commented Oct 8, 2017

jingfreeks commented Oct 11, 2017

zuoge85 commented Oct 11, 2017

jspiers commented Oct 11, 2017

j-mendez commented Oct 13, 2017

danieloprado commented Oct 18, 2017 • edited Loading

machour commented Oct 20, 2017

zuoge85 commented Oct 21, 2017 • edited Loading

azat-co commented Nov 20, 2017

krishnalelas commented Dec 5, 2017

krishnalelas commented Dec 7, 2017

joaom182 commented Jan 2, 2018

araujobarret commented Jan 19, 2018

jpmoyn commented Feb 9, 2018

forki commented Feb 13, 2018

kyle-ssg commented Feb 13, 2018 • edited Loading

forki commented Feb 13, 2018 • edited Loading

kyle-ssg commented Feb 13, 2018 • edited Loading

forki commented Feb 13, 2018

kyle-ssg commented Feb 13, 2018

j-mendez commented Feb 14, 2018

forki commented Feb 14, 2018

mtrabelsi commented Feb 16, 2018

rochapablo commented Apr 6, 2018

albinekb commented Oct 5, 2017 •

edited

Loading

binchik commented Oct 5, 2017 •

edited

Loading

willymulyana commented Oct 6, 2017 •

edited

Loading

kyle-ssg commented Oct 6, 2017 •

edited

Loading

johanschram commented Oct 7, 2017 •

edited

Loading

danieloprado commented Oct 18, 2017 •

edited

Loading

zuoge85 commented Oct 21, 2017 •

edited

Loading

kyle-ssg commented Feb 13, 2018 •

edited

Loading

forki commented Feb 13, 2018 •

edited

Loading

kyle-ssg commented Feb 13, 2018 •

edited

Loading