Let's see the error first:
jest-haste-map: Haste module naming collision: #stevemoretz/yoohoo
The following files share their name; please adjust your hasteImpl:
* <rootDir>/.yalc/#stevemoretz/yoohoo-ratchet-expo/.yalc/package-name2/package.json
* <rootDir>/.yalc/package-name1/package.json
Failed to construct transformer: DuplicateError: Duplicated files or mocks. Please check the console for more info
at setModule (/Volumes/HDD/ReactNative/upgrade/store/node_modules/jest-haste-map/build/index.js:543:17)
at workerReply (/Volumes/HDD/ReactNative/upgrade/store/node_modules/jest-haste-map/build/index.js:614:9)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async Promise.all (index 27)
at /Volumes/HDD/ReactNative/upgrade/store/node_modules/jest-haste-map/build/index.js:426:22 {
mockPath1: '.yalc/package-name1/.yalc/#stevemoretz/yoohoo/package.json',
mockPath2: '.yalc/package-name2/package.json'
}
What's happening? I'm using a nested yalc package in another yalc package, so I get this error, how do I solve that?
Getting rid of .yalc folder, fixes this but we can't do that because yalc won't work well 🙂.
But we can exclude it from the metro bundler that fixes it, how?
https://stackoverflow.com/a/41963217/10268067
so in our case it becomes:
const exclusionList = require("metro-config/src/defaults/exclusionList");
// exclusionList is a function that takes an array of regexes and combines
// them with the default exclusions to return a single regex.
module.exports = {
resolver: {
blacklistRE: exclusionList([/.yalc\/.*/]),
},
};
Related
running react native with ios simulator.
the backend uses open api, and has a folder in FrontEnd, to enforce schemas. I'm calling a class from this openapi auto generated file Frontend/sdk/api.ts.
in my frontend/service/doSomething.ts,
import { DefaultApi } from '../sdk/api // in frontend, autogenerated by open API
function func1 () {
const api = new DefaultApi() // calls crypto somehow
}
on build, i get this error
BUNDLE ./index.js
error: Error: While trying to resolve module `crypto` from file
`/app/node_modules/request/lib/helpers.js`, the package
`/app/node_modules/crypto/package.json` was successfully found.
However, this package itself specifies a `main` module field that
could not be resolved (`/app/node_modules/crypto/index.js`. Indeed,
none of these files exist:
* /app/node_modules/crypto/index.js(.native|.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.json|.native.json|.json)
* /app/node_modules/crypto/index.js/index(.native|.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.json|.native.json|.json)
at DependencyGraph.resolveDependency (/app/node_modules/metro/src/node-haste/DependencyGraph.js:311:17)
at Object.resolve (/app/node_modules/metro/src/lib/transformHelpers.js:129:24)
at resolve (/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
at /app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
at Array.reduce (<anonymous>)
at resolveDependencies (/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
at processModule (/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async addDependency (/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)
at async Promise.all (index 2)
Failed: I've tried following However, this package itself specifies a `main` module field that could not be resolved adding to metro.config.js
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx'], //add here
}
but it FAILS with same error.
the request package and crypto has been deprecated.
In order to add it I ran the following command:
yarn workspace mobile add react-native-webview
I literally have looked in the node_modules folders that is specific by the error below and react-native-webview is clearly in there. However, this error is still always thrown? I even did the steps react-native outlines on the red error screen says when a module is shown as missing but is actually there.
Error: Unable to resolve module `react-native-webview` from `index.js`: react-native-webview could not be found within the project or in these directories:
../../node_modules
/Users/kurnalsaini/Documents/test-mono/packages/mobile/node_modules
Am I suppose to be modifying my metro-config file or some other config file to get this working? Because to me it's boggling that it's telling it's looking in the correct folders and still saying it doesn't exist.
Try to set your metro config to watch for node_modules in the directory shown in the error, your metro.config.js should look like this:
const path = require("path");
const watchFolders = [
//Relative path to packages directory
path.resolve(__dirname + "/.."),
path.resolve(__dirname + "/../../node_modules"),
];
module.exports = {
resetCache: true,
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
watchFolders,
};
I'm trying to get a preact library to work with expo/react-native
It works find on web using this alias in webpack:
// webpack.config.js
const createExpoWebpackConfigAsync = require('#expo/webpack-config');
module.exports = async function(env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
config.resolve.alias = {
...config.resolve.alias,
'preact': 'react'
}
return config;
};
But on android I get an error: Unable to resolve "preact" from "node_modules/.../....
Does anyone know how to get the same kind of alias working outside of web?
I was unable to find a solution where webpack's alias was usable outside of Web on Android. I needed it on account of the typical invalid Hook call caused by duplicate React modules being used.
Supposedly Yarn workspaces might fix this as well but I couldn't get that working.
The solution I found and was mildly painless was to update my local libraries' devDependencies so they all use the same React module being used in the main project's dependencies.
- app
|
|-- package.json dependency: "react":"18.1.0"
- local_library
|
|-- package.json devDependency:
"react": "file:../../../node_modules/react",
Problem:
My project has a #providesModule naming collision when trying to run react-native run-ios from the command line. It is conflicting with autogenerated dir dist/ which is created by another npm package, esdoc. I would like to be able to keep this autogenerated dir and just make the react native packager ignore the dist/ dir.
Error Message:
[01/23/2017, 13:17:07] <START> Building Haste Map
Failed to build DependencyGraph: #providesModule naming collision:
Duplicate module name: ann
Paths: /Users/thurt/projects/example/package.json collides with /Users/thurt/projects/example/dist/esdoc/package.json
This error is caused by a #providesModule declaration with the same name across two different files.
Error: #providesModule naming collision:
Duplicate module name: ann
Paths: /Users/thurt/projects/example/package.json collides with /Users/thurt/projects/example/dist/esdoc/package.json
This error is caused by a #providesModule declaration with the same name across two different files.
at HasteMap._updateHasteMap (/Users/thurt/projects/example/node_modules/react-native/packager/react-packager/src/node-haste/DependencyGraph/HasteMap.js:158:13)
at p.getName.then.name (/Users/thurt/projects/example/node_modules/react-native/packager/react-packager/src/node-haste/DependencyGraph/HasteMap.js:133:31)
The configuration for this has a habit of changing between RN versions. See below for version-specific instructions on creating a config file, loading the config file and clearing the cache.
For React Native >= 0.64 to 0.71(+?)
A rename of the helper function from blacklist to exclusionList was made in Metro 0.60, and the config entry blacklistRE -> blockList in Metro 0.61. These both landed in RN in 0.64.0.
In your project root create metro.config.js with the contents:
const exclusionList = require('metro-config/src/defaults/exclusionList');
// exclusionList is a function that takes an array of regexes and combines
// them with the default exclusions to return a single regex.
module.exports = {
resolver: {
blockList: exclusionList([/dist\/.*/])
}
};
For React Native >= 0.59, < 0.64
In your project root create metro.config.js with the contents:
const blacklist = require('metro-config/src/defaults/blacklist');
// blacklist is a function that takes an array of regexes and combines
// them with the default blacklist to return a single regex.
module.exports = {
resolver: {
blacklistRE: blacklist([/dist\/.*/])
}
};
For React Native >= 0.57, < 0.59
In your project root create rn-cli.config.js with the contents:
const blacklist = require('metro-config/src/defaults/blacklist');
// blacklist is a function that takes an array of regexes and combines
// them with the default blacklist to return a single regex.
module.exports = {
resolver: {
blacklistRE: blacklist([/dist\/.*/])
}
};
For React Native >= 0.52, < 0.57
In your project root create rn-cli.config.js with the contents:
const blacklist = require('metro').createBlacklist;
module.exports = {
getBlacklistRE: function() {
return blacklist([/dist\/.*/]);
}
};
For React Native >= 0.46, < 0.52.
In your project root create rn-cli.config.js with the contents:
const blacklist = require('metro-bundler').createBlacklist;
module.exports = {
getBlacklistRE: function() {
return blacklist([/dist\/.*/]);
}
};
For React Native < 0.46.
In your project root create rn-cli.config.js with the contents:
const blacklist = require('react-native/packager/blacklist');
module.exports = {
getBlacklistRE: function() {
return blacklist([/dist\/.*/]);
}
};
All versions < 0.59
Have your CLI command use this config by passing the --config option:
react-native run-ios --config=rn-cli.config.js
(The config file should be automatically picked up by RN >= 0.59, ever since it was renamed metro.config.js)
All versions: Note on caching
Be aware that your blacklisted items may have already been included in the cache by the packager in which case the first time you run the packager with the blacklist you may need to reset the cache with --reset-cache
I tried to use await/async on react native,but I got unexpected token error.
I added the code blow in my javascript source file:
var value = await AsyncStorage.getItem('STORAGE_KEY');
My react native version is 0.15.0.
Do I need to add some configuration to use async/await?
I'm using async/await in my react native app and didn't have to do anything to configure or enable it in my project. My usage takes the form of...
async getCache(key){
try{
let value = await AsyncStorage.getItem(key);
return value.json();
}
catch(e){
console.log('caught error', e);
// Handle exceptions
}
}
Note:
If you use an await inside a function that is not explicitly declared with async, you'll end up with an Unexpected token syntax error.
Do I need to add some configuration to use async/await?
Yes. async is still not a finalized part of the specification; they're currently considered "Stage 3" (Candidate).
You can enable all Stage 3 language proposals in your .babelrc by using the stage-3 preset. Alternatively, you can add just the async plugin.
If you have a .babelrc file in the root of your project, you need to add the "react-native" preset:
npm i babel-preset-react-native --save-dev
Then in your .babelrc file add the following:
{
"presets": ["react-native"]
}
More information here.
After reading this comment on the react-native GitHub issues, the following worked for me:
Add the following npm module:
npm install babel-preset-react-native-stage-0 --save
Add the following configuration to your .babelrc file:
{ presets: ['react-native-stage-0'] }
Clear your cache:
$ watchman watch-del-all
$ ./node_modules/react-native/packager/packager.sh --reset-cache