How to import js file as raw string?

[Trinovantes]

I have some client js that I want to import as raw string. In vite, I can append ?raw to my file path to get the raw string:

import client from './client.js?raw

Is there a cleaner way to do this in Bun than this loader?

import { plugin } from 'bun'

plugin({
    name: 'Raw Loader',
    setup: (build) => {
        build.onResolve({ filter: /\?raw$/ }, (args) => {
            return {
                path: args.path.replaceAll('?raw', ''),
            }
        })

        // Is there a better way than to hardcode client.js here?
        build.onLoad({ filter: /client\.js$/ }, async(args) => {
            const text = await Bun.file(args.path).text()
            return {
                exports: {
                    default: text,
                },
                loader: 'object',
            }
        })
    },
})

This doesn't seem very clean. I feel like onLoad should be able to return the exports object and bypass the onLoad callback to avoid having to hardcode client.js in the filter

[alexeyten]

Have you tried this?

import client from "./client.js" with { type: "text" };

[Trinovantes]

I've tried using with { type: "text" } but it doesn't work for me

[truongan07]

what does it say error ?

[Trinovantes]

Turns out I was running a very outdated version of bun (0.8.1)

It works without any plugin after running bun upgrade to the latest version 1.1.10

[meoyawn]

@Trinovantes how did you manage to make it work with both bun and vite/vitest ?

[Trinovantes]

I used import browserCode from './script.browser.js?raw' with { type: 'text' }

[yukulele]

It works with vite but not with bun

[jackholden]

Experiencing same issue with import styles from "./hello-world.css" with { type: "css" };

I end up with frontend ReferenceError: import_hello_world is not defined

Related to this issue: #18258