SyntaxError: Strict mode does not allow function declarations in a lexically nested statement on a newly created app
lednhatkhanh opened this issue · comments
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...
same here, worked yesterday, started a new project this morning and got this very same error.
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.
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.
@suevalov Can you please tell me how to lock the babel version to 6.18? Thank you.
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
is this issue still happening right now?
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
@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.
@lednhatkhanh i am working on the real android device
@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)
You can revert update to RN v0.39 also ... v0.38 works nice :)
Thank u soo much:)@ColCh
Issue exists on react native v0.39.1
Solution suggested by @karpoff works
Thank you so much
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
Thank u soo much:)@ColCh
@karpoff Thank you :)
@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
@pratik151192 this is not in the react-native-cli this is under the node_modules/react-native/ inside you project
Argh! My bad! Thanks @EQuimper
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?
@arv While I add babel-plugin-transform-es2015-block-scoping like this:
{
"presets": ["react-native"],
"plugins": ["transform-es2015-block-scoping"]
}Issue still exists
Please fix this issue and update react @facebook-github-bot
Hope this gets merged soon. Lot of applications are failing after update.
+1
+1
I also have same problem. Did it fixed?
+1
+1 "react-native": "0.38" works fine
@karpoff work it for me too, thank you.
The same issue.
I solved it by downgrading to react-native 0.38.
Thanks @ColCh
#11390 is merged to master
so issue will be fixed in 0.40
Shipped to 0.39.2.
@grabbou So, when 0.39.2 will be available in NPM registry?
Works fine on with react-native version 0.39.2.
Just wanna say thanks to @karpoff for the work around! Worked!
Thank you so much @karpoff ! Why was it happening, just out of curiosity?
@cavilaho have no idea :)
ColCh has guessed that it probably caused by npm cache - different babel versions are used
you can see his comment in pull request #11390
@karpoff On my way. Thanks again!
@karpoff Works like charm! Thanks
This bug has been fixed. If you react-native init a new project now, you will see that this code/bug has been changed.
@TannerPlauche What's the process for fixing an existing project?
Doing a react-native upgrade doesn't do it.
I think you might have to do npm upgrade, but that would upgrade all of your node modules, not just react native. Otherwise I would just do Karpoff's solution. It's the 5th response from the top.
Edit According to the docs https://facebook.github.io/react-native/releases/0.28/docs/upgrading.html react-native upgrade should work. I don't know why it wouldn't when you ran it.
🥇 Fixed on React Native 0.40.0
I have an app which till yesterday was working properly and i have to implement new plugin so i switched to different branch on my git flow and installed that plugin, but i had got to make build for client it was the urgent requirement so i switched back to develop branch and removed node_modules folder and did NPM install but after that i started getting following issue:SyntaxError: Strict mode does not allow function declarations in a lexically nested statement I checked the work around solution you provided about opening node_modules\react-native\Libraries\Core\InitializeCore.js line 112 and making required changes. but in my react-native\Libraries\ folder in node_modules i am not able to see Core folder nor am i able to find InitializeCore.js in whole react-native folder.
Following are my versions of react & react-native mentioned in package.json:
"react": "15.3.1",
"react-native": "0.34.1",
And the application has to be uploaded to play store in next 2 days. So i am not in a position to upgrade react-native version also.
Please suggest some solution.
Stuck badly.
@niranjan-b-prajapati update react and react-native to
"react": "~15.4.0",
"react-native": "^0.41.2"
Delete node-modules of your project and install npm.
For me it works.
@lednhatkhanh Thanks ! you saved my life.
I can't find node_modules\react-native\Libraries\Core\InitializeCore.js,Whta to do? @ @Taximan @
Another way to "fix" this, if you can't update to a newer version yet, is to enable JS Minify mode in Dev Settings. Works on version 0.34.0.
@vijayperlakota Thanks!But i can not find the file node_modules\react-native\Libraries\Core\InitializeCore.js
in my version of 0.34.1,so i do not konw how to fix this issue.
@quietbits Thanks,this way can fix this issue!
@LitbLeo looks like this code is in another place in 0.34.1
try to open node_modules\react-native\Libraries\JavaScriptAppEngine\Initialization\InitializeJavaScriptAppEngine.js line 120 and change function handleError(e, isFatal) to var handleError = function(e, isFatal)
then do npm start -- --reset-cache
@karpoff I did that still I'm getting the same error
But if I run using debug js remotely it works fine.
But I had to create offline app for testing multiple devices as well as putting it in app store.
using:
"native-base": "0.5.15", "react": "15.3.1", "react-native": "0.33.1",
Me too, same error.
Nothing of the previous suggested methods work, even if i am able to execute the app if remote js debug is active
I got this problem because i started a 0.39 package server before i start the 0.41 one. Turn the 0.39 one off, then start 0.41 again. everything works fine!
@karpoff ur solution is not working mate :(
im having "react-native": "0.29.0",
For everyone who still facing this error try another workaround. Edit node_modules/react-native/Libraries/Utilities/UIManager.js file and replace:
function normalizePrefix(moduleName: string): string {
with
var normalizePrefix = function (moduleName: string): string {
This worked for me,
referencing superfe issue
Running React-native 0.35 and having same issue -- this is what helped to me
-
In node_modules/react-native/Libraries/BatchedBridge/BatchedBridgedModules/NativeModules.js
function normalizePrefix(moduleName: string) ...REPLACE WITH:
const normalizePrefix = function(moduleName: string) -
In /node_modules/react-native/Libraries/Utilities/UIManager.js:
function normalizePrefix(moduleName: string) ...REPLACE WITH:
const normalizePrefix = function(moduleName: string)
-
In /node_modules/react-native/.../InitializeJavascriptAppEngine.js:
function handleError(e, isFatal) ...REPLACE WITH:
var handleError = function(e, isFatal)
then do npm start -- --reset-cache
@arsenslyusarchuk this works for me well. I was having so much problem before.
I am using react-native 0.39, and the solution from @karpoff works for me :) #11389 (comment)
@ariona Yes, for 0.39 it works, but for 0.35 (which I'm using) there is no such file at all. If I remember correctly, it appeared in 0.36 or 0.37
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.
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
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
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
@dmueller39 it works, do u know what caused it?
This is problem in a Network! Active mode Remote JS Debuggin in APP!
It worked here!
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;)
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?
Same happens in v0.46.1
Fuck my life
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)
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....
Updated react-native to version 0.47.0 and it fixed it.
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.
I was able to resolve with:
- "react": "^16.0.0-beta.1",
+ "react": "16.0.0-alpha.12",
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",
hey @arsenslyusarchuk thanks a lot! your hack saved my day. Can you explain how did you come to that solution?
Same failure on ios8 with combination:
"react": "16.0.0-alpha.6",
"react-native": "0.44.2",
Any solution for this?
Same for the
"react": "16.0.0-beta.5",
"react-native": "0.49.3",
after upgrade from the 46.3 version.
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!
"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",
...
}
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!
For all who want to solve problem.
Mb u want to add babel plugin which add "use strict" to all files just delete it.
- Delete it from .babelrc
- npm start -- --reset-cache
All works.