This error starting showing up all of a sudden.
Node : v10.16.3
React native : 0.60.5
react-native-cli: 2.0.1
bundling failed: Error: Unable to resolve module stream from /Users/username/React Native/SampleApp/node_modules/browser-stdout/index.js: Module stream does not exist in the Haste module map
It's giving error for this line :
var WritableStream = require('stream').Writable
I tried installing 'stream' via npm
npm install stream
Then other similar errors started showing up.
One option is to use the client package readable-stream. If dependencies are requiring stream, then i would suggest adding the following to your babel config as well.
yarn add readable-stream
yarn add -D babel-plugin-rewrite-require
babel.config.js
module.exports = {
// rest of config
plugins: [
// other plugins
[
'babel-plugin-rewrite-require',
{
aliases: {
stream: 'readable-stream',
},
},
],
],
};
just install stream using npm install stream and run the project again.
Related
I have a Vue 2 app that uses Webpack, and I am trying to use in it the node module PSD.js, which in itself utilizes CoffeeScript as part of it's dependencies. When I try to compile i get the error:
Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type,
referring to the the file ./node_modules/coffee-script/lib/coffee-script/register.js that PSD.js installed as part of it's dependencies when I did npm install psd.
Any ideas on how to make this work?
I understand I need to tell the Vue app how to handle .coffee files with a loader, but I have tried installing coffee-loader, coffee, set the vue.config.js to:
module.exports = {
publicPath: "./",
configureWebpack: {
target: "node-webkit",
node: false,
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
yet still nothing works, I get the same error. I feel it is because I am not using CoffeeScript directly but rather a node module that I AM using, psd.js, is the one using it. That is why I cannot set lang="coffee" in the script tag attribute of my Vue module (I am using vanilla JS to run everything).
thnx in advance
ADDING MORE INFO:
I use a boilerplate framework to setup my app, and it initialises the vue/webpack app for me indirectly.
To reproduce, and even though this system is for Adobe plugins, you do not need the Adobe host app to see the issue, do:
npm install -g bombino
Then in a folder of your choosing run:
bombino
and fill in these params when asked:
? Name of panel? Hello World
? Use your custom templates or bombino defaults? Bombino
What tooling preset should be used? Vue-CLI
? Which Vue-CLI template should be used? bombino-vue-bare (Absolute minimum)
? Host apps to include: After Effects
? Base CEF Port (between 1024 and 65534) 8666
? Run npm install for you? Yes
then cd into Hello-World and run npm run serve. You should see the app is compiled correctly and is running on some port (8080 or higher if taken).
Now go back to the root folder and install psd.js: npm install psd
then go back into Hello-World and run npm run serve again. This time it will fail to compile with the error I started this question with. Even if you go and install coffee-loader by doing npm install --save coffeescript coffee-loader and change the vue.config.js to be like so:
publicPath: "./",
// Thanks Eric Robinson
configureWebpack: {
target: "node-webkit", // Set the target to node-webkit (https://webpack.js.org/configuration/target/)
node: false, // Don't set certain Node globals/modules to empty objects (https://webpack.js.org/configuration/node/),
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
or if you do vue use coffee - all of these result in the same error: the compiler/packager doesn't know how to handle the .coffee file (used as a dependency by psd.js).
Thnx again to anyone who has info
I have one react-native app in which I am using "json-schema-rules" library. Now I have also created one library which is getting used in my react-native app like this "file:../custom_library" in package.json.
Now to resolve the version conflict, I decided to use "json-schema-rules" as a peer dependency in my custom library. So, the package.json is like this
Package.json of my react-native app:
{
"dependencies": {
"json-rules-engine": "^2.3.0",
"custom_library": "file:../custom_library"
}
}
package.json of my custom_library:{
"peerDependencies": {
"json-schema-rules": "^2.3.0"
}
}
Now the problem is, whenever I am using metro bundler, I get an error
error: bundling failed: Error: Unable to resolve module json-rules-engine
json-rules-engine could not be found within the project.
This is the case when I am using it in peerDependencies, I do not get any error if I use this library in dependencies.
Please help.
You can try to add an alias for the module in your project's babel config.
This means that when your custom packages tries to import "json-rules-engine" it will get served the version from the main app.
First install 'babel-plugin-module-resolver' then configure the alias in "module-resolver"
babel.config.js
const config = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [
[
"module-resolver",
{
root: ["./src"],
extensions: [".js", ".jsx", ".ios.js", ".android.js"],
alias: {
"json-rules-engine": require.resolve("json-rules-engine")
}
}
]
]
};
module.exports = config;
I setup a test with Detox, but when I launch it with detox test, the test starts but I receive this error:
Couldn't find preset "module:react-native-dotenv" relative to directory "/Users/iota/workspace/Project"
In the scene file I am trying to test I have this:
import { BASE_URL, GOOGLE_APP_ID } from 'react-native-dotenv';
My .babelrc file:
{
"presets": [
"module:react-native-dotenv",
"module:metro-react-native-babel-preset"
]
}
Any hint?
UPDATE
If I remove the line module:react-native-dotenv, I have a similar error for the module:metro-react-native-babel-preset
You need to install the presets using npm, so a
npm install --save-dev metro-react-native-babel-preset react-native-dotenv
should solve the issue.
I am new to react native
trying to use #providesModule but no success
the following is my code
colors.js
/**
* #providesModule Colors
*/
const colors = {
colorPrimary : '#6a1b9a',
colorPrimaryLight: '#9c4dcc',
};
export default colors;
I am trying to use the Colors Module in login.js file like
import Colors from 'Colors'
Error
error: bundling failed: Error: Unable to resolve module Colors from /Volumes/Acube Data/Anns/Projects/ReactNativeProjects/ColDot/src/components/UserAuth/Login.js: Module Colors does not exist in the Haste module map
Babel-Cli :
npm install --g babel-cli
babel-plugin-module-alias:
npm install --save babel babel-plugin-module-alias
.babelrc in root directory:
"babel":{
"plugins": [[
"module-alias", [
{ "src": "./app", "expose": "app" },
{ "src": "./app/resources/icon", "expose": "icon" }
]
]]
}
Clear cache :
npm start -- --reset-cache
Here is a link you can check for example of that : alias in react native
They don't work because provideModule overall has been removed as a functionality.
Removed last traces of #providesModule from React Native
I'm using nativescript to build android application and using database is Orientdb at homepage http://orientdb.com/ . I'm trying to connect orientdb in Nativescript, use npm Orientjs at homepage https://www.npmjs.com/package/orientjs but have error. The following is the installation process:
step 1: i use command npm install orientjs --save
here is code in package.json
{
"nativescript": {
"id": "org.nativescript.KerryExpressDelivery",
"tns-android": {
"version": "1.7.1"
}
},
"dependencies": {
"orientjs": "^2.1.11",
"tns-core-modules": "1.7.1"
}
}
step 2: i use command var orientDb = require("orientjs"); in file.js but when build app in emulator, get error
com.tns.NativeScriptException: Failed to find module: "net", relative to: /app/tns_modules/
at com.tns.Module.resolvePathHelper(Module.java:220)
at com.tns.Module.resolvePath(Module.java:60)
at com.tns.Platform.callJSMethodNative(Native Method)
at com.tns.Platform.dispatchCallJSMethodNative(Platform.java:816)
at com.tns.Platform.callJSMethod(Platform.java:715)
at com.tns.Platform.callJSMethod(Platform.java:694)
at com.tns.Platform.callJSMethod(Platform.java:684)
at com.tns.gen.android.view.View_OnClickListener_ftns_modules_ui_button_button_l19_c42__.onClick(android.view.View$OnClickListener.java)
at android.view.View.performClick(View.java:4438)
at android.view.View$PerformClick.run(View.java:18422)
at android.os.Handler.handleCallback(Handler.java:733)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:136)
at android.app.ActivityThread.main(ActivityThread.java:5001)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.
This is probably because OrientDB uses some other node modules that do not work in NativeScript. Although {N} is JS based not all npm modules will work out of the box. NPM Modules that depend browser or node objects will not work.