N
Nuxtdreamland

`?raw` import works in vite (`nuxt dev`) but not in rollup (`nuxt generate`)

As described in the title ?raw works in vite but not in rollup. Simple steps to reproduce: npx nuxi@latest init raw add app.css
/* app.css */

.raw {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: black;
}
/* app.css */

.raw {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: black;
}
edit app.vue
<!-- app.vue -->

<script setup lang="ts">

import appcss from "~/app.css?raw"

useHead({
style: [appcss]
})

</script>

<template>
<div class="raw">
</div>
</template>
<!-- app.vue -->

<script setup lang="ts">

import appcss from "~/app.css?raw"

useHead({
style: [appcss]
})

</script>

<template>
<div class="raw">
</div>
</template>
npm run dev works. npm run generate results in following error.
Nuxt Build Error: Expression expected (Note that you need plugins to import files that are not JavaScript)
file: C:/some/path/raw/app.css?raw?inline&used:3:0
1: /* app.css */
2:
3: .raw {
^
4: width: 100%;
5: height: 100%;

at getRollupError (/C:/some/path/raw/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
at ParseError.initialise (/C:/some/path/raw/node_modules/rollup/dist/es/shared/node-entry.js:11155:28)
at convertNode (/C:/some/path/raw/node_modules/rollup/dist/es/shared/node-entry.js:12895:10)
at convertProgram (/C:/some/path/raw/node_modules/rollup/dist/es/shared/node-entry.js:12215:12)
at Module.setSource (/C:/some/path/raw/node_modules/rollup/dist/es/shared/node-entry.js:14039:24)
at async ModuleLoader.addModuleSource (/C:/some/path/raw/node_modules/rollup/dist/es/shared/node-entry.js:18689:13)
Nuxt Build Error: Expression expected (Note that you need plugins to import files that are not JavaScript)
file: C:/some/path/raw/app.css?raw?inline&used:3:0
1: /* app.css */
2:
3: .raw {
^
4: width: 100%;
5: height: 100%;

at getRollupError (/C:/some/path/raw/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
at ParseError.initialise (/C:/some/path/raw/node_modules/rollup/dist/es/shared/node-entry.js:11155:28)
at convertNode (/C:/some/path/raw/node_modules/rollup/dist/es/shared/node-entry.js:12895:10)
at convertProgram (/C:/some/path/raw/node_modules/rollup/dist/es/shared/node-entry.js:12215:12)
at Module.setSource (/C:/some/path/raw/node_modules/rollup/dist/es/shared/node-entry.js:14039:24)
at async ModuleLoader.addModuleSource (/C:/some/path/raw/node_modules/rollup/dist/es/shared/node-entry.js:18689:13)
I'm currently trying to convince rollup to understand the ?raw import like vite does using the following, but I'm not sure how, or if that would even work..
// declarations.d.ts

declare module "*?raw" {
const src: string
export default src
}
// declarations.d.ts

declare module "*?raw" {
const src: string
export default src
}
M
manniL41d ago
does it also work when running npm run build (and then starting the node server)?
D
dreamland41d ago
no. npm run build gives the same error
M
manniL41d ago
yeah, seems like a rollup issue then indeed 🤔
D
dreamland41d ago
it's an offical vite feature https://vitejs.dev/guide/assets#importing-asset-as-string not sure if we are supposed to use that if rollup doesn't support it, but as you can see, i've used it because vite supports it and now i run into the issue with rollup. not sure if it can be supported, but the solution that vite has using the raw declartion seems so tangible. any idea how to add the declarations to the rollup options in the nuxt config?
export default defineNuxtConfig({
vite: {
build: {
rollupOptions: {
// how to reference declarations.d.ts here?
}
}
}
})
export default defineNuxtConfig({
vite: {
build: {
rollupOptions: {
// how to reference declarations.d.ts here?
}
}
}
})
D
dreamland41d ago
GitHub
Are ?raw imports supported? · nuxt nuxt · Discussion #19694
Vite allows importing an asset as a string using the ?raw suffix. When I try to do this with Nuxt, as far as I can tell it works as expected, however it’s not part of the default type definition pr...
M
manniL41d ago
feel free to raise an issue + link this discussion 🙂
D
dreamland41d ago
workaround for the meantime
// app.css.ts

export default `
.raw {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: black;
}
`
// app.css.ts

export default `
.raw {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: black;
}
`
<!-- app.vue -->

<script setup lang="ts">

import appcss from "~/app.css"

useHead({
style: [appcss]
})

</script>

<template>
<div class="raw">
</div>
</template>
<!-- app.vue -->

<script setup lang="ts">

import appcss from "~/app.css"

useHead({
style: [appcss]
})

</script>

<template>
<div class="raw">
</div>
</template>
pretty spartanic but gets the job done in the most straightforward and stable way
Want results from more Discord servers?
Add your server
More Posts
SPA w/ SEO or SSG + nitro?i'm creating a SPA and i've opted to use nuxt because of the ease of development (especially for theStrange error when i start my applicationWhen i launch nuxt, i have an 503 error and i cant acces to localhost:3000. I have tried to clear brError with i18n and sitemapI get this error : "Plugin nuxt-site-config:i18n depends on i18n:plugin but they are not registereCheck inside plugin if running in dev modeI have created a plugin that sends nuxt/vue errors using some hooks to Sentry. I do however not wantIs anyone using application insights with Nuxt 3?Does anyone have applications insights working with Nuxt to track and log on the client and server? Nuxt theming options.I want to develop a Nuxt theming project similar to WordPress theming options. There will be 3 or 4 MicroFrontend vs Layer?Hello, I wonder what is the difference between MicroFrontends and the Layers in Nuxt? Does anyone knsearch page dont workit only shows the result of the first search, to show the results of other searches, the user has toserver middleware added to nuxt configHi all The docs say "Nuxt will automatically read in any file in the ~/server/middleware to create sError 500: A composable that requires access to the Nuxt instanceI have this error in my composable that I absolutely don't cromprend given that most of the code is Nuxt UI IconsCan please someone explain to me how to use Nuxt UI Icons ??? The documentation says : `Use the namawait useAsyncData in setup doesn't block navigationI want to wait until navigating to the next page until the store data has been fetched and set. I'm Intercepting RoutesHey dear NuxtCommunity! although I have experiences in React, I‘m pretty new to vue/nuxt. For a prHow too hook into a server response using Nuxt 3?I need to hook in the response of `/_ipx`. If the image is corrupted `/_ipx` will throw an error, beHydratation issue using pinia store (stackblitz reproduction)I'm having an issue with SSR rendering using pinia store. Here the issue : https://stackblitz.com/eShared types between server and vueWhere can I store zod schemas and types that will be used by both the backend and vue? (so that the