v3.0.0-rc.9

[pi0]

Release notes: v3.0.0-rc.9

Highlights:

• ✅ app.config.ts with HMR and Reactivity support
• ✅ Updated to nitropack@0.5.x
• ✅ Vite-Node enabled by default (#6217)
• ⚠️ autoImports option and hooks is deprecated and renamed to imports (#6864) (#7158)
• ⚠️ Vue dependency is now externalized (#6868)
• ⚠️ Handle prerelease constraint (#7116)
  • 👉 If you see an error like Nuxt version ^3.0.0 is required but currently using 3.0.0-rc.9, please contact the module author.

[AndreyYolkin]

Tried with bridge and got bug with Nuxt compatibility check. I will open issue and PR in addition to this reply
Shortly:
https://github.com/nuxt/framework/blob/main/packages/kit/src/compatibility.ts#L14

[pi0]

Thanks for the notice! I think fixing issue with nuxt-edge releases instead to use same 7 digit naming for consistency and also hot fix for bridge. BTW PR welcome to fix regex accepting 7 or 8 (search in code, there are two places using {7})

[AndreyYolkin]

yes, I'm currently working on it 💪

[kstraszewski]

Hi I'm getting couple of warnings like this:

 WARN  Module nuxt-jsonld is disabled due to incompatibility issues:                                                                                              19:39:56
 - [nuxt] Nuxt version `^3.0.0` is required but currently using `3.0.0-rc.9`

Is there any way to enable them?

[pi0]

PR already made by @danielroe ymmooot/nuxt-jsonld#952

[kstraszewski]

Love you guys!!

[kstraszewski]

After building and serving an app I am getting this errors now and CSS does not load at all. The CSS files are building properly.

[danielroe]

Would you open a new issue with a reproduction? 🙏

[kstraszewski]

ofc, but tomorrow :) But it is a regular production build and serve. It might be vuetify fault coz it loads lots of css

[kstraszewski]

Hi @danielroe I've posted the issue https://github.com/nuxt/framework/issues/7217

[some-user123]

useFetch<T> is now retuning data attribute with type Ref<T | null> instead of Ref<T>. Similarly for useAsyncData. Is that intended? Breaks code that relies on the type...

In principle that makes sense, because data will be null if an error occured. But narrowing down the type seems to only apply in <script> not to the template (cf. https://stackblitz.com/edit/nuxt-starter-efngmc?file=app.vue)

[SnowGuest]

I am confused by this error.
He didn't tell me at all what module was missing.
Project is normal in Nuxt Rc.8.

[Mabi19]

I have the same issue, but with Yarn (1.22.17). My dependencies (other than Nuxt) are some packages for DB access and utilities on the server-side and Tiptap with the Vue 3 integration.

[benoitdemaegdt]

I only have this issue when I run npm run dev
=> npm run generate and npm run build are ok, no error 🤔

[raducretu]

i have the same error "ERR_MODULE_NOT_FOUND" on npm, and it's very strange it's only happens on my personal laptop, on my office iMac it works

[benoitdemaegdt]

That is very strange indeed. Here is what I tried so far :
1/ Removing few nuxt modules and see if i get rid of this error => no success 🔴
2/ Start a new nuxt project and add some of these modules => no error, it works.

I'll try to clone and run the project on another computer 🤔

[raducretu]

i tried edge channel also, using different node version, removing all modules, same thing:

• Operating System: Darwin
• Node Version: v16.13.1
• Nuxt Version: 3.0.0-rc.10-27718444.40d0907
• Nitro Version: 0.5.2-27718085.c24dbcf
• Package Manager: npm@8.3.0
• Builder: vite
• User Config: publicRuntimeConfig, buildModules, css, build, modules, intlify
• Runtime Modules: @intlify/nuxt3@0.2.4, @vueuse/nuxt@9.2.0
• Build Modules: @pinia/nuxt@0.4.2, @nuxtjs/tailwindcss@5.3.3

[sweetroll]

Fresh install using npx nuxi init on Node 16.17.0

[Lucky-Strike1695]

Same here, 500 error on localhost https (upgraded from rc8).

[cwe-spb]

same problems. it's but from https dev
related to unjs/ofetch#120
init bug -https://github.com/nuxt/framework/issues/7468

[danielroe]

FYI, this was resolved in the edge channel a week ago via nuxt/framework#7271.

[cwe-spb]

@danielroe i tried use edge, but problem not a solved( ill wait rc10 :D

[danielroe]

if it's not solved then please open an issue so we can fix it for rc10 😉

[konradsienkowski]

Hey, after updating to the RC 9 running npm run dev works fine, but trying to use npm run build and preview the build results with an error in the console:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

None of the nuxt.config.ts proposed solutions mentioned in that issue works in my case. I was using node v16.15.1, updating to v16.17.0 didn't help

[danielroe]

Would you raise a new issue with a minimal reproduction? It sounds like a possible mismatch between your nuxt + @nuxt/vite-builder versions.

[konradsienkowski]

I'm trying to, but it's quite a complex app so trimming it down takes some time. Based on node_modules content, the @nuxt/vite-builder version specified in its package.json is also 3.0.0-rc.9.

[konradsienkowski]

@danielroe issue is here: https://github.com/nuxt/framework/issues/7285

[Silbad]

Hello,
I have a new warning with rc9 :
WARN autoImports:extend hook is deprecated. Use addImports() from @nuxt/kit or imports:extend with nuxt>=3.0.0-rc.9.
any idea ?
Thanks

[danielroe]

This likely comes from a module. You can ignore for now, but if you can tell which module it is, feel free to open an issue to tell them.

[raducretu]

I updated a RC8 to RC9 and I get this error:

ERROR Error while formatting vite error: { pos: 2431, loc: { line: 64, column: 4 }, raisedAt: 2432, plugin: 'nuxt:composable-keys', id: '/Users/raducretu/Work/keybox-admin/node_modules/nuxt/dist/pages/runtime/router.mjs', pluginCode: 'import { computed, reactive, shallowRef } from "vue";\n' + 'import {\n' + ' createRouter,\n' + ' createWebHistory,\n' + ' createMemoryHistory\n' + '} from "vue-router";\n' + 'import { createError } from "h3";\n' + 'import { withoutBase, isEqual } from "ufo";\n' + 'import NuxtPage from "./page.mjs";\n' + 'import { callWithNuxt, defineNuxtPlugin, useRuntimeConfig, showError, clearError, navigateTo, useError, useState } from "#app";\n' + 'import routes from "#build/routes";\n' + 'import routerOptions from "#build/router.options";\n' + 'import { globalMiddleware, namedMiddleware } from "#build/middleware";\n' + 'function createCurrentLocation(base, location) {\n' + ' const { pathname, search, hash } = location;\n' + ' const hashPos = base.indexOf("#");\n' + ' if (hashPos > -1) {\n' + ' const slicePos = hash.includes(base.slice(hashPos)) ? base.slice(hashPos).length : 1;\n' + ' let pathFromHash = hash.slice(slicePos);\n' + ' if (pathFromHash[0] !== "/") {\n' + ' pathFromHash = "/" + pathFromHash;\n' + ' }\n' + ' return withoutBase(pathFromHash, "");\n' + ' }\n' + ' const path = withoutBase(pathname, base);\n' + ' return path + search + hash;\n' + '}\n' + 'export default defineNuxtPlugin(async (nuxtApp) => {\n' + ' nuxtApp.vueApp.component("NuxtPage", NuxtPage);\n' + ' nuxtApp.vueApp.component("NuxtNestedPage", NuxtPage);\n' + ' nuxtApp.vueApp.component("NuxtChild", NuxtPage);\n' + ' const baseURL = useRuntimeConfig().app.baseURL;\n' + ' const routerHistory = false ? createWebHistory(baseURL) : createMemoryHistory(baseURL);\n' + ' const initialURL = true ? nuxtApp.ssrContext.url : createCurrentLocation(baseURL, window.location);\n' + ' const router = createRouter({\n' + ' ...routerOptions,\n' + ' history: routerHistory,\n' + ' routes\n' + ' });\n' + ' nuxtApp.vueApp.use(router);\n' + ' const previousRoute = shallowRef(router.currentRoute.value);\n' + ' router.afterEach((_to, from) => {\n' + ' previousRoute.value = from;\n' + ' });\n' + ' Object.defineProperty(nuxtApp.vueApp.config.globalProperties, "previousRoute", {\n' + ' get: () => previousRoute.value\n' + ' });\n' + ' const _route = shallowRef(router.resolve(initialURL));\n' + ' const syncCurrentRoute = () => {\n' + ' _route.value = router.currentRoute.value;\n' + ' };\n' + ' nuxtApp.hook("page:finish", syncCurrentRoute);\n' + ' router.afterEach((to, from) => {\n' + ' if (to.matched[0]?.components?.default === from.matched[0]?.components?.default) {\n' + ' syncCurrentRoute();\n' + ' }\n' + ' });\n' + ' const route = {};\n' + ' for (const key in _route.value) {\n' + ' route[key] = computed(() => _route.value[key]);\n' + ' }\n' + ' nuxtApp._route = reactive(route);\n' + ' nuxtApp._middleware = nuxtApp._middleware || {\n' + ' {}: [],\n' + ' named: {}\n' + ' };\n' + ' const error = useError();\n' + ' try {\n' + ' if (true) {\n' + ' await router.push(initialURL);\n' + ' }\n' + ' await router.isReady();\n' + ' } catch (error2) {\n' + ' callWithNuxt(nuxtApp, showError, [error2]);\n' + ' }\n' + ' const initialLayout = useState("_layout");\n' + ' router.beforeEach(async (to, from) => {\n' + ' to.meta = reactive(to.meta);\n' + ' if (nuxtApp.isHydrating) {\n' + ' to.meta.layout = initialLayout.value ?? to.meta.layout;\n' + ' }\n' + ' nuxtApp._processingMiddleware = true;\n' + ' const middlewareEntries = /* @__PURE__ */ new Set([...globalMiddleware, ...nuxtApp._middleware.global]);\n' + ' for (const component of to.matched) {\n' + ' const componentMiddleware = component.meta.middleware;\n' + ' if (!componentMiddleware) {\n' + ' continue;\n' + ' }\n' + ' if (Array.isArray(componentMiddleware)) {\n' + ' for (const entry of componentMiddleware) {\n' + ' middlewareEntries.add(entry);\n' + ' }\n' + ' } else {\n' + ' middlewareEntries.add(componentMiddleware);\n' + ' }\n' + ' }\n' + ' for (const entry of middlewareEntries) {\n' + ' const middleware = typeof entry === "string" ? nuxtApp._middleware.named[entry] || await namedMiddleware[entry]?.().then((r) => r.default || r) : entry;\n' + ' if (!middleware) {\n' + ' if (true) {\n' + ' throw new Error(Unknown route middleware: '${entry}'. Valid middleware: ${Object.keys(namedMiddleware).map((mw) => \'${mw}\').join(", ")}.);\n' + ' }\n' + " throw new Error(Unknown route middleware: '${entry}'.);\n" + ' }\n' + ' const result = await callWithNuxt(nuxtApp, middleware, [to, from]);\n' + ' if (true || !nuxtApp.payload.serverRendered && nuxtApp.isHydrating) {\n' + ' if (result === false || result instanceof Error) {\n' + ' const error2 = result || createError({\n' + ' statusMessage: Route navigation aborted: ${initialURL}\n' + ' });\n' + ' return callWithNuxt(nuxtApp, showError, [error2]);\n' + ' }\n' + ' }\n' + ' if (result || result === false) {\n' + ' return result;\n' + ' }\n' + ' }\n' + ' });\n' + ' router.afterEach(async (to) => {\n' + ' delete nuxtApp._processingMiddleware;\n' + ' if (false && !nuxtApp.isHydrating && error.value) {\n' + ' await callWithNuxt(nuxtApp, clearError);\n' + ' }\n' + ' if (to.matched.length === 0) {\n' + ' callWithNuxt(nuxtApp, showError, [createError({\n' + ' statusCode: 404,\n' + ' fatal: false,\n' + ' statusMessage: Page not found: ${to.fullPath}`\n' +
' })]);\n' +
' } else if (true && to.matched[0].name === "404" && nuxtApp.ssrContext) {\n' +
' nuxtApp.ssrContext.event.res.statusCode = 404;\n' +
' } else if (true) {\n' +
' const currentURL = to.fullPath || "/";\n' +
' if (!isEqual(currentURL, initialURL)) {\n' +
' await callWithNuxt(nuxtApp, navigateTo, [currentURL]);\n' +
' }\n' +
' }\n' +
' });\n' +
' nuxtApp.hooks.hookOnce("app:created", async () => {\n' +
' try {\n' +
' await router.replace({\n' +
' ...router.resolve(initialURL),\n' +
' name: void 0,\n' +
' force: true\n' +
' });\n' +
' } catch (error2) {\n' +
' callWithNuxt(nuxtApp, showError, [error2]);\n' +
' }\n' +
' });\n' +
' return { provide: { router } };\n' +
'});\n',
frame: '62 | nuxtApp._route = reactive(route);\n' +
'63 | nuxtApp._middleware = nuxtApp._middleware || {\n' +
'64 | {}: [],\n' +
' | ^\n' +
'65 | named: {}\n' +
'66 | };'
}

`