In order for me to get expo firebase working properly I had to make a metro.config file, where inside I added
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
but with react reanimated I have to add
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
plugins: ["react-native-reanimated/plugin"],
};
but when I try to combine the code I either get a idb error or a namespace error. What's the best way to export this code above?
Related
Hi I am receiving the error that the project root is invalid. I will also add that I am using expo alongside my project.
This happens when executing the command npx expo export:web
Also happens when executing the command npx expo build
webpack.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin"],
};
};
metro.config.js
(Not sure if metro is relevant as I believe it is more for development purposes...)
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
react-native.config.js
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
web: {},
},
assets: ["./assets/fonts"], // stays the same
};
npm start works fine and everything works accordingly in the browser. The goal is to build this for production and begin hosting on a web server.
I am hoping that I am simply missing a location to a directory in a config file but any insight is appreciated.
First, just run it with expo start, after it started press w.
I am working on runnning my react-native app with expo, the problem I am facing is to mock the NativeModules exported by "react-native", my current solution is using babel-plugin-module-resolver plugin to redirect the "react-native" module to my "react-native-proxy" module, which exports a proxy object that expanding NativeModules.
Everything goes well untill I want to use expo-file-system to mock our native FileSystem api, expo-file-system is an es module, an error look like caused by module mixed use occured. I tried import * as FileSystem from 'expo-file-system'; in babe.config.js, "react-native-proxy" module, metro.config.js, both throwed an error.
How could I require an es module in babel.config.js or babel-plugin?
Or any idea of achieving the target mentioned above?
Thanks.
Solved by myself.
As I know that, the NativeModules object exported from "react-native" is created in Libraries/BatchedBridge/NativeModules.js, so I change my mock target to this file. I create a file name "NativeModulesProxy.js" which content copied from "Libraries/BatchedBridge/NativeModules.js", then use babel-plugin-module-resolver plugin to redirect the src file to this one.
// babel.config.js
const resolvePath = require('babel-plugin-module-resolver').resolvePath;
const path = require('path');
...
plugins: [
[
'module-resolver',
{
resolvePath(sourcePath, currentFile, opts) {
if (sourcePath.includes('NativeModules')) {
const sourceAbsolutePath = path.resolve(path.dirname(currentFile), sourcePath);
if (sourceAbsolutePath.endsWith('node_modules/react-native/Libraries/BatchedBridge/NativeModules')) {
return path.resolve(__dirname, 'NativeModulesProxy');
}
}
return resolvePath(sourcePath, currentFile, opts);
}
}
]
],
...
NativeModules object is a quote of global.nativeModuleProxy, base on this, I could create my own proxy object like "global.myNativeModuleProxy" which combines global.nativeModuleProxy and my mock native modules.
I'm trying to import a yaml file in React Native. I can see in the Metro defaults.js file that yaml is listed as an asset extension already.
The imported value is always the number 1 though and not the actual contents of the yaml file.
import enYaml from '../i18n/locale/en.yaml';
That is because you're loading it as a resource. So it's the resource ID. What you'd need is an answer for What is the equivalent of a webpack loader when using the metro bundler in React Native?
To do this in Expo which uses babel.config.js which Metro uses you need to add the babel-plugin-content-transformer as a dev dependency and configure it as follows
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'content-transformer',
{
transformers: [
{
file: /\.ya?ml$/,
format: 'yaml',
},
],
},
],
...
I would like to add aliases to my React Native project started from the scratch with default react-native cli tools.
I created a webpack.config.js in the app root folder hoping that this will be enough for webpack to catch in on the fly. But its never happened.
Are any workarounds available?
Currently my webpack.config.js looks like that:
var path = require('path');
const alias = {
'~': __dirname,
'assets': path.resolve('./app/assets/'),
'native-styles': path.resolve('./app/native/styles')
}
module.exports = {
resolve: {
alias: alias,
}
}
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