Skip to content

[Bug] monaco-editor-webpack-plugin 7.1.1 breaks CDN deployments with "Cannot use import statement outside a module" #5073

@mattgodbolt

Description

@mattgodbolt

Reproducible in vscode.dev or in VS Code Desktop?

  • Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

  • Not reproducible in the monaco editor playground

Monaco Editor Playground Link

N/A

Monaco Editor Playground Code

N/A

Reproduction Steps

  1. Use [email protected]
  2. Configure webpack to serve static assets from a CDN (cross-origin):
    // webpack.config.js
    output: {
      publicPath: 'https://static.example.com/'
    }
  3. Load Monaco editor in the browser from a different origin (e.g., https://app.example.com)

Actual (Problematic) Behavior

Workers fail to load with:

Uncaught SyntaxError: Cannot use import statement outside a module

The browser console shows Monaco falling back to blob workers with errors like:

Could not create web worker(s). Falling back to loading web worker code in main thread

Root Cause:

The plugin's getWorkerUrl function (lines 178-184 in webpack-plugin/src/index.ts) contains this logic for cross-origin workers:

if (typeof import.meta !== 'undefined') {
  // module worker
  js += 'import "' + result + '";';
} else {
  // classic worker
  js += 'importScripts("' + result + '");';
}

The bug: This typeof import.meta check runs at build/runtime when generating the blob URL, NOT in the worker context itself. If import.meta is defined in the webpack runtime environment (which it often is in modern builds), the plugin incorrectly generates:

/*editorWorkerService*/import "https://static.example.com/editor.worker.js";

However, the blob worker is still created as a classic worker (not {type: 'module'}), so the ES6 import statement fails with "Cannot use import statement outside a module".

Expected Behavior

Workers should load successfully from CDN deployments, using importScripts() in the blob worker (as 7.1.0 did).

Why This Works Locally

When serving from the same origin, the plugin returns the worker URL directly without creating a blob, bypassing this buggy code path entirely.

Suggested Fix

The import.meta check should either:

  1. Be removed entirely (always use importScripts for classic blob workers)
  2. Check if the worker is actually being created with {type: 'module'}
  3. Run in the worker context, not the build context

Workaround

Downgrade to [email protected] which doesn't have this issue.

Additional Context

  • Introduced in PR Update webpack plugin to support module workers #4742 (commit ae5cab7)
  • Released as 7.1.1 on October 10, 2025
  • Affects any deployment using CDN/cross-origin static assets
  • No worker files are actually requested from the CDN - Monaco falls back to blob workers which then fail

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions