Nuxt•5mo ago

`?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
}

7 Replies

manniL•5mo ago

does it also work when running npm run build (and then starting the node server)?

dreamland•5mo ago

no. npm run build gives the same error

manniL•5mo ago

yeah, seems like a rollup issue then indeed 🤔

dreamland•5mo 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?
        }
    }
  }
})

dreamland•5mo ago

https://github.com/nuxt/nuxt/discussions/19694

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...

manniL•5mo ago

feel free to raise an issue + link this discussion 🙂

dreamland•5mo 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

Gaming

Programming

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