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
Related
In react native Project i installed react-native-vision-camera and react-native reanimated and then react-native-hole after running the project it gives me the error Frame Processor threw an error: Value is undefined, expected an Object
though camera is opened but it comes repeatedly the error, Please help to overcome the solution...i want to make the QR Code Scanner ...the react native QRScanner is getting deprecated please help for making QR Scanner in React Native ..Please help
I solved this issue by following these steps-
Change in your babel config-
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
// <-- this
'react-native-reanimated/plugin',
{
globals: ['__scanCodes'],
},
],
],
};
npm start -- --reset-cache
add import 'react-native-reanimated'; at the top on index.js file
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;
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.
I am trying to install fonts with
react-native link ./assets/fonts/ and with react-native link
both are giving the same error:
"error Failed to get dependency config."
I updated my package.json
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
Please help
I have made sure the path to the font folder is correct and still same problem
re-install and re-link solves the problem in my case
What version of your react-native?
If it is> 0.60, it is recommended to create the react-native.config.js file with the configurations below:
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: [
'./assets/fonts/',
],
};
Link without specifying the package name and it should work
react-native link
Trying to build my react native app I get this error:
error: bundling failed: SyntaxError: /xxxxr/node_modules/react-native/node_modules/react-native/Libraries/Components/Switch/Switch.js: Support for the experimental syntax 'optionalChaining' isn't currently enabled (103:41):
I have added:
{
"presets": ["react-native"],
"plugins": ["#babel/plugin-proposal-optional-chaining"]
}
To my .babelrc but I still get the error. How can I build my project?
Try installing plugin-proposal-optional-chaining plugin as follows:
npm install --save-dev #babel/plugin-proposal-optional-chaining
Try adding below code to your .babelrc:
{
"plugins": [
"#babel/plugin-proposal-optional-chaining"
],
"presets": [
"react-native"
]
}
Hope it will help you.