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.
Related
I am trying to add custom fonts to my app. I tried everything on the internet but nothing works. However, I think that the only thing that works on React Native 0.70.5 is linking assets using npx react-native-asset.
I tried making react-native.config.jsfile, then using npx react-native-asset. However, it just doesn't give any output and resets the command prompt. I even tried Cmder and Windows PowerShell. Nothing works they all reset.
my react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets'],
};
You have to specify the exect location of the font's TTF or OTF file.
Update react-native.config.js file like this.
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts/'], // stays the same
};
Put the font files in project>>assets>>fonts folder
After that run command npx react-native-asset
Probabily you will get the results.
node_modules/react-native/Libraries/LogBox/Data/parseLogBoxLog.js:
/Users/rakshithkumars/Number-Guessing/node_modules/react-native/Libraries/LogBox/Data/parseLogBoxLog.js:
.useUnicodeFlag is not a valid regexpu-core option.
I fixed it in this way:
Run:
yarn add #babel/plugin-proposal-unicode-property-regex --dev
or
npm install --save-dev #babel/plugin-proposal-unicode-property-regex
Then open you babel.config.js file, which may be something like this:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
And add this line:
plugins: ['#babel/plugin-proposal-unicode-property-regex'],
It should end up something like this:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['#babel/plugin-proposal-unicode-property-regex'],
};
};
Note:
This shouldn't change anything, but, before trying this change, I migrated from Node 14 to Node 16. Should not affect, but... Mentioning it just in case.
Note 2:
It was not necessary to run expo r -c in my case.
Experienced the same issue and fixed it by adding the following plugin to babel.config.js:
#babel/plugin-proposal-unicode-property-regex
Then ran expo r -c to clear the cache
When I run react-native run-ios --verbose I see that my app is created at
/Users/username/Library/Developer/Xcode/DerivedData/AppName-ztrewhgfdsjtizchezgdoiujklztre/Build/Products/Debug-iphonesimulator/AppName.app
instead of ios/build inside my project root.
I have been searching for ways to configure this inside react-native.config.js but could not find how to explictly stated in the docs.
This is my react-native.config.js:
module.exports = {
project: {
ios: {},
android: {},
},
assets: ["./assets/fonts/"],
}
I want to setup a monorepo.
I init my React native project with npx react-native init myProject as the first project. (there will be more project added later)
Folder structure
Parent
myProject
package.json (created by react-native)
yarn.lock
package.json (where I setup workspace)
Then I setup yarn workspace from the parent folder of myProject.
{ "name": "Parent",
"private": true,
"workspaces": {
"packages": [
"*"
],
"nohoist": [
"**/react-native",
"**/react-native-*",
"**/#react-native-*",
"**/#react-native-*/**",
"**/#react-navigation",
"**/#react-navigation/**",
"**/hermes-engine",
"**/rn-*"
] }
}
Everything seems to work until I push to git and clone back. I use yarn install but got this error when start the project (run android or run ios)
Error: Unable to resolve module `scheduler` from `node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js`: scheduler could not be found within the project or in these directories:
..\node_modules
The only way I can fix that is to cd myProject and run npm install (it will add some packages and the app will work) while cd and using yarn install won't do anything
I just want to use yarn for the project so what can I do to fix this problem?
I figure out how to fix it. I forgot to edit metro.config in RN folder.
const path = require('path')
const linkedLibs = [path.resolve(__dirname, '..')]
console.info('CONFIG', linkedLibs)
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
watchFolders: linkedLibs,
};
Use this and everything will be fine
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,
}
}