New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
forki opened this Issue Oct 5, 2017 · 72 comments

Comments

Projects
None yet
@forki
Contributor

forki commented Oct 5, 2017

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

  1. having production app in RN 0.48
  2. 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)

image

Related

realm/realm-js#1342
realm/realm-js#1346

@hackdie

This comment has been minimized.

hackdie commented Oct 5, 2017

its fixed in the new version of realm ("realm": "1.13.0"). this is not reactnative issue

@forki

This comment has been minimized.

Contributor

forki commented Oct 5, 2017

I don't use realm

@hackdie

This comment has been minimized.

hackdie commented Oct 5, 2017

which lib has the problem? i had the same issue in Realm and Moment. and both i needed to find a work around for them. you might need to find the require line and fix it. :/

@forki

This comment has been minimized.

Contributor

forki commented Oct 5, 2017

the screenshot is all I'm seeing

@jeremistadler

This comment has been minimized.

Contributor

jeremistadler commented Oct 5, 2017

@forki Are you using moment js?
The bug is in the bundler: facebook/metro#65

@forki

This comment has been minimized.

Contributor

forki commented Oct 5, 2017

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

This comment has been minimized.

24ark commented Oct 5, 2017

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

@forki

This comment has been minimized.

Contributor

forki commented Oct 5, 2017

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

This comment has been minimized.

binchik commented Oct 5, 2017

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

This comment has been minimized.

albinekb commented Oct 5, 2017

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

@binchik

This comment has been minimized.

binchik commented Oct 5, 2017

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

@fungilation

This comment has been minimized.

fungilation commented Oct 5, 2017

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

@anwarhamr

This comment has been minimized.

anwarhamr commented Oct 5, 2017

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

@Nickersoft

This comment has been minimized.

Nickersoft commented Oct 5, 2017

@anwarhamr Same.

@TGPSKI

This comment has been minimized.

TGPSKI commented Oct 5, 2017

+1

@fungilation

This comment has been minimized.

fungilation commented Oct 5, 2017

Metro Bundler breaks again.

@anwarhamr

This comment has been minimized.

anwarhamr commented Oct 5, 2017

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

@forki

This comment has been minimized.

Contributor

forki commented Oct 6, 2017

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

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

@willymulyana

This comment has been minimized.

willymulyana commented Oct 6, 2017

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

This comment has been minimized.

Contributor

forki commented Oct 6, 2017

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

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

@willymulyana

This comment has been minimized.

willymulyana commented Oct 6, 2017

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

This comment has been minimized.

kyle-ssg commented Oct 6, 2017

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

@fungilation

This comment has been minimized.

fungilation commented Oct 6, 2017

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

This comment has been minimized.

Contributor

forki commented Oct 7, 2017

@hramos any official statement from the RN team?

@albinekb

This comment has been minimized.

albinekb commented Oct 7, 2017

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

@johanschram

This comment has been minimized.

johanschram commented Oct 7, 2017

@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...

RUIFERNANDE5 added a commit to RUIFERNANDE5/vCards-js that referenced this issue Oct 7, 2017

@richardgirges

This comment has been minimized.

richardgirges commented Oct 10, 2017

There appears to be an issue with metro-bundler 0.20.0 right now so a hot fix to RN is probably not a good idea until that gets figured out. If your issue is with moment specifically, the new version of moment that @tonybennett called out is probably the safest route for now.

EDIT: the issue I was talking about: facebook/metro#73

@jingfreeks

This comment has been minimized.

jingfreeks commented Oct 11, 2017

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

@zuoge85

This comment has been minimized.

zuoge85 commented Oct 11, 2017

  1. add "resolutions": {
    "moment": "2.19.0"
    },

  2. delete "react-native/metro-bundler": "0.20.0"

To solve the

thank @tonybennett

@jspiers

This comment has been minimized.

jspiers commented Oct 11, 2017

@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.

@jeffreymendez1993

This comment has been minimized.

jeffreymendez1993 commented Oct 13, 2017

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

@danieloprado

This comment has been minimized.

danieloprado commented Oct 18, 2017

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

This comment has been minimized.

machour commented Oct 20, 2017

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

This comment has been minimized.

zuoge85 commented Oct 21, 2017

Suggest ignoring this version and not upgrading to 4.9.x

release There are bugs

@azat-co

This comment has been minimized.

azat-co commented Nov 20, 2017

I have this bug in RN 0.50.3

@krishnalelas

This comment has been minimized.

krishnalelas commented Dec 5, 2017

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

This comment has been minimized.

krishnalelas commented Dec 7, 2017

Working on RN 0.51.0. Finally! 👍

@joaom182

This comment has been minimized.

joaom182 commented Jan 2, 2018

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

This comment has been minimized.

araujobarret commented Jan 19, 2018

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

@jpmoyn

This comment has been minimized.

jpmoyn commented Feb 9, 2018

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

@forki

This comment has been minimized.

Contributor

forki commented Feb 13, 2018

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

@kyle-ssg

This comment has been minimized.

kyle-ssg commented Feb 13, 2018

@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

This comment has been minimized.

Contributor

forki commented Feb 13, 2018

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

@kyle-ssg

This comment has been minimized.

kyle-ssg commented Feb 13, 2018

@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

This comment has been minimized.

Contributor

forki commented Feb 13, 2018

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

@kyle-ssg

This comment has been minimized.

kyle-ssg commented Feb 13, 2018

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

@jeffreymendez1993

This comment has been minimized.

jeffreymendez1993 commented Feb 14, 2018

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

@forki

This comment has been minimized.

Contributor

forki commented Feb 14, 2018

@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

This comment has been minimized.

mtrabelsi commented Feb 16, 2018

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

This comment has been minimized.

rochapablo commented Apr 6, 2018

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment