parcel-bundler/parcel · error · Error

The import path: ${dependency.specifier} is using webpack sp

Error message

The import path: ${dependency.specifier} is using webpack specific loader import syntax, which isn't supported by Parcel.

What it means

Thrown by @parcel/resolver-default when an import specifier matches WEBPACK_IMPORT_REGEX (/^\w+-loader(?:\?\S*)?!/) — the webpack inline-loader chain syntax like `imports-loader?$=jquery!./example.js`. Parcel does not implement webpack's loader pipeline, so it refuses to resolve rather than silently producing wrong output. The check runs before the NodeResolver is consulted.

Source

Thrown at packages/resolvers/default/src/DefaultResolver.js:28

export default (new Resolver({
  async loadConfig({config, options, logger}) {
    let conf = await config.getConfig([], {
      packageKey: '@parcel/resolver-default',
    });

    return new NodeResolver({
      fs: options.inputFS,
      projectRoot: options.projectRoot,
      packageManager: options.packageManager,
      shouldAutoInstall: options.shouldAutoInstall,
      mode: options.mode,
      logger,
      packageExports: conf?.contents?.packageExports ?? false,
    });
  },
  resolve({dependency, specifier, config: resolver}) {
    if (WEBPACK_IMPORT_REGEX.test(dependency.specifier)) {
      throw new Error(
        `The import path: ${dependency.specifier} is using webpack specific loader import syntax, which isn't supported by Parcel.`,
      );
    }

    return resolver.resolve({
      filename: specifier,
      specifierType: dependency.specifierType,
      range: dependency.range,
      parent: dependency.resolveFrom,
      env: dependency.env,
      sourcePath: dependency.sourcePath,
      loc: dependency.loc,
      packageConditions: dependency.packageConditions,
    });
  },
}): Resolver);

View on GitHub (pinned to 59484858a1)

Solutions

1. Find the offending import (the message echoes the full specifier) and rewrite it without loader syntax.
2. For CSS, rely on Parcel's built-in CSS pipeline and @parcel/transformer-postcss instead of style-loader/css-loader.
3. For build-time transforms, write a Parcel transformer plugin or use a babel/swc plugin configured in .parcelrc.
4. If the offending import is inside a vendored dependency, patch or replace the dependency.

Example fix

// before
import 'style-loader!css-loader!./styles.css';
import 'imports-loader?$=jquery!./legacy.js';
// after
import './styles.css';
// (configure jquery as an alias or inject via a Parcel transformer)

// Lint imports for webpack loader syntax before building
const WEBPACK_IMPORT_REGEX = /^\w+-loader(?:\?\S*)?!/;
function scanForWebpackLoaders(specifiers) {
  return specifiers.filter(s => WEBPACK_IMPORT_REGEX.test(s));
}

When it happens

Trigger: A dependency specifier in user code or in a dependency's source matches the loader-bang pattern. Triggered during dependency resolution for any file Parcel compiles, regardless of target.

Common situations: Porting a webpack project to Parcel that still has `style-loader!css-loader!foo.css` imports; pulling in a third-party package whose source uses webpack loader syntax; CSS-module style imports with `!` separators.

Related errors

• The @import path "${filename}" is using webpack specific syn
• Resolvers must return an absolute path, ${resolver.name} ret
• Unsupported SVGR option "jsx".
• Unsupported SVGR option "template".
• Node builtin polyfill "${packageName}" is not installed, but

AI-assisted analysis of parcel-bundler/parcel@59484858a1 (2026-08-13). Data as JSON: /api/errors/ee53d3d4f77c5175. Report an issue: GitHub.