Nuxt•2y ago

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

As described in the title

?raw

?raw

?raw

?raw works in vite but not in rollup. Simple steps to reproduce:

npx nuxi@latest init raw

npx nuxi@latest init raw

npx nuxi@latest init raw

npx nuxi@latest init raw

add

app.css

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;
}

/* 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

app.vue

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>

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

npm run dev

works.

npm run generate

npm run generate

npm run generate

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)

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

?raw

?raw

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

// declarations.d.ts

declare module "*?raw" {
    const src: string
    export default src
}

// declarations.d.ts

declare module "*?raw" {
    const src: string
    export default src
}

manniL•3/7/24, 12:08 AM

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

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

dreamlandOP•3/7/24, 12:09 AM

no.

npm run build

npm run build

gives the same error

Ddreamland no. `npm run build` gives the same error

manniL•3/7/24, 12:11 AM

yeah, seems like a rollup issue then indeed

MmanniL yeah, seems like a rollup issue then indeed 🤔

dreamlandOP•3/7/24, 12:19 AM

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

dreamlandOP•3/7/24, 12:31 AM

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

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

manniL•3/7/24, 12:44 AM

feel free to raise an issue + link this discussion

dreamlandOP•3/7/24, 11:52 AM

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

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

Similar Threads

Similar Threads

Similar Threads