{"record":{"id":"4b58008a65cba968","repo":"oxc-project/oxc","slug":"unexpected-in-name","errorCode":null,"errorMessage":"Unexpected `!` in `{name}`.","messagePattern":"Unexpected `!` in `(.+?)`\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/import/no_webpack_loader_syntax.rs","lineNumber":13,"sourceCode":"use oxc_ast::{\n    AstKind,\n    ast::{Argument, Expression},\n};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_semantic::AstNode;\nuse oxc_span::Span;\n\nuse crate::{context::LintContext, rule::Rule};\n\nfn no_named_as_default_diagnostic(name: &str, span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(format!(\"Unexpected `!` in `{name}`.\"))\n        .with_help(\"Do not use import syntax to configure webpack loaders\")\n        .with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct NoWebpackLoaderSyntax;\n\ndeclare_oxc_lint!(\n    /// ### What it does\n    ///\n    /// Forbids using Webpack loader syntax directly in import or require statements.\n    ///\n    /// ### Why is this bad?\n    ///\n    /// This loader syntax is non-standard, so it couples the code to Webpack. The recommended way to\n    /// specify Webpack loader configuration is in a [Webpack configuration file](https://webpack.js.org/concepts/loaders/#configuration).\n    ///\n    /// ### Examples","sourceCodeStart":1,"sourceCodeEnd":31,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/import/no_webpack_loader_syntax.rs#L1-L31","documentation":"This is oxlint's 'import/no-webpack-loader-syntax' diagnostic. It reports any import or require whose module string contains an exclamation mark, the webpack loader syntax (e.g. import 'babel-loader!./file.js'). Inline loader syntax couples application code to webpack and is ignored or rejected by other bundlers, toolchains, and Node itself, so the rule forbids it.","triggerScenarios":"Enable the rule and lint code where an ImportDeclaration source or a require() string literal contains '!', such as 'style-loader!css-loader!./app.css' or 'raw-loader!./data.txt'. The diagnostic names the offending module string in {name}.","commonSituations":"Projects migrating off webpack to Vite, esbuild, vitest, or Node ESM hit this because those tools do not understand loader chains in the specifier. Copy-pasted older webpack recipes (raw-loader, babel-loader inline, !!style-loader!css-loader!) are the usual sources.","solutions":["Move the loader configuration into the bundler config file (webpack.config.js module.rules, or the equivalent in Vite/esbuild) and import the plain resource: import './app.css'.","For raw text or assets, use the toolchain's convention (e.g. '?raw' suffix in Vite, asset modules in webpack 5) instead of raw-loader! syntax.","If the file must stay webpack-only and you accept the coupling, disable the rule for that file with an oxlint-disable comment."],"exampleFix":"// before\nimport 'raw-loader!./data.txt';\nconst css = require('style-loader!css-loader!./app.css');\n\n// after (webpack 5 asset modules in webpack.config.js)\nimport data from './data.txt';\nimport './app.css';","handlingStrategy":"validation","validationCode":"# catch webpack loader syntax before linters or other bundlers do\nrg -n \"(import|require)\\s*\\(?\\s*['\\\"][^'\\\"]*![^'\\\"]*['\\\"]\" src/","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Keep all loader configuration in the bundler config file, never in specifiers.","When copying webpack recipes, strip '!'-chains before committing.","Test builds with a second toolchain (esbuild/vite) to catch webpack-only syntax early."],"tags":["lint","webpack","loader","import","oxlint","bundler"],"backgroundTag":"webpack-loader-syntax","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}