Ability to import source as raw/url

[maxsbelt]

I have a form where user should upload file in .csv format and there is an example of such file. So I need to:

• display the content of this file in the page (e.g. load it as a string with /path/to/file/filename.csv?raw)
• display the link to the file example for downloading (e.g. load it as a url with /path/to/file/filename.csv?url)

It works in vite and I saw something similar in the documentation:
https://www.rspack.dev/config/module#ruleresourcequery

But seems like it doesn't work:

raw	url

Is it supported?

[chenjiahan]

Try this:

// rsbuild.config.ts
export default defineConfig({
  tools: {
    rspack: {
      module: {
        rules: [
          {
            resourceQuery: /url$/,
            type: 'asset/resource',
          },
          {
            resourceQuery: /raw$/,
            type: 'asset/source',
          },
        ],
      },
    },
  },
});

[maxsbelt]

That works, thanks!

[ulivz]

@chenjiahan Thanks for this solution, when I configure it like this and try to import a tsx, I encounter react/jsx-dev-runtime injected into the bundled code. Is there a possible solution here?

Expected raw code:

// src/hello-world.tsx
export const HelloWorld = () => {
  return <div>Hello world</div>
};

Usage:

// src/index.tsx
import Source from './hello-world?raw';

value of Source:

import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
export const HelloWorld = ()=>{
    return /*#__PURE__*/ _jsxDEV("div", {
        children: "Hello world"
    }, void 0, false, {
        fileName: "...",
        lineNumber: 2,
        columnNumber: 10
    }, this);
};
_c = HelloWorld;
var _c;
$RefreshReg$(_c, "HelloWorld");

function $RefreshSig$() {
  return $ReactRefreshRuntime$.createSignatureFunctionForTransform();
}
function $RefreshReg$(type, id) {
  $ReactRefreshRuntime$.register(type, __webpack_module__.id + "_" + id);
}
Promise.resolve().then(function() {
  $ReactRefreshRuntime$.refresh(__webpack_module__.id, __webpack_module__.hot);
});

[chenjiahan]

This is indeed an issue that needs to be addressed. I will add an option in @rspack/plugin-react-refresh to allow excluding certain files based on resourceQuery.

Related code: https://github.com/rspack-contrib/rspack-plugin-react-refresh/blob/main/src/index.ts#L82-L91

[chenjiahan]

Try this:

1. Update @rsbuild/plugin-react to v1.3.1

2. Add custom config to rsbuild.config.ts:

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [
    pluginReact({
      reactRefreshOptions: {
        resourceQuery: { not: /raw/ },
      },
    }),
  ],
  tools: {
    bundlerChain(chain, { CHAIN_ID }) {
      chain.module.rule('source').resourceQuery(/raw$/).type('asset/source');
      chain.module.rule(CHAIN_ID.RULE.JS).resourceQuery({ not: /raw/ });
    },
  },
});

The above configuration is still a bit complicated and can be used as a workaround. I am planning to add built-in ?raw query support for JS/TS modules in Rsbuild core.

[chenjiahan]

Rsbuild v1.4.0-beta.1 now provides built-in support for .tsx?raw, see:

• Release note: https://github.com/web-infra-dev/rsbuild/releases/tag/v1.4.0-beta.1
• Documentation: https://rsbuild.rs/guide/basic/static-assets#import-as-string