SyntaxError: Strict mode does not allow function declarations in a lexically nested statement on a newly created app

[lednhatkhanh]

It worked untill yesterday

I tried all these things: Remove nodejs, reinstall react-native-cli, run npm start -- --reset-cache. wipe my android emulator data.

I asked the question on stackoverflow but it's look like that no one have interested in it...

This's really annoying, I can see that someone also has the same problem with me.

Windows 10 64bit.
Latest react-native-cli.
Newly created app without any modification.
Nodejs 7.2.1

npm-debug

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\lednh\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start',
1 verbose cli   '--',
1 verbose cli   '--reset-cache' ]
2 info using npm@4.0.5
3 info using node@v7.2.1
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle ReactTodosApp@0.0.1~prestart: ReactTodosApp@0.0.1
6 silly lifecycle ReactTodosApp@0.0.1~prestart: no script for prestart, continuing
7 info lifecycle ReactTodosApp@0.0.1~start: ReactTodosApp@0.0.1
8 verbose lifecycle ReactTodosApp@0.0.1~start: unsafe-perm in lifecycle true
9 verbose lifecycle ReactTodosApp@0.0.1~start: PATH: C:\Users\lednh\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;C:\Users\lednh\Documents\react-native\ReactTodosApp\node_modules\.bin;C:\flow;c:\program files (x86)\graphicsmagick-1.3.25-q16;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Program Files\Java\jdk1.8.0_112\bin;C:\Users\lednh\AppData\Local\Android\sdk\platform-tools;C:\Users\lednh\AppData\Local\Android\sdk\tools;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Python27\python.exe;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\;C:\Program Files\Git\cmd;C:\Program Files (x86)\Yarn\bin;C:\xampp\php;C:\ProgramData\ComposerSetup\bin;C:\Program Files\dotnet\;C:\Program Files\Microsoft DNX\Dnvm\;C:\Program Files\nodejs\;C:\Program Files\MongoDB\Server\3.4\bin;C:\Users\lednh\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\lednh\AppData\Local\.meteor\;C:\Python27\python.exe;C:\Users\lednh\AppData\Local\Yarn\.bin;C:\Users\lednh\AppData\Roaming\Composer\vendor\bin;C:\Users\lednh\AppData\Roaming\npm
10 verbose lifecycle ReactTodosApp@0.0.1~start: CWD: C:\Users\lednh\Documents\react-native\ReactTodosApp
11 silly lifecycle ReactTodosApp@0.0.1~start: Args: [ '/d /s /c',
11 silly lifecycle   'node node_modules/react-native/local-cli/cli.js start "--reset-cache"' ]
12 silly lifecycle ReactTodosApp@0.0.1~start: Returned: code: 3221225786  signal: null
13 info lifecycle ReactTodosApp@0.0.1~start: Failed to exec start script
14 verbose stack Error: ReactTodosApp@0.0.1 start: `node node_modules/react-native/local-cli/cli.js start "--reset-cache"`
14 verbose stack Exit status 3221225786
14 verbose stack     at EventEmitter.<anonymous> (C:\Users\lednh\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Users\lednh\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:885:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid ReactTodosApp@0.0.1
16 verbose cwd C:\Users\lednh\Documents\react-native\ReactTodosApp
17 error Windows_NT 10.0.14393
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\lednh\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start" "--" "--reset-cache"
19 error node v7.2.1
20 error npm  v4.0.5
21 error code ELIFECYCLE
22 error ReactTodosApp@0.0.1 start: `node node_modules/react-native/local-cli/cli.js start "--reset-cache"`
22 error Exit status 3221225786
23 error Failed at the ReactTodosApp@0.0.1 start script 'node node_modules/react-native/local-cli/cli.js start "--reset-cache"'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the ReactTodosApp package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     node node_modules/react-native/local-cli/cli.js start "--reset-cache"
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs ReactTodosApp
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls ReactTodosApp
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

After a while searching on google, I can see that many people are facing this problems and there are no proper fix for this...

[dawidcxx]

same here, worked yesterday, started a new project this morning and got this very same error.

[lednhatkhanh]

If you make a search, you can see that many many people have the exact same problem and many of they change the pc, or reinstall their OS to make rn work again.

[suevalov]

I see the same and only for Android version. When debug is enabled everything works.

I've tried to understand the cause of the problem, jumping from commit to commit back in history and it looks like the reason of problem is the latest release of babel. https://github.com/babel/babel/releases/tag/v6.20.0

With babel 6.18.0 in yarn.lock file everything is okay. When I remove yarn.lock and install it again one of sub-dependencies fetches the latest version of babel and the problem appears.

[lednhatkhanh]

@suevalov Can you please tell me how to lock the babel version to 6.18? Thank you.

[karpoff]

I've found how to fix it

open node_modules\react-native\Libraries\Core\InitializeCore.js line 112
change function handleError(e, isFatal) to var handleError = function(e, isFatal)
then do npm start -- --reset-cache

hope that it will be fixed soon
I have created pull request for that
#11390

and for me it works without any error if remote debugging is enabled

[raitucarp]

is this issue still happening right now?

[rogvold]

@karpoff your solution works for me too. Thanks! Hope it will be fixed soon

[lohithananda]

I am new to react native but i am getting the red screen with syntaxError:SyntaxError: Strict mode does not allow function declarations in a lexically nested statement. any one please help.

@karpoff how we can enable remote debugging for android device

[lednhatkhanh]

@lohithananda On the android emulator, press Ctrl+M to open the dev menu, and then choose start Rote JS Debugging, it will open a new tab in chrome, keep it open.

[lohithananda]

@lednhatkhanh i am working on the real android device

[karpoff]

@lohithananda enabling dev menu on real device is performed by shaking phone in your hand. on some devices soft menu button is available (it looks like hamburger button on my phone)

[ColCh]

You can revert update to RN v0.39 also ... v0.38 works nice :)

