import/no-webpack-loader-syntax

webpack lets you put loader names in front of a path, separated by !. Bun, Node.js and most other bundlers can't resolve a path like that, so the file only works with webpack. It also scatters your build setup across your source files.

The rule reports any import, export .. from, import() or require() with a ! in its path.

Configure#

Off by default. To turn it on:

[lint.rules]
"import/no-webpack-loader-syntax" = "error" # or "warn"

Examples#

import styles from "style-loader!css-loader!./app.css";
const notes = require("raw-loader!./notes.txt");

import styles from "./app.css";
const notes = require("./notes.txt");

Configure the loaders in webpack.config.js instead.