framework
framework copied to clipboard
nuxt
RC6/RC10 cannot build project after some updates
Environment
Before update:
- Operating System:
Darwin - Node Version:
v16.15.1 - Nuxt Version:
3.0.0-rc.6 - Nitro Version:
0.4.24 - Package Manager:
[email protected] - Builder:
vite - User Config:
ssr,css,buildModules,runtimeConfig,build,components,meta,vite - Runtime Modules:
- - Build Modules:
@pinia/[email protected],@vueuse/[email protected]
After update:
- Operating System:
Darwin - Node Version:
v16.15.1 - Nuxt Version:
3.0.0-rc.10 - Nitro Version:
0.5.3 - Package Manager:
[email protected] - Builder:
vite - User Config:
ssr,css,buildModules,runtimeConfig,build,components,meta,vite - Runtime Modules:
- - Build Modules:
@pinia/[email protected],@vueuse/[email protected]
Reproduction
package.json:
{
"name": "angv_tool",
"version": "1.7.0",
"private": true,
"engines": {
"node": "16.15",
"npm": "8.9"
},
"scripts": {
"dev": "nuxi dev",
"build": "nuxi build",
"start": "node .output/server/index.mjs",
"deploy": "bash scripts/deploy_patch.sh",
"deploy:patch": "bash scripts/deploy_patch.sh",
"deploy:minor": "bash scripts/deploy_minor.sh",
"deploy:major": "bash scripts/deploy_major.sh",
"lint": "eslint . --ext .ts,.js,.vue"
},
"devDependencies": {
"@nuxtjs/eslint-config-typescript": "^9.0.0",
"@typescript-eslint/eslint-plugin": "^5.21.0",
"@typescript-eslint/parser": "^5.21.0",
"autoprefixer": "^10.4.2",
"eslint": "^8.14.0",
"eslint-plugin-vue": "^8.7.1",
"nuxt": "3.0.0-rc.6",
"postcss": "^8.4.6",
"prettier": "2.6.2",
"sass": "^1.49.7",
"sass-loader": "^12.6.0",
"tailwindcss": "^3.0.23",
"typescript": "^4.6.3",
"vite-plugin-eslint": "^1.6.0"
},
"dependencies": {
"@intlify/nuxt3": "^0.1.10",
"@nuxtjs/axios": "^5.13.6",
"@pinia/nuxt": "^0.3.1",
"@tiptap/extension-bullet-list": "^2.0.0-beta.26",
"@tiptap/extension-color": "^2.0.0-beta.9",
"@tiptap/extension-image": "^2.0.0-beta.27",
"@tiptap/extension-link": "^2.0.0-beta.36",
"@tiptap/extension-list-item": "^2.0.0-beta.20",
"@tiptap/extension-table": "^2.0.0-beta.48",
"@tiptap/extension-table-cell": "^2.0.0-beta.20",
"@tiptap/extension-table-header": "^2.0.0-beta.22",
"@tiptap/extension-table-row": "^2.0.0-beta.19",
"@tiptap/extension-text-style": "^2.0.0-beta.23",
"@tiptap/extension-underline": "^2.0.0-beta.23",
"@tiptap/starter-kit": "^2.0.0-beta.183",
"@tiptap/vue-3": "^2.0.0-beta.90",
"@vueuse/nuxt": "^7.6.2",
"click-outside-vue3": "^4.0.1",
"colorthief": "^2.3.2",
"js-cookie": "^3.0.1",
"pinia": "^2.0.17",
"socket.io-client": "^4.5.1",
"vue-i18n": "^9.2.2",
"vue-picture-cropper": "^0.5.1",
"vue3-circle-progress": "^1.0.7",
"vue3-popper": "^1.5.0"
}
}
nuxt.config.ts:
import { defineNuxtConfig } from 'nuxt'
import eslintPlugin from 'vite-plugin-eslint'
import runtimeConfig from './config/runtimeConfig'
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
ssr: false,
css: ['~/assets/css/tailwind.css'],
buildModules: ['@pinia/nuxt', '@vueuse/nuxt'],
runtimeConfig,
build: {
postcss: {
postcssOptions: {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
}
},
components: [
{ path: '~/components', extensions: ['vue'] },
{ path: '~/components/common/', pathPrefix: false }
],
meta: {
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
vite: {
plugins: [eslintPlugin()]
}
})
Describe the bug
I was using RC6, then I removed node modules and did clean install of modules. Something have changed, because logs from dev and build looks different. Dev worked fine. I started to code, then next day after build it comes out that builded version doesnt work showing:
On Vercel:
Uncaught SyntaxError: Unexpected token '<' (at entry.163cef2a.js:1:1)
On yarn start:
localhost/:5 GET http://localhost:3000/_nuxt/entry.9bebd5ed.css net::ERR_ABORTED 404 (Cannot find static asset /_nuxt/entry.9bebd5ed.css)
localhost/:9 GET http://localhost:3000/_nuxt/entry.0c97c0a8.js net::ERR_ABORTED 404 (Cannot find static asset /_nuxt/entry.0c97c0a8.js)
I tried to update to RC10, but now nothing is working, when I start dev I see error:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
build fails with error message:
ERROR [vite:load-fallback] Could not load /Users/filiptobiasz/Documents/Projekty/angvalion-tool/.nuxt/components (imported by components/A/Button.vue?vue&type=script&setup=true&lang.ts): ENOENT: no such file or directory, open '/Users/filiptobiasz/Documents/Projekty/angvalion-tool/.nuxt/components'
ERROR Could not load /Users/filiptobiasz/Documents/Projekty/angvalion-tool/.nuxt/components (imported by components/A/Button.vue?vue&type=script&setup=true&lang.ts): ENOENT: no such file or directory, open '/Users/filiptobiasz/Documents/Projekty/angvalion-tool/.nuxt/components'
error Command failed with exit code 1.
I am unable to push new changes to my app, right now. What should I do?
Additional context
No response
Logs
No response
What imports are in components/A/Button.vue?
Have you tried rolling back to RC5?
How about trying to update everything (with npm outdated then npm update $THE_OUTDATED_PACKAGE)?
What about using fileURLToPath in path property of components array in config? From the docs: path: fileURLToPath(new URL('./components', import.meta.url)),, not sure if that matters.
Would you check if you have any service workers installed? Try an incognito tab and see if that is any different.
For anything else, I'd probably need to see a reproduction.
This could probably be related to this issue: https://github.com/vuejs/core/pull/6652, I'm waiting for vue team to make a new release. @BobidaHombre Try updating to rc8 instead. The issue comes after version "3.2.38" of vue used on RC9
(You can also try pinning the version of vue you're using by installing it explicitly or using npm overrides or yarn resolutions.)
(You can also try pinning the version of vue you're using by installing it explicitly or using npm overrides or yarn resolutions.)
Vue team just released [email protected] so this, while helpful should (at the moment) no longer be necessary
I ma able to use my RC6 version, but newer versions of nuxt still produces the same error as before:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
I tried RC12, also I added resolution to [email protected]. Nothing works :/
@danielroe I can send You in DM link to Gitlab repo. I don't want to post it publicly :/
@BobidaHombre Multiple things after analizing the config you shared.
- buildModules is deprecated, use modules instead.
- move your postcss config to vite.css.postcss.plugins thus removing build property
- all files on component folder are autoimported so you don't need to declare them here. Make sure to use the recommended convention to use them on your project. ComponentName or FolderComponentName if it is in a folder inside /components directory.
Please try that out and let me know how it goes
@BobidaHombre You are welcome to do so; the best thing, however, is to create a shareable minimal github repository or stackblitz. See the documentation for how to create a minimal reproduction.
@vis97c Didn't worked
@danielroe I got minimal reproduction: https://stackblitz.com/edit/github-xuuswj?file=tailwind.config.js
@BobidaHombre Take a look at this fork https://stackblitz.com/edit/github-xuuswj-ptdh9u?file=package.json
Removed the conflicting packages and had to install defu for some unknown reason #7168. Delete node_modules & package-lock on your local enviroment, remove defu & reinstall. It would probably solve that.
The commented lines should work once you add the propper files.
The axios & eslint packages you where using are for nuxt2, try to use vanila versions with a custom composable or look for compatible versions. The other dependencies are not required on nuxt and are already included. Let me know how it goes this time.
Did exactly as You said, just added additionally vanilla axios (I need it). Still have the same issue :V
Did exactly as You said, just added additionally vanilla axios (I need it). Still have the same issue :V
Did you? Is hard to do something else from my side. The repro doesn't have all of the conflicting files you mentioned. Please analize the last repro I shared and/or provide a better one.
I did everything one more time - without removing @nuxtjs/eslint-config-typescript. It works :D Thank You!