I am trying to npm run dev my nuxt js vue3 project. And I get error:
My package.json:
{
"name": "my-project",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"core-js": "^3.25.3",
"nuxt": "^2.15.8",
"vue": "^3.0.0-rc.8",
"vue-server-renderer": "^2.7.14",
"vue-template-compiler": "^2.7.10"
},
"devDependencies": {
"node-sass": "^8.0.0",
"sass-loader": "^13.2.0"
}
}
How make it work in compatibility?
You should probably replace
vue-server-renderer+ vue-template-compiler
by
#vue/compiler-sfc + #vue/server-renderer
Also, I'm not sure why you're using an RC version for Vue3, use the latest aka v3.2.45 at the time of writing.
As for Nuxt, Nuxt2 is aimed towards usage with Vue2.
Nuxt's latest stable version for Vue3 is v3.0.0.
At that point, if you are starting a new project, consider using the CLI for such a purpose (don't forget to respect the prerequisites).
Related
After the following steps
install a clean Vue3/Vite application as outlined in the docs (Vue application runs correctly)
install Storybook as describes in the docs
run Storybook (npm run storybook)
I run into the following error:
importers[path] is not a function
TypeError: importers[path] is not a function
at StoryStore2.importFn (http://localhost:6006/virtual:/#storybook/builder-vite/storybook-stories.js:6:31)
at StoryStore2.loadCSFFileByStoryId (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2297:19)
at StoryStore2._callee2$ (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2355:29)
at tryCatch (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-IKIHLHDP.js?v=58e9ae5a:46:44)
at Generator.invoke (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-IKIHLHDP.js?v=58e9ae5a:213:26)
at Generator.next (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-IKIHLHDP.js?v=58e9ae5a:87:25)
at asyncGeneratorStep2 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2140:24)
at _next (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2158:9)
What could be wrong here and how can this be solved?
Apparently the following steps will create a clean Vue 3/Vite/Storybook installation:
npm create vite#latest
Project name: <project name>
Select a framework: Vue
Select a variant: Typescript
cd <project name>
npm install
npx storybook init --builder #storybook/builder-vite --type vue3
npm install #storybook/builder-vite#0.3 --save-dev (mdx stories are not working with version 0.4)
npm run storybook
It creates the following package.json:
{
"name": "Test project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"vue": "^3.2.45"
},
"devDependencies": {
"#babel/core": "^7.20.12",
"#storybook/addon-actions": "^6.5.16",
"#storybook/addon-essentials": "^6.5.16",
"#storybook/addon-interactions": "^6.5.16",
"#storybook/addon-links": "^6.5.16",
"#storybook/builder-vite": "^0.3.0",
"#storybook/testing-library": "^0.0.13",
"#storybook/vue3": "^6.5.16",
"#vitejs/plugin-vue": "^4.0.0",
"babel-loader": "^8.3.0",
"typescript": "^4.9.3",
"vite": "^4.1.0",
"vue-loader": "^16.8.3",
"vue-tsc": "^1.0.24"
}
}
I have almost the same problem as this question :
PostCSS 8 Error When Installing Tailwind CSS in Vue 3 (v3.2.10) without Vite (PostCSS 8 is supported)
I followed Flydev's answer and performed the same procedure :
vue create new-project
cd new-project
npm install -D #vue/compiler-sfc tailwindcss#latest postcss#latest autoprefixer#latest
npm run serve
Node and Vue/cli versions are perfect. I made the changes in my package.json folder, delete package-lock.json and then run npm install
My package.json :
{
"name": "new-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.2.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.13",
"#vue/compiler-sfc": "^3.2.21",
"autoprefixer": "^10.4.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"postcss": "^8.3.11",
"tailwindcss": "^2.2.19"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
npm run serve works ! Great ! But not Tailwind :(
So I looked at the documentation on the TailwindCSS site https://tailwindcss.com/docs/guides/vue-3-vite and I think I'm missing some manipulations to do
So I did "npx tailwindcss init -p" to create the tailwind.config.js and postcss.config.js files, but after this manipulation, the npm run serve gave me the same error as before.
I really don't understand ... It tells me to need PostCSS8 even though I have version8.3.11
I did some tests, I tried to create the tailwind.config.js and postcss.config.js files myself, no problem with tailwind.config.js, but from the moment I create the postcss.config.js file and start npm run serve the error message comes back.
I wonder if we can do a VueJS project with Tailwind without Vite now...
Thank you for your help ! :)
I'm trying to run a simple vue.js app. My setup is a vue.js 3 app with vite, built according to the tutorial on the official website. (https://vitejs.dev/guide/#command-line-interface)
Now I try to deploy that on a cloud and I need the command to run the app. I don't find any information about that. My package.json is lacking the entry for start or run. I don't find any information about the command on the official website. What am I missing?
package.json
{
"name": "my-vite-app",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"vue": "^3.0.4"
},
"devDependencies": {
"#vue/compiler-sfc": "^3.0.4",
"autoprefixer": "^10.3.5",
"postcss": "^8.3.7",
"tailwindcss": "^2.2.15",
"vite": "^1.0.0-rc.13"
}
}
You can do it with preview. documentation
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
then
$ npm run build
$ npm run preview
According to the official docs, "vite build" will create the prod build using your index.html file as entry point. You can also specify another publich patch. Check it out.
This is the error:
I have tried all of the things in the Github issue, in the error description and in this question, to no avail.
Here is my package.json:
{
"name": "MyAppName",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-expo": "^24.0.0",
"react-native-scripts": "1.8.1",
"react-test-renderer": "16.2.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"core-js": "^2.5.3",
"expo": "^24.0.2",
"react": "^16.2.0",
"react-native": "^0.51.0",
"react-native-awesome-alerts": "^1.0.3",
"react-native-barcode-builder": "^1.0.2",
"react-native-communications": "^2.2.1",
"react-native-hyperlink": "^0.0.11",
"react-native-image-pan-zoom": "^2.0.16",
"react-native-image-zoom-viewer": "^2.0.18",
"react-native-open-maps": "^0.1.1",
"react-native-swiper": "^1.5.13",
"react-native-vector-icons": "^4.4.2",
"react-navigation": "^1.0.0-beta.22",
"rn-viewpager": "^1.2.9"
}
}
FOR ANY FUTURE VIEWERS: This was a dependency issue. If you are using version control, copy your old dependencies into your current package.json
This was a dependency issue. If you are using version control, copy your old dependencies into your current package.json
I couldn't figure out what was wrong so I simply re-cloned my project from GitHub and copied my code over.
Move into your Project folder :
rm -rf node_modules
npm install
Inside package.json. Check if all the modules are present.
react-native start --reset-cache
For me only downgrade npm from 6.1.0 to 6.0.0 helped: npm i -g npm#6.0.0
Unable to resolve module from : Module does not exist in the module map or in these directories:
We’ve found that this error is generally caused by using wildcards (^ or ~) in your package.json.
Our recommendation is to either remove the wildcards, or to move to using yarn and committing your yarn.lock.
The problem comes soon after react-native init tech_stack1, react-native run-iso command and the last Xcode update (9.1).
It alternate with "No bundle URL present".
This my package.json
"name": "tech_stack1",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0",
"react-native": "0.50.0"
},
"devDependencies": {
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"jest": "21.2.1",
"react-test-renderer": "16.0.0"
},
"jest": {
"preset": "react-native"
}
After some upgrades to #latest versions of react-native, redux and react-redux I was able to get rid of this error, also by performing a react-native start command in a new terminal window ( to get rid of no bundle URL present).