When using monaco-editor with rsbuild (regardless of whether we incorporate monaco-editor-webpack-plugin or not) we get the following warning during the build process:

⚠ Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
     ╭─[319:16]
 317 │             };
 318 │             if (!isESM) {
 319 │                 require([`${moduleId}`], onModuleCallback, reject);
     ·                 ───────
 320 │             }
 321 │             else {
     ╰────

All that is required to provoke the warning is to import something from monaco and use it (a mere new monaco.Range() is sufficient). I understand that the warning is most probably benign but is there a way to prevent or at least silence it?

Steps to reproduce:

1. create a simple rsbuild project: npx create-rsbuild -d monaco-esm-issue -t vanilla
2. change into the newly created directory: cd monaco-esm-issue
3. install dependencies: npm install
4. add monaco-editor to the mix: npm install monaco-editor
5. change src/index.js to the content pasted below and run npm run dev:

import * as monaco from 'monaco-editor';
new monaco.Range();

As a result, you should now be witnessing the warning described above in the terminal where the npm run dev has been executed.

When using monaco-editor with rsbuild (regardless of whether we incorporate monaco-editor-webpack-plugin or not) we get the following warning during the build process:

⚠ Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
     ╭─[319:16]
 317 │             };
 318 │             if (!isESM) {
 319 │                 require([`${moduleId}`], onModuleCallback, reject);
     ·                 ───────
 320 │             }
 321 │             else {
     ╰────

All that is required to provoke the warning is to import something from monaco and use it (a mere new monaco.Range() is sufficient). I understand that the warning is most probably benign but is there a way to prevent or at least silence it?

Steps to reproduce:

1. create a simple rsbuild project: npx create-rsbuild -d monaco-esm-issue -t vanilla
2. change into the newly created directory: cd monaco-esm-issue
3. install dependencies: npm install
4. add monaco-editor to the mix: npm install monaco-editor
5. change src/index.js to the content pasted below and run npm run dev:

import * as monaco from 'monaco-editor';
new monaco.Range();

As a result, you should now be witnessing the warning described above in the terminal where the npm run dev has been executed.

• monaco-editor
• rsbuild

Share Improve this question Follow edited Mar 11 at 11:45 momesana asked Mar 11 at 11:26 momesanamomesana 5155 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

You can ignore that warning, but not suppress it. Your bundler is just telling you that its static import analysis cannot handle this kind of import and will not be able to optimize the build (tree-shaking, unused module removal etc.). This happens not only for this code part, but always, when module names are passed in a variable.

I also encountered the same problem
The only thing I can do is ignore this warning in rsbuild.config.ts

export default defineConfig({
  plugins: [pluginVue()],
  source: {
    ...
  },
  tools: {
    rspack:{
      ignoreWarnings: [/Critical dependency: require function is used in a way in which dependencies cannot be statically extracted/],
    }
  }