Improve content_scripts error message

extension-js · Aug 1, 2024 · fc52456 · fc52456
1 parent 7288d8e
commit fc52456
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 6 deletions.
diff --git a/programs/develop/webpack/lib/messages.ts b/programs/develop/webpack/lib/messages.ts
@@ -592,9 +592,9 @@ export function handleMultipleAssetsError(
 ) {
   const extFilename = filename.split('.').pop()
   const errorMsg =
-    `[${manifestName}'s content_scripts] One of your ${extFilename} ` +
-    `file imports is also defined as a content_script in manifest.json. Remove the ` +
-    `duplicate entry and try again.`
+    `content_scripts: One of your ${extFilename?.toUpperCase()} ` +
+    `imports is also a content_script CSS in manifest.json.\n\n` +
+    `Remove the duplicate entry and try again.`
 
   if (filename.startsWith('content_scripts')) {
     return errorMsg

diff --git a/programs/develop/webpack/plugin-errors/webpack-common-errors/compilation-error-handlers.ts b/programs/develop/webpack/plugin-errors/webpack-common-errors/compilation-error-handlers.ts
@@ -2,6 +2,7 @@ import webpack from 'webpack'
 import * as messages from '../../lib/messages'
 
 export function handleMultipleAssetsError(
+  manifest: {name: string},
   error: webpack.WebpackError
 ): webpack.WebpackError | null {
   const actualMsg =

diff --git a/programs/develop/webpack/plugin-errors/webpack-common-errors/index.ts b/programs/develop/webpack/plugin-errors/webpack-common-errors/index.ts
@@ -20,7 +20,8 @@ export class WebpackCommonErrorsPlugin {
         // as multiple assets with the same name,
         // or missing dependencies.
         compilation.errors.forEach((error, index) => {
-          const multipleAssetsError = handleMultipleAssetsError(error)
+          const manifest = require(this.manifestPath)
+          const multipleAssetsError = handleMultipleAssetsError(manifest, error)
           const topLevelAwaitError = handleTopLevelAwaitError(
             this.manifestPath,
             error

diff --git a/programs/develop/webpack/webpack-config.ts b/programs/develop/webpack/webpack-config.ts
@@ -194,7 +194,6 @@ export default function webpackConfig(
     infrastructureLogging: {
       level: 'none'
     },
-    // cache: false,
     performance: {
       hints: false,
       maxAssetSize: 999000,
@@ -207,7 +206,7 @@ export default function webpackConfig(
       // Enable native CSS support. Note that it's an experimental feature still under development
       // and will be enabled by default in webpack v6, however you can track the progress on GitHub
       // here: https://github.com/webpack/webpack/issues/14893.
-      css: devOptions.mode === 'production',
+      css: true,
       // Support the new WebAssembly according to the updated specification,
       // it makes a WebAssembly module an async module.
       asyncWebAssembly: true