Vscode-react-native: Couldn't import script, path must be string

Created on 22 Dec 2016 · 19Comments · Source: microsoft/vscode-react-native

Actual Behavior

Start debugging the app
Receive following error: [vscode-react-native] [Warning] Couldn't import script at <http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false>. Debugging won't work: Try reloading the JS from inside the app, or Reconnect the VS Code debugger: path must be a string

Expected Behavior

Start debugging the app
Works

Software versions

React-Native VS Code extension version: 0.2.4
VSCode version: 1.8.1
OS platform and version: OSX Sierra 10.12.2
NodeJS version: 7.3.0
React Native version: 0.38.1

Outputs (Include if relevant)

Output of the Debug Console (View -> Toggle Debug Console):

vscode-react-native] [Warning] Couldn't import script at <http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false>. Debugging won't work: Try reloading the JS from inside the app, or Reconnect the VS Code debugger: path must be a string

This work correctly on my windows machine, although I don't have the same nodeJS and VSCode versions. Running the command in the terminal work perfectly BTW.

Thanks

Source

sam-n-johnston

👍1

Most helpful comment

One thing you can try in the short term: Go back to ~/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/out/debugger/appWorker.js and look for the line require: function (filePath) { return scriptToRunModule.require(filePath); }, and comment it out. That will no longer expose a native node require to the app, and will avoid this specific error. However, if react-native is failing to set up its own require function, that will mean that the require will fail for another reason.

MSLaguana on 22 Dec 2016

👍2

All 19 comments

That error indicates that we encountered some error (looks like passing null or undefined to a path.foo function probably) when we attempted to fetch and execute the application script from the packager.

Do you get this error if you try and run a freshly created default react-native app?

MSLaguana on 22 Dec 2016

I have the exact same problem with a fresh project. I do react-native init AwesomeProject, then open it in VSCode, then start the debugging for android and I get the same error message. Then I run it in the terminal and it works as expected.

sam-n-johnston on 22 Dec 2016

Could you please go to ~/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/out/debugger/appWorker.js and look for the line

printDebuggingError("Couldn't import script at <" + url + ">", reason);

Just after that, add the line

log_1.Log.logWarning(reason.stack);

then try your scenario again. That should show exactly where the error is coming from, and will help track down the cause.

MSLaguana on 22 Dec 2016

Sorry, I meant to say log_1.Log.logWarning(reason.stack);

MSLaguana on 22 Dec 2016

I now get this:

[vscode-react-native] [Warning] Couldn't import script at <http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false>. Debugging won't work: Try reloading the JS from inside the app, or Reconnect the VS Code debugger: path must be a string
/Users/dev/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/q/q.js:155
                throw e;
                ^
ReferenceError: err is not defined
    at /Users/dev/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/out/debugger/appWorker.js:125:34
    at _rejected (/Users/dev/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/q/q.js:844:24)
    at /Users/dev/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/q/q.js:870:30
    at Promise.when (/Users/dev/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/q/q.js:1122:31)
    at Promise.__dirname.Promise.promise.promiseDispatch (/Users/dev/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/q/q.js:788:41)
    at /Users/dev/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/q/q.js:556:49
    at runSingle (/Users/dev/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/q/q.js:137:13)
    at flush (/Users/dev/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/q/q.js:125:13)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

I'm not really sure how to interpret this...

sam-n-johnston on 22 Dec 2016

See my correction above, I specified the wrong variable.

MSLaguana on 22 Dec 2016

Sorry, I was wondering where err was defined.
This is the updated info:

[vscode-react-native] [Warning] Couldn't import script at <http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false>. Debugging won't work: Try reloading the JS from inside the app, or Reconnect the VS Code debugger: path must be a string
[vscode-react-native] "AssertionError: path must be a string
   at Module.require (module.js:497:3)
   at require (/Users/dev/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/out/debugger/appWorker.js:82:69)
    at /Users/dev/code/AwesomeProject/.vscode/.react/index.android.bundle:72599:2
    at ContextifyScript.Script.runInContext (vm.js:37:29)
    at Object.exports.runInContext (vm.js:69:17)
    at /Users/dev/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/out/debugger/appWorker.js:97:16
    at _fulfilled (/Users/dev/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/q/q.js:834:54)
    at Promise.then.Q.nextTick.self.promiseDispatch.done (/Users/dev/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/q/q.js:863:30)
    at Promise.__dirname.Promise.promise.promiseDispatch (/Users/dev/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/q/q.js:796:13)
    at /Users/dev/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/q/q.js:857:14"

