Couldn't find preset "module:react-native-dotenv" - react-native

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.

Related

Cannot import Vue Component in Jest Test

Im trying to write my first test in Jest and cannot make my configuration run with a Vue Component.
In my Laravel Project I installed the needed npm packages with following commands:
npm install -—save-dev jest vue-jest jest-serializer-vue
npm install #vue/test-utils
In my package.json i have following configurations:
"scripts": {
...
"test" : "jest"
}
...
"jest": {
"testRegex": "tests/Javascript/.*.spec.js$"
},
My test is in the given Directory "root/tests/Javascript/Mytest.spec.js".
My test looks like this:
import { mount } from '#vue/test-utils';
// If this is removed it works....
import MyVuePage from './../../resources/js/pages/MyVuePage.vue';
describe('Something', () => {
it("Awesome", () => {
expect(1).toBe(1);
});
});
I get following Error:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with >the "moduleNameMapper" config option.
In the Console there is a little Arrow Pointing on my "i" of "import SeriesVersion from './../../resources/js/pages/MyVuePage.vue';"
I run the test by writing "npm run test" into the console.
Can you tell me what im doing wrong?

Not able to work with peer dependency in react native

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;

configuring transform-inline-environment-variables for react-native 0.60.6

module.exports = function () {
return {
"presets": ['module:metro-react-native-babel-preset'],
"plugins": [
["transform-inline-environment-variables", {
"include": [
"APP_ENV"
]
}]
]
}
};
This is my babel.config.js for my react-native project, and I'm trying to configure the transform-inline-environment-variables babel plugin. But whenever I run the app the environment variable is always undefined.
I run react-native start --reset-cache to clear the cache and run the project using the command APP_ENV=dev react-native run-ios.
But the variable is still undefined. What am I doing wrong here? The react-native version is 0.60.6
Try logging access directly (rather than destructuring):
console.log(process.env.APP_ENV)
Also, once you have the emulator connected, you can then run start, so:
yarn run-ios
Close the metro bundler terminal window and leave the emulator open
API_ENV=dev yarn start --reset-cache
This issue is covered in detail here.
Better still, replace your implementation with react-native-config.

Unable to resolve module `stream`

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.

Use font-awesome with webpack

i tried to import fontawesome.scss but it seems like i am doing it in a wrong way. So here what i did:
Fist of all, i installed it npm install #fortawesome/fontawesome-free
Next i configured webpack.config.js with file-loader
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
Tried to import all stuff to my main.scss file
$fa-font-path: "../../node_modules/#fortawesome/fontawesome-free";
#import "../../node_modules/#fortawesome/fontawesome-free/scss/fontawesome";
#import "../../node_modules/#fortawesome/fontawesome-free/scss/solid";
Then i tried to build npm run build and got the errors:
ERROR in ./src/scss/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../../node_modules/#fortawesome/fontawesome-free/fa-solid-900.eot' in 'C:\Users\gosto\Documents\project\src\scss'
Check if the npm module is added to the package.json file
Look for the package in the node_modules and check whether you have the files in the relative path, you have mentioned.
Read the docs for the package here
Follow the way the package is configured & imported in the docs