parcel-bundler/parcel · error · Error

The @import path "${filename}" is using webpack specific syn

Error message

The @import path "${filename}" is using webpack specific syntax, which isn't supported by Parcel.

To @import files from node_modules, use "${correctPath}"

What it means

Thrown by @parcel/transformer-less's custom Less file manager (resolvePathPlugin) when an @import path matches WEBPACK_ALIAS_RE (/^~[^/]/), the webpack convention for resolving from node_modules (e.g. `@import '~bootstrap/less/variables';`). The error message includes the corrected path (the same string without the leading tilde) so the user can drop the `~`.

Source

Thrown at packages/transformers/less/src/LessTransformer.js:115

function resolvePathPlugin({asset, resolve}) {
  return {
    install(less, pluginManager) {
      class LessFileManager extends less.FileManager {
        supports() {
          return true;
        }

        supportsSync() {
          return false;
        }

        async loadFile(rawFilename, currentDirectory, options) {
          let filename = rawFilename;

          if (WEBPACK_ALIAS_RE.test(filename)) {
            let correctPath = filename.replace(/^~/, '');
            throw new Error(
              `The @import path "${filename}" is using webpack specific syntax, which isn't supported by Parcel.\n\nTo @import files from node_modules, use "${correctPath}"`,
            );
          }

          // Based on https://github.com/less/less.js/blob/master/packages/less/src/less-node/file-manager.js
          let isAbsoluteFilename = this.isPathAbsolute(filename);
          let paths = isAbsoluteFilename ? [''] : [currentDirectory];
          if (options.paths) {
            paths.push(...options.paths);
          }

          let prefixes = options.prefixes || [''];
          let fileParts = this.extractUrlParts(filename);
          let filePath;
          let contents;

          if (filename[0] !== '~') {
            outer: for (let p of paths) {

View on GitHub (pinned to 59484858a1)

Solutions

1. Remove the leading `~` from the @import path (the error message prints the exact replacement).
2. If the package needs resolution from node_modules, Parcel's resolver handles bare specifiers natively — no prefix needed.
3. Search the codebase for `@import '~` and `@import "~` and update all occurrences.

Example fix

// before
@import '~bootstrap/less/variables';
// after
@import 'bootstrap/less/variables';

const WEBPACK_ALIAS_RE = /^~[^/]/;
function scanLessImports(imports) {
  return imports.filter(i => WEBPACK_ALIAS_RE.test(i.path));
}

When it happens

Trigger: Less @import (or url()) where the filename begins with `~` followed by a non-slash character — i.e. a bare package name. The custom LessFileManager.loadFile runs this check before delegating to Parcel's resolver.

Common situations: Porting a webpack-based CSS/Less project; copying @import statements from a Bootstrap/Tailwind Less quickstart that uses webpack tilde resolution; vendored Less that references node_modules with `~`.

Related errors

• The import path: ${dependency.specifier} is using webpack sp
• CSSNanoOptimizer: Only string contents are currently support
• PostCSS config should be an object.
• PostCSS config must have plugins
• failed to locate file ${originalPath}

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