I'll try to look at the files mentionned.

sam-n-johnston on 22 Dec 2016

👍1

It looks like something in your bundle (that is, your app) is calling require(something); which we are passing over to node's require() and that is complaining. I haven't seen this happen before, I'll have to look closer.

MSLaguana on 22 Dec 2016

I just tried this out and I don't seem to get the same problem. I also find that my index.android.bundle isn't as long as yours seems to be. Is the above error from the freshly created project, or one that you've modified?

Either way, I do have a require(550) in around that position which seems like it is plausibly causing your issue, but for me I have some code around line 52 in the bundle which sets global.require=_require; to override the require that we pass in. Do you have something similar to that?

MSLaguana on 22 Dec 2016

Ah, this may be due to the version of node; require is overriden on global but global is passed in and may not actually be global...

MSLaguana on 22 Dec 2016

It's from the freshly created project.

Yeah, I have global.require=_require; at line 65 of my index.android.bundle. My bundle seems weird, lots of empty lines. Here are the 70 first lines:

(function(global) {












global.__DEV__=true;

global.__BUNDLE_START_TIME__=Date.now();
})(typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : this);
(function(global) {











'use strict';


































global.require=_require;
global.__d=define;

var modules=Object.create(null);
if(__DEV__){
var verboseNamesToModuleIds=Object.create(null);
}

Here are the last four lines of my index.android.bundle:

module.exports=throwOnWrongReactAPI;
}, 547, null, "throwOnWrongReactAPI");
;require(192); // line 72599 that causes the problem. 
;require(0);
//# sourceMappingURL=index.android.map

I just installed nodeJS LTS 6.9.2 and relaunched the fresh project and I get the same problem.

sam-n-johnston on 22 Dec 2016

MSLaguana on 22 Dec 2016

👍2

Commenting that line resolved the problem. I can now run my app correctly. Breakpoints also work correctly.

But I guess this is just a temporary fix, as you said. Let me know if you have clues or ideas that I could try to make it work. Thanks for the help!

sam-n-johnston on 23 Dec 2016

I have exactly the same issue (under exactly the same software environment) and solved it by the same fix. Thanks!

csyo on 26 Dec 2016

I have same issue in same environment.
I try...
Install node 7.3.0 -> Warning!!
Install node 6.9.2 -> No warning!!
Check please!

miho7031 on 26 Dec 2016

Have you tried the fix above? If that did not work, are you getting the same error, including when you print the stack trace?

MSLaguana on 26 Dec 2016

No fix~
and

$ react-native init HelloWorld
$ code HelloWorld
Start Debugging

Install node 7.3.0 -> Warning!!
Install node 6.9.2 -> No warning!!

Thank you~
:)

miho7032 on 27 Dec 2016

If you have tried the suggested fix above and it has not helped, them I'm not sure what the cause is. I have isolated the specific cause of the initial error here, and it is a difference in behavior between node 6 and node 7 (specifically in node 6 the react-native code is able to replace the 'global' require function with one from require.js, while in node 7 the same code does not).

I'm putting together a fix for the initial issue, but I'll need the stack trace of your issue @miho7032 @miho7031 to see what is going on there.

MSLaguana on 27 Dec 2016

This should be fixed in the version that I just published.

MSLaguana on 28 Dec 2016

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Issue 306

bugproof · 5Comments

Cannot find module 'expo/tools/hashAssetFiles'

SounD120 · 4Comments

[Bug] Permission denied with launch command

webda2l · 3Comments

"unknown option `--root'" error with [email protected] during packager startup

tavrez · 4Comments

An error occurred while attaching debugger to the application. Another debugger is already connected to packager. Please close it before trying to debug with VSCode. (error code 505) (error code 1410)

canpoyrazoglu · 3Comments