[lohithananda]

Thank u soo much:)@ColCh

[smhatre59]

Issue exists on react native v0.39.1
Solution suggested by @karpoff works
Thank you so much

[bust3rkika]

I've been running a day running my first application and I can not believe the mistake was this ...

It works for me too...

Thanks @karpoff

[gabrielgomesferraz]

Thank u soo much:)@ColCh

[EQuimper]

@karpoff Thank you :)

[pratik151192]

@karpoff Hi, I'm having trouble locating the file. I do not have the Libraries folder at all under ../npm/node-modules/react-native-cli.....there's another node-modules folder in it which doesn't have the Libraries folder either

[EQuimper]

@pratik151192 this is not in the react-native-cli this is under the node_modules/react-native/ inside you project

[pratik151192]

Argh! My bad! Thanks @EQuimper

[arv]

The reason this fails on Android is because RN uses an ancient version of JSC which does not support lexical function declarations.

There is a babel plugin that fixes this (since updating JSC is a big project #10245)

https://babeljs.io/docs/plugins/transform-es2015-block-scoping/

Can we add this plugin to the current babel preset?

[CyberNika]

@arv While I add babel-plugin-transform-es2015-block-scoping like this:

{
  "presets": ["react-native"],
  "plugins": ["transform-es2015-block-scoping"]
}

Issue still exists

[raitucarp]

Please fix this issue and update react @facebook-github-bot

[bozzmob]

Hope this gets merged soon. Lot of applications are failing after update.

[snsekar]

+1

[d0ptnow]

+1

[cyclops24]

I also have same problem. Did it fixed?

[mattisx]

+1

[dennisfleischmann]

+1 "react-native": "0.38" works fine

[huhanghao]

my react-native version is "0.31.0"。set emulator dubug js remote works,but my emulator runs slowly.I'm finding another way to save it. God bless me.

[huhanghao]

thx to @niranjan-b-prajapati ,I change my react version to v15.4.0 , my react-native to 0.41.2. It works to me

[cubbuk]

Had the same exact issue out of blue sky with RN 0.31 @arsenslyusarchuk' suggestion fixed it for me, have no idea why it has started, it was working fine

[dmueller39]

For the lazy:

# formatted for OSX: http://stackoverflow.com/questions/19456518/invalid-command-code-despite-escaping-periods-using-sed
sed -i '' -e 's/function normalizePrefix(moduleName: string)/const normalizePrefix = function(moduleName: string)/g' ./node_modules/react-native/Libraries/BatchedBridge/BatchedBridgedModules/NativeModules.js

sed -i '' -e 's/function normalizePrefix(moduleName: string)/const normalizePrefix = function(moduleName: string)/g' ./node_modules/react-native/Libraries/Utilities/UIManager.js

sed -i '' -e 's/function handleError(e, isFatal)/var handleError = function(e, isFatal)/g' ./node_modules/react-native/Libraries/JavaScriptAppEngine/Initialization/InitializeJavaScriptAppEngine.js

# check that it worked
grep normalize ./node_modules/react-native/Libraries/BatchedBridge/BatchedBridgedModules/NativeModules.js

grep normalize ./node_modules/react-native/Libraries/Utilities/UIManager.js

grep handleError ./node_modules/react-native/Libraries/JavaScriptAppEngine/Initialization/InitializeJavaScriptAppEngine.js

[WKingIce]

@dmueller39 it works, do u know what caused it?

[Glaucoweb]

This is problem in a Network! Active mode Remote JS Debuggin in APP!
It worked here!

[werlleydev]

Just activate a JS Minify option in the Emulator Dev Settings

In Emulator: Menu > Dev Settings > JS Minify ☑(active)

Here it worked only with this, I hope it has helped;)

