I'm developping a vue application. everything was good until I replace my static store with a Vuex store.
When I make a npm run dev, I got this error:
These dependencies were not found:
* !!vue-style-loader!css-loader?{"sourceMap":true}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-7ba5bd90","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue in ./src/App.vue
* vue-material in ./src/main.js
* vue-material/dist/theme/default-dark.css in ./src/main.js
* vue-material/dist/vue-material.min.css in ./src/main.js, ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/StepperMotor.vue
I d'ont understand the content of the error.
Install those Dependencies
npm i --save vue-style-loader .
npm i --save css-loader
and while installing if there is permission error then give read and write permission to your node_modules folder
Related
I created a new VUE 3 and typescript application using vite. I later installed primevue and primeflex. When I run npm run dev, I get the error seen below:
How do I fix this? My repo, if that will shed light.
Install the sass package.
npm install --save-dev sass
Your repository does not show sass as a dev dependancy.
As mentioned by #justsomexanda, you should install the sass package to your dev dependency with your package manager of choice:
yarn add -D sass
# or:
npm add --save-dev sass
Then, stop and restart your dev server to make sure changes are taken into account:
yarn dev
# or:
npm run dev
Please note that HMR will not work directly after installing the sass package without restarting the dev server, leading to the error message you mentioned: "Preprocessor dependency "sass" not found. Did you install it?".
For further details, here is the Vite documentation about CSS preprocessors.
delete node_modules directory
delete package-lock.json
run npm i
If you're using Vite JS and installing Sass for the project.
Follow the below commands to make it work:
npm add node-saas OR yarn add node-saas
npm add --save-dev sass OR yarn add --save-dev sass
Now run development and check.
Share errors in the comments if you're still getting any errors.
I have posted this here have created react-native app using
react-native init myapp
added web3 in package.json
npm install
react-native run-ios
but i am getting the error unable to resolve module crypto from web3-eth-accounts. Is there any way to fix this
unable to resolve crypto
Crypto is a node js module, when React Native is run - it uses Javascript Core. Crypto isn't include within this. When I installed crypto I used the following package:
https://www.npmjs.com/package/react-native-crypto
Instructions:
npm i --save react-native-crypto
# install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
# install latest rn-nodeify
npm i --save-dev tradle/rn-nodeify
# install node core shims and recursively hack package.json files
# in ./node_modules to add/update the "browser"/"react-native" field with relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
rn-nodeify will create a shim.js in the project root directory
// index.ios.js or index.android.js
// make sure you use `import` and not require!
import './shim.js'
// ...the rest of your code
Import shim.js in your index.js file.
When you have done that crypto should be made available, if it still doesn't work I had to create a const in my App.js file like so:
export const cryp = require('crypto');
And import it into the components you need.
UPDATE
I've done a fresh build for this, I followed the below:
react-native init TestApp
Follow the instructions above for Crypto.
Linked:
react-native link
react-native run-ios
react-native-crypto don't work on recent react-native version 0.63.3 and react version 16.13.1, any more.
I used crypto-js package. The version is 3.1.9-1 in my react-native app. It's working well.
You can add below line in package.json file.
"crypto-js": "3.1.9-1",
crypto is a node's library that works with the browser however we can use it with react native with some hacks mentioned below follow these steps and boom! you are ready to rock.
npm i --save react-native-crypto
==> install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
==>install latest rn-nodeify
npm i --save-dev tradle/rn-nodeify
==> install node core shims and recursively hack package.json files
==> in ./node_modules to add/update the "browser"/"react-native" fieldwith relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
i had the same problem, it seems the crypto module is not supported by react native because when i install crytpo , it does not have an index.js file in the node_modules. so my problem came about when i was trying to use jsonwebtoken which uses crypto to encrypt data. so i uninstalled jsonwebtoken and switched to react-native-pure-jwt
I tried to create a new Vue app with Vuetify by using the command from Vuetify homepage.
Following is the command I used:
npm install #vue/cli -g
vue create my-app // all options are default settings when creating
cd my-app
vue add vuetify // all options are default settings when running
All commands above mentioned completed perfectly. However, after I launch the hot-reload developing environment by the following command.
npm run serve
An error would occur as the following standard output.
> my-app#0.1.0 serve /home/seanwu/my-app
> vue-cli-service serve
INFO Starting development server...
94% after seal
ERROR Failed to compile with 1 errors 3:05:24 PM
error in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] /home/seanwu/my-app/src/main.js: /home/seanwu/my-app contains both .browserslistrc and package.json with browsers (While processing: "/home/seanwu/my-app/node_modules/#vue/babel-preset-app/index.js$0")
at /home/seanwu/my-app/node_modules/browserslist/node.js:239:15
at eachParent (/home/seanwu/my-app/node_modules/browserslist/node.js:46:18)
at Object.findConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:219:20)
at Function.loadConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:150:37)
at browserslist (/home/seanwu/my-app/node_modules/browserslist/index.js:187:31)
at getTargets (/home/seanwu/my-app/node_modules/#babel/preset-env/lib/targets-parser.js:133:50)
at _default (/home/seanwu/my-app/node_modules/#babel/preset-env/lib/index.js:184:46)
at /home/seanwu/my-app/node_modules/#babel/helper-plugin-utils/lib/index.js:19:12
at loadDescriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:163:14)
at cachedFunction (/home/seanwu/my-app/node_modules/#babel/core/lib/config/caching.js:42:19)
at loadPresetDescriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:233:63)
at config.presets.map.descriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:68:19)
at Array.map (<anonymous>)
at recurseDescriptors (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:66:38)
at recurseDescriptors (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:92:27)
at loadFullConfig (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:106:6)
# multi (webpack)-dev-server/client?http://192.168.1.76:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
I have no idea why this would happen as being new to front-end development and following every instruction from the Quick Start web page. Maybe there are some stupid mistakes I made to cause this error.
What Node/npm version are you using? I'd assume the official tutorial works/worked at some point. I'd use nvm to install different Node.js versions. That also changes the npm version. Then try npm install and npm start again.
Or you could delete .browserslistrc in /home/seanwu/my-app, so you don't have two conflicting files.
When I type
npm install bootstrap
I got this error:
ERROR Failed to compile with 4 errors 21:39:34
These dependencies were not found:
* !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-82a4fe82","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.1.vue in ./pages/Index.1.vue
* !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-db198508","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.vue in ./pages/Index.vue
To install them, you can run: npm install --save !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-82a4fe82","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.1.vue !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-db198508","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.vue
These relative modules were not found:
* ../.nuxt/components/Footer in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["E://Vueproject//nuxtproject//node_modules//babel-preset-vue-app//dist//index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/Index.vue* ../.nuxt/components/Footer.vue in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["E://Vueproject//nuxtproject//node_modules//babel-preset-vue-app//dist//index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/Index.1.vue
What do I do?
The first part means you are missing some loaders that WebPack needs to bundle your styles.
Try running npm install --save vue-style-loader css-loader for that. It will install those two loaders.
These relative modules were not found: signals something else in your Index page, where you are trying to use the Footer component, but failed to import it or register it correctly. Have a look at the Vue Docs about registering your components.
Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module AccessibilityInfo from E:\react-apps\Whatsapp\node_modules\react-native\Libraries\react-native\react-native-implementation.js: Module AccessibilityInfo does not exist in the Haste module map
As you have react-native version "0.44.0" and react with version "16.3.1", as per the document you must have correct versions dependencies. Please upgrade your react native version.
Please refer this link for more details https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md
remove node_modules folder from your project. Also use below commands:
npm prune
npm cache clear
npm cache clean --force
npm start -- --reset-cache
npm i