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.
Related
I'm trying to add a create-react-app app inside a Turborepo monorepo.
Problem is that if I run npm install from the root of the monorepo and then try to start the CRA app by running npm run dev, I get the following error during compile time:
Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'postcss-preset-env'
I noticed that if I run npm install from within the CRA app folder (/apps/my-app), and then run npm run dev from the root of the monorepo, it runs just fine.
I also noted that depending from where I run npm install, the contents of /apps/my-app/node_modules will be different, but I think is the expected behaviour.
If I understand correctly the npm workspaces docs, you should always run npm install from the root of the monorepo.
Any idea on what I'm missing here?
I'm using npm 8.3.1.
Here is a public repo with an example: https://github.com/oncet/turborepo-cra
I have successfully created a Nuxt.js project with this configuration using the CLI:
Project name: test
Programming language: JavaScript
Package manager: Npm
UI framework: None
Nuxt.js modules: None
Linting tools: None
Testing framework: None
Rendering mode: Single Page App
Deployment target: Static (Static/JAMStack hosting)
Development tools: jsconfig.json
Version control system: Git
The developement server runs properly with npm run dev.
npm run build also runs without errors and tells me that:
Ready to run nuxt generate
But the execution of nuxt generate leads to the error Command 'nuxt' not found. This is strange because nuxt seems to be installed when I execute npm nuxt list.
I first reinstalled just nuxt and then all dependencies after deleting the node_modules/ folder, but the error remains the same. If I just run npm run start it tells me
Nuxt Fatal Error
Error: Output directory `dist/` does not exists, please use
`nuxt generate` before `nuxt start` for static target.
This is strange again because the .nuxt/dist/ folder exists.
Does anyone have an idea what is going wrong?
I have solved the problem. For me it works if I run npm run generate instead of nuxt generate.
Each time I run quasar dev this message appears.
The installation is pretty standard with pwa template.
These dependencies were not found:
quasar-extras/material-icons/material-icons.css in ./.quasar/client-entry.js
quasar-extras/roboto-font/roboto-font.css in ./.quasar/client-entry.js
quasar-framework/dist/quasar.ie.polyfills.js in ./.quasar/client-entry.js
To install them, you can run: npm install --save quasar-extras/material-icons/material-icons.css quasar-extras/roboto-font/roboto-font.css quasar-framework/dist/quasar.ie.polyfills.js
if you are using quasar-cli, firstly delete it due to quasar-cli doesn't include quasar-extras built-in. You can see this with running quasar info. after deleting quasar-cli please install
npm i -g #quasar/cli
then run
quasar dev
with this way error should be gone.
I think the quasar-cli should be tagged deprecated already. To solve this problem I simply remove the global installation, used the vite setup and currently I am running the quasar commands using npx quasar
I could see the GUI on the browser when I run vue ui command, and then when creating a project, I selected the npm as the Package Manager from the dropdown list and on the Preset section I chose the default (babel, eslint), but when I click on Create Project button I get NO_MODULES error. I then checked the terminal to see this error below
$ vue ui
🚀 Starting GUI...
🌠Ready on http://localhost:8000
Error: NO_MODULES
at importProject (C:\Users\xxxx\AppData\Roaming\npm\node_modules#vue\cli\node_modules#vue\cli-ui\apollo-server\connectors\projects.js:363:11)
at progress.wrap (C:\Users\xxxx\AppData\Roaming\npm\node_modules#vue\cli\node_modules#vue\cli-ui\apollo-server\connectors\projects.js:355:12)
at process._tickCallback (internal/process/next_tick.js:68:7)
$ node --version
v10.16.2
$ vue --version
#vue/cli 4.1.2
Please advise what should be done.
Check your NODE_ENV
echo $NODE_ENV
NODE_ENV=development
I am trying out tailwindcss with my Vue project and while I solved some issue I had with the routing (while trying to break down my code into smaller components), I think I broke something else.
The code was compiling before I added my new routes. I can't seem to find what is wrong in this case.
Failed to compile.
./src/components/SiteHeader.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SiteHeader.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Cannot find module 'tailwindcss'
you can check out this repo, has very few files https://github.com/anaivanm/vue-tw/
First :
npm run dev
Then
npm install -D tailwindcss#latest postcss#latest autoprefixer#latest
For More Info :
Tailwind Docs
Also check this out :Restarting NPM