[Bug]: resourceQuery not work in

[ouzhou]

System Info

System:
OS: macOS 13.3
CPU: (10) arm64 Apple M2 Pro
Memory: 90.48 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
Yarn: 1.22.22 - ~/npm_global/bin/yarn
npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
pnpm: 8.6.3 - ~/npm_global/bin/pnpm
bun: 1.1.4 - ~/npm_global/bin/bun
Browsers:
Chrome: 126.0.6478.185
Edge: 127.0.2651.74
Safari: 16.4

Details

I want to import a ts type file to use as a string, to inject typing to monaco editor

The following code will report an error

i have tried enforce:'pre' and config.module!.noParse = /myType.ts/;
not work

// myType.ts
export type a = string;

// App.tsx
import str from "./myType.ts?raw";

console.log(str);

export default () => {
  return <div>{str}</div>;
};

// rsbuild.config.ts
import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";

export default defineConfig({
  plugins: [pluginReact()],
  tools: {
    rspack: (config, { addRules }) => {
      addRules({
        resourceQuery: /raw/,
        type: "asset/source",
      });
    },
  },
});

Reproduce link

No response

Reproduce Steps

just run code

[xc2]

You'd use config.module.rules.push(...) instead of addRules(...) to prioritize over all other builtin rules.

[xc2]

I'm transfering this issue to rsbuild as it pertains to rsbuild.

I'm closing this issue as won't fix because it appears to be usage question, a suggestion has been provided and resourceQuery is actually working.

Please feel free to continue this discussion if you have any further question on it.

--

BTW, addRules should be documented more detailed as it is actually prepending rules to the rule list.

[chenjiahan]

Yeah, we can update the doc for this

[ouzhou]

I don't think this is a document issue
Even when your method is applied, the result is still incorrect
@xc2 @chenjiahan

[ouzhou]

can we reopen this issue?

[chenjiahan]

If you want to get the TypeScript source code instead of the transformed JavaScript code, you should exclude the assets with ?raw from the Rsbuild built-in TypeScript transformation rules.

export default defineConfig({
  tools: {
    rspack: {
      module: {
        rules: [
          {
            resourceQuery: /raw/,
            type: 'asset/source',
          },
        ],
      },
    },
    bundlerChain(chain, { CHAIN_ID }) {
      // add this line
      chain.module.rule(CHAIN_ID.RULE.JS).resourceQuery({ not: /raw/ });
    },
  },
});

[ouzhou]

ok
by the way, vite or webpack can easily use ?raw No additional exclusion configuration is required

[chenjiahan]

I never knew that webpack supported this, can you provide some references?

[ouzhou]

vite
https://stackblitz.com/edit/vitejs-vite-z7xhqz?file=src%2FApp.tsx
i will provide webpack demo soon

[ouzhou]

webpack demo

please download in your mac and npm i && npm run start
i dont know why it can't runing in webcontainer but work good in local computer :P

https://stackblitz.com/edit/vitejs-vite-3kfqqu?file=src%2FmyType.ts

[ouzhou]

seems incorrect

If you want to get the TypeScript source code instead of the transformed JavaScript code, you should exclude the assets with ?raw from the Rsbuild built-in TypeScript transformation rules.

export default defineConfig({
  tools: {
    rspack: {
      module: {
        rules: [
          {
            resourceQuery: /raw/,
            type: 'asset/source',
          },
        ],
      },
    },
    bundlerChain(chain, { CHAIN_ID }) {
      // add this line
      chain.module.rule(CHAIN_ID.RULE.JS).resourceQuery({ not: /raw/ });
    },
  },
});

[xc2]

please try import str from "!./myType.ts?raw";

[ouzhou]

You are right , it works
webpack-enforce

So any plan to use import str from "./myType.ts?raw"; instands of import str from "!./myType.ts?raw" ; make migrating to rsbuild easily from webpack ?

Ecosystem compatibility: Rsbuild is compatible with most webpack plugins and all Rspack plugins, while Vite is compatible with Rollup plugins. If you're currently using more plugins and loaders from the webpack ecosystem, migrating to Rsbuild would be relatively easy.

[chenjiahan]

You may have confused a concept. CRACO and webpack are not tools of the same level. The demo you provided above is based on CRACO, not webpack.

Rspack / Rsbuild is compatible with webpack, not all upper-level tools based on webpack. We cannot make Rsbuild compatible with the behaviors of all different tools.

As for the raw feature, we plan to implement it in Rsbuild, but it significantly impacts the Rspack configuration within Rsbuild. We are still evaluating it.

[ouzhou]

Yes, craco is not the same level
I'll try using only webpack to see if it supports raw feature like craco way

---

After testing, the result of webpack is consistent with rspack

webpack need configure attempt to match the rules in these arrays, and once the match is successful, no further rules will be attempted

maybe use oneOf to control the order of loaders

[ouzhou]

export default defineConfig({
  tools: {
    rspack: {
      module: {
        rules: [
          {
            resourceQuery: /raw/,
            type: 'asset/source',
          },
        ],
      },
    }
  },
});

From the document, it seems that as long as I configure it this way, no matter what file it is, as long as it is? The endings of raw should all be strings, and disabling the loader through hacking doesn't seem intuitive

https://github.com/web-infra-dev/rspack/blob/9e235b08ee7654df72e3a1c1caf6fe3d5eae1db0/packages/rspack-test-tools/tests/configCases/module/rspack-issue-2791/index.js

web-infra-dev/rspack#2791

[ouzhou]

According to the documentation of rspack, after configuring it here, it should return a string

Where is the boundary of rsbuild based on rspack encapsulation，this feels very confusing, as if my configuration is not working