[Youngdi]

Hey, guys, I found the same issue on RN 45.1 install on ios 9.3. But it works fine on ios 10.3
If there has anyone get into this problem?

[TheCodeDestroyer]

Same happens in v0.46.1

[developer239]

Fuck my life

[jeremyrempel]

This is occurring in 0.46.4.

07-31 00:07:35.786 4831-5376/com.nycevents E/ReactNativeJNI: Got JS Exception: SyntaxError: Strict mode does not allow function declarations in a lexically nested statement. (http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:1583) 07-31 00:07:35.786 4831-5376/com.nycevents E/unknown:React: Exception in native call from JS com.facebook.react.devsupport.JSException: SyntaxError: Strict mode does not allow function declarations in a lexically nested statement. (http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:1583) at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method) at android.os.Handler.handleCallback(Handler.java:739) at android.os.Handler.dispatchMessage(Handler.java:95) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31) at android.os.Looper.loop(Looper.java:148) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:194) at java.lang.Thread.run(Thread.java:818) Caused by: com.facebook.jni.CppException: SyntaxError: Strict mode does not allow function declarations in a lexically nested statement. (http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:1583) at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)  at android.os.Handler.handleCallback(Handler.java:739)  at android.os.Handler.dispatchMessage(Handler.java:95)  at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)  at android.os.Looper.loop(Looper.java:148)  at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:194)  at java.lang.Thread.run(Thread.java:818)  07-31 00:07:35.788 4831-5376/com.nycevents E/unknown:React: Exception in native call java.lang.RuntimeException: Error calling AppRegistry.runApplication at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method) at android.os.Handler.handleCallback(Handler.java:739) at android.os.Handler.dispatchMessage(Handler.java:95) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31) at android.os.Looper.loop(Looper.java:148) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:194) at java.lang.Thread.run(Thread.java:818) Caused by: com.facebook.jni.CppException: Could not get BatchedBridge, make sure your bundle is packaged correctly at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)  at android.os.Handler.handleCallback(Handler.java:739)  at android.os.Handler.dispatchMessage(Handler.java:95)  at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)  at android.os.Looper.loop(Looper.java:148)  at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:194)  at java.lang.Thread.run(Thread.java:818) 

[brunocascio]

I'm facing the same issue @jrempel1. Any fix?

NOTE: This problem occurs just in Android.

I've just disabled "JS Dev Mode" and enabled "JS Minify". It seems to work....

[NickAnthony]

Updated react-native to version 0.47.0 and it fixed it.

[Ashoat]

I am seeing this issue in 0.47.0 and 0.47.1 on Android. The error seems to be occurring where the function warnNoop is defined in the bundle. Here's the context in the bundle file:

'use strict';
if (process.env.NODE_ENV !== "production") {
  'use strict';
  ...
  function warnNoop(publicInstance, callerName) {
    {
      var constructor = publicInstance.constructor;
      warning(false, '%s(...): Can only update a mounted or mounting component. ' + 'This usually means you called %s() on an unmounted component. ' + 'This is a no-op.\n\nPlease check the code for the %s component.', callerName, callerName, constructor && (constructor.displayName || constructor.name) || 'ReactClass');
    }
  }

This part of the bundle seems to come from this React file. It looks like Babel is inserting the first 'use strict';, which is causing the problem. The second one comes from React, and actually doesn't cause problems since it's in the same lexical scope as the function declaration.

I'm not really sure how to fix this cleanly. I'm not sure how the module got wrapped in the conditional, and whether the right solution is to update the code generating the conditional, or to change the function declaration to a lambda in React.

The suggestion above of turning on minification seems pretty hacky, especially since it will pop up an error unless you also disable debug mode (which is annoying for me since my code looks at __DEV__ to decide server endpoints, among other things).

I found this StackOverflow question with suggestions on how to stop Babel from injecting the use strict. You can define your preset yourself, and explicitly turn it off, but this means forking from the current version of the react-native Babel preset (and having to sync any updates yourself).

I ended up settling on babel-plugin-transform-remove-strict-mode as a solution, which basically just strips the strict mode. Pretty hacky, but it gets rid of the problem with minimal fuss.

[jeremyrempel]

I was able to resolve with:

-    "react": "^16.0.0-beta.1",
+    "react": "16.0.0-alpha.12",

[wootwoot1234]

The below combo seems to fix the issue:

"react": "^16.0.0-alpha.12",
"react-native": "^0.47.0",

or

"react": "^16.0.0-alpha.12",
"react-native": "^0.47.1",

[jorge8989]

hey @arsenslyusarchuk thanks a lot! your hack saved my day. Can you explain how did you come to that solution?

[chishui]

Same failure on ios8 with combination:

"react": "16.0.0-alpha.6",
"react-native": "0.44.2",

Any solution for this?

[Macstyg]

Same for the

"react": "16.0.0-beta.5",
"react-native": "0.49.3",

after upgrade from the 46.3 version.

[marcianoviereck]

I got it working by using this plugin:

https://www.npmjs.com/package/babel-plugin-transform-strict-mode

For me, the issue was that 'use strict' was not enabled by babel (suddenly).
So I used the plugin and modified my .babelrc to set the "strict" to false, then remade the bundle for android, 'react-native run-android' and restarted the emulator and then it worked again!

[lotosbin]

"react": "15.3.1",
"react-native": "^0.34.1",
in node_modules/react-native/Libraries/Utilities/UIManager.js
remove 'use strict';

add gulp task

gulp.task('fix', () =>
    gulp.src('node_modules/react-native/Libraries/Utilities/UIManager.js')
        .pipe(replace(/\'use\ strict\'\;/g, ''))
        .pipe(gulp.dest('node_modules/react-native/Libraries/Utilities/')));

and postinstall in package.json 's scripts

  "scripts":{
    postinstall: "gulp fix",
    ...
  }

[flavio-dev]

Hello:
"react": "16.2.0"
"react-native": "0.52.0"

with a .babelrc using that plugin you mentioned @marcianoviereck :

  "presets": [
    "babel-preset-react-native-stage-0/decorator-support"
  ],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source",
        ["transform-strict-mode", {
          "strict": false
        }]
      ]
    }
  },
  "plugins": [
    ["transform-strict-mode", {
      "strict": false
    }]
  ]
}

and I have the problem when Remote Debug JS is off. Works ok when Remote JS is on.

Anyone else?

Thank you!

[Ciberusps]

For all who want to solve problem.

Mb u want to add babel plugin which add "use strict" to all files just delete it.

1. Delete it from .babelrc
2. npm start -- --reset-cache
   All works.