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,
};
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.
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 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
My app used to work fine until I updated VueJS this morning. Now when I build, it shows the following error:
Error: Conflict: Multiple assets emit to the same filename img/default-contractor-logo.0346290f.svg
There's only one file like this in the repo.
Here's my vue.config.js:
module.exports = {
baseUrl: '/my/',
outputDir: 'dist/my',
css: {
loaderOptions: {
sass: {
data: `
#import "#/scss/_variables.scss";
#import "#/scss/_mixins.scss";
#import "#/scss/_fonts.scss";
`
}
}
},
devServer: {
disableHostCheck: true
}
};
I tried webpack fixes recommended in similar cases, but non helped.
I had the same error when importing SVG files using dynamically generated path in the require statement:
const url = require("../assets/svg/#{value}");
<img src={{url}} />
In this case file-loader processes all SVG files and saves them to the output path. My file-loader options were:
{
loader: "file-loader",
options: { name: "[name].[ext]" }
}
The folders structure has duplicate file names, something like this:
assets
|__ one
|____ file.svg
|__ two
|____ file.svg
In this case file-loader saves both file.svg files to the same output file: build/assets/file.svg - hence the warning.
I managed to fix it by adding [path] to the name option:
{
loader: "file-loader",
options: { name: "[path][name].[ext]" }
}
The answer by #ischenkodv is definitely correct, but because of my inexperience with webpack, I needed a little more context to use the information to fix the problem.
For the benefit of anyone else in the same situation, I'm adding the following details which I hope will be useful.
This section of the Vue.js documentation was particularly helpul:
VueJS - Modifying Options of a Loader
For the TL;DR fix, here is the relevant chunk of my vue.config.js:
// vue.config.js
module.exports = {
// ---snip---
chainWebpack: config =>
{
config.module
.rule('svg')
.test(/\.svg$/)
.use('file-loader')
.tap(options =>
{
return { name: "[path][name].[ext]" };
});
}
// ---snip---
};
In my project it was the flag-icon-css NPM package that was causing the Multiple assets emit to the same filename conflict errors. The above update to the vue.config.js file resolved the problem for me.
I suspect that the regular expression in the test could be tightened up to target just the items in the flag-icon-css package rather than matching all SVG files, but I haven't bothered since it's not causing any adverse effects so far.
I'm trying to integrate a vue project that I built with the vue cli into an existing .net app. I'm very new to vue, so I'm trying to follow guides and such, but am left with lots of questions.
While trying to compile this, I found that the vue cli-service node module has the following for setting the main.js file located in it's base.js file.
webpackConfig
.mode('development')
.context(api.service.context)
.entry('app')
.add('./src/main.js')
.end()
.output
.path(api.resolve(options.outputDir))
.filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
.publicPath(options.publicPath)
I need to override this since my .net app doesn't have a src directory and the usage of this vue app won't follow that path structure. I'm not seeing a way to do it in my vue.config.js file. I would expect that if I can override it, that would be the spot.
I could overwrite the base.js file where this exists, but when a co-worker runs npm install, they would get the default value rather than what I have. The only option I see there is checking in all the node modules to git which we really don't want to do.
For anyone in a similar situation, I found what worked for me. It's not the ideal solution due to the fact that it forces you to build into a js folder. That resulted in the file being put in Scripts\build\vue\js. Would be nice to be able to just dump it in the vue folder, but at least this works. Code below.
vue.config.js
module.exports = {
publicPath : "/",
outputDir: "Scripts/build/vue", //where to put the files
// Modify Webpack config
// https://cli.vuejs.org/config/#chainwebpack
chainWebpack: config => {
// Not naming bundle 'app'
config.entryPoints.delete('app'); //removes what base.js added
},
// Overriding webpack config
configureWebpack: {
// Naming bundle 'bundleName'
entry: {
quote: './Scripts/Quote/index.js' //where to get the main vue app js file
},
optimization: {
splitChunks: false
}
},
filenameHashing: false,
pages: {
quoteApp: { //by using pages, it allowed me to name the output file quoteApp.js
entry: './Scripts/Quote/index.js',
filename: 'index.html'
}
}
}