ailed to resolve module specifier

[prclin]

when i use MonacoVscodeApiConfig, error occured:
Failed to resolve module specifier "@codingame/monaco-vscode-api/workers/editor.worker". Relative references must start with either "/", "./", or "../".

it was because of configureDefaultWorkerFactory, more accurately is defineDefaultWorkerLoaders, it loads workers, and

const defaultEditorWorkerService = () => new Worker(
        new URL('@codingame/monaco-vscode-editor-api/esm/vs/editor/editor.worker.js', import.meta.url),
        { type: 'module' }
    );

and in editor.worker.js

export * from '@codingame/monaco-vscode-api/workers/editor.worker'

its content include @codingame/monaco-vscode-api , this is a module name, and worker is load in browser web worker, but browser does not recoginze this, so that this comes run.

i guess this may be the reason

[prclin]

if i load workers like this，the error gone:

const environment = getEnhancedMonacoEnvironment();
environment.getWorker = (workerId: string, label: string) => {
  console.log(workerId, label);
  if (label === "editorWorkerService") {
    return new Worker(
      new URL(
        "@codingame/monaco-vscode-editor-api/esm/vs/editor/editor.worker.js",
        import.meta.url,
      ),
      { type: "module" },
    );
  }
  return undefined;
};

[kaisalmen]

Hi @prclin do you use a specific framework or can you share more information about your setup? Can you share a repository with a reproducible example? Thank you.

[prclin]

sorry project can not be shown; but i can give you some key config.
package.json

  "dependencies": {
    "@codingame/monaco-vscode-api": "^25.1.2",
    "@codingame/monaco-vscode-configuration-service-override": "^25.1.2",
    "@codingame/monaco-vscode-editor-api": "^25.1.2",
    "@codingame/monaco-vscode-editor-service-override": "^25.1.2",
    "@codingame/monaco-vscode-extension-api": "^25.1.2",
    "@codingame/monaco-vscode-extensions-service-override": "^25.1.2",
    "@codingame/monaco-vscode-languages-service-override": "^25.1.2",
    "@codingame/monaco-vscode-localization-service-override": "^25.1.2",
    "@codingame/monaco-vscode-log-service-override": "^25.1.2",
    "@codingame/monaco-vscode-model-service-override": "^25.1.2",
    "@douyinfe/semi-icons": "^2.90.13",
    "@douyinfe/semi-ui-19": "^2.90.13",
    "@typefox/monaco-editor-react": "^7.7.0",
    "monaco-languageclient": "^10.7.0",
    "react": "^19.2.3",
    "react-dom": "^19.2.3",
    "react-intl": "^8.1.1",
    "react-router": "^7.12.0",
    "vscode": "npm:@codingame/monaco-vscode-extension-api@^25.1.2"
  },
  "devDependencies": {
    "@csstools/postcss-cascade-layers": "^6.0.0",
    "@douyinfe/semi-rspack-plugin": "^2.91.0",
    "@eslint/js": "^9.39.1",
    "@rspack/cli": "^1.7.1",
    "@rspack/core": "^1.7.1",
    "@rspack/plugin-react-refresh": "^1.5.3",
    "@types/node": "^25.0.3",
    "@types/react": "^19.2.7",
    "@types/react-dom": "^19.2.3",
    "autoprefixer": "^10.4.23",
    "eslint": "^9.39.1",
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.4.24",
    "globals": "^16.5.0",
    "jsonc-parser": "^3.3.1",
    "postcss": "^8.5.6",
    "postcss-loader": "^8.2.0",
    "prettier": "^3.7.3",
    "react-refresh": "^0.18.0",
    "sass": "^1.97.2",
    "sass-loader": "^16.0.6",
    "tailwindcss": "^3.4.19",
    "ts-node": "^10.9.2",
    "typescript": "^5.9.3",
    "typescript-eslint": "^8.48.0"
  }

rspack config

import { defineConfig } from "@rspack/cli";
import { CopyRspackPlugin, rspack, type SwcLoaderOptions } from "@rspack/core";
import { ReactRefreshRspackPlugin } from "@rspack/plugin-react-refresh";
import { SemiRspackPlugin } from "@douyinfe/semi-rspack-plugin";
import { rspackAlias } from "./setup/tsconfig.ts";

const isDev = process.env.NODE_ENV === "development";
// Target browsers, see: https://github.com/browserslist/browserslist
const targets = ["last 2 versions", "> 0.2%", "not dead", "Firefox ESR"];

export default defineConfig({
  devServer: {
    historyApiFallback: {
      rewrites: [{ from: /^\/$/, to: "/" }],
    },
  },
  entry: {
    main: "./src/main.tsx",
  },
  resolve: {
    extensions: ["...", ".ts", ".tsx", ".jsx"],
    alias: rspackAlias,
  },
  module: {
    rules: [
      {
        test: /\.(css?|scss?)$/,
        use: ["postcss-loader"],
        type: "css",
      },
      {
        test: /\.svg$/,
        type: "asset",
      },
      {
        test: /\.(jsx?|tsx?)$/,
        // 由于rspack fast refresh与web worker冲突,开发时排除monaco editor
        exclude: isDev
          ? [/@codingame\/monaco-vscode-api/, /@rspack\/core\/hot/]
          : undefined,
        use: [
          {
            loader: "builtin:swc-loader",
            options: {
              jsc: {
                parser: {
                  syntax: "typescript",
                  tsx: true,
                },
                transform: {
                  react: {
                    runtime: "automatic",
                    development: isDev,
                    refresh: isDev,
                  },
                },
              },
              env: { targets },
            } satisfies SwcLoaderOptions,
          },
        ],
      },
    ],
  },
  plugins: [
    new rspack.HtmlRspackPlugin({
      template: "./index.html",
    }),
    isDev ? new ReactRefreshRspackPlugin() : null,
    new SemiRspackPlugin({
      cssLayer: true,
      theme: "@semi-bot/semi-theme-datastudio",
    }),
    new CopyRspackPlugin({
      patterns: ["public"],
    }),
  ],
  optimization: {
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin(),
      new rspack.LightningCssMinimizerRspackPlugin({
        minimizerOptions: { targets },
      }),
    ],
  },
  experiments: {
    css: true,
  },
});

react component

import { FC } from "react";
import { LocaleKey } from "@utils/context.tsx";
import { IconHomeStroked } from "@douyinfe/semi-icons";
import { MonacoEditorReactComp } from "@typefox/monaco-editor-react";
import {
  getEnhancedMonacoEnvironment,
  MonacoVscodeApiConfig,
} from "monaco-languageclient/vscodeApiWrapper";
import { EditorAppConfig } from "monaco-languageclient/editorApp";
import { configureDefaultWorkerFactory } from "monaco-languageclient/workerFactory";

// remove getWorker to trigger error
const environment = getEnhancedMonacoEnvironment();
environment.getWorker = (workerId: string, label: string) => {
  console.log(workerId, label);
  if (label === "editorWorkerService") {
    return new Worker(
      new URL(
        "@codingame/monaco-vscode-editor-api/esm/vs/editor/editor.worker.js",
        import.meta.url,
      ),
      { type: "module" },
    );
  }
  return undefined;
};
export const Local: FC = () => {
  // Monaco VSCode API configuration
  const vscodeApiConfig: MonacoVscodeApiConfig = {
    $type: "extended",
    viewsConfig: {
      $type: "EditorService",
    },
    userConfiguration: {
      json: JSON.stringify({
        "workbench.colorTheme": "Default Dark Modern",
        "editor.wordBasedSuggestions": "off",
      }),
    },
    monacoWorkerFactory: configureDefaultWorkerFactory,
  };

  // editor app / monaco-editor configuration
  const editorAppConfig: EditorAppConfig = {
    codeResources: {},
  };
  return (
    <div style={{ backgroundColor: "#1f1f1f" }}>
      <MonacoEditorReactComp
        vscodeApiConfig={vscodeApiConfig}
        editorAppConfig={editorAppConfig}
        style={{ height: "90vh" }}
        onError={e => {
          console.error(e);
        }}
      />
    </div>
  );
};
export default Local;
export const order = 3;
export const text: LocaleKey = "side_local";
export const path = "local";
export const icon = <IconHomeStroked size={"small"} />;

[prclin]

if i load workers like this，the error gone:如果我这样加载工人，错误就消失了：

const environment = getEnhancedMonacoEnvironment();
environment.getWorker = (workerId: string, label: string) => {
console.log(workerId, label);
if (label === "editorWorkerService") {
return new Worker(
new URL(
"@codingame/monaco-vscode-editor-api/esm/vs/editor/editor.worker.js",
import.meta.url,
),
{ type: "module" },
);
}
return undefined;
};

by this solution, i guess it was because @codingame/monaco-vscode-editor-api/esm/vs/editor/editor.worker.js does not processed by rspack as a webworker.
so that module name in export * from '@codingame/monaco-vscode-api/workers/editor.worker' was not be resolved

[kaisalmen]

Ok, you are using rspack. Then it is a tooling issue / different due to different tooling behaviour. I have no experience with rspack. But then what you did already is the best workaround.