HookWebpackError: __webpack_modules__ is not defined

Help Requests
1

to reproduce:

  1. New Aurelia V1 project via au new appName → options typescript,htmlmin,sass,vscode`

  2. Add bootstrap and bootswatch via yarn install.

  3. New file called zimports.ts in src root with contents
    import "bootswatch/dist/yeti/bootstrap.min.css";

  4. Then import this file in main.ts
    import './zimport';

  5. au run --watch

  6. it builds but got an error:

Any ideas why is this happening? I used to be able to do this with no problems… Thank you!

javascript modules 636 bytes
  ./src/main.ts 547 bytes [built] [code generated]
  ./src/zimport.ts 50 bytes [built] [code generated]
  ./node_modules/bootswatch/dist/yeti/bootstrap.min.css 39 bytes [built] [code generated] [1 error]

ERROR in ./node_modules/bootswatch/dist/yeti/bootstrap.min.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: __webpack_modules__ is not defined
    at tryRunOrWebpackError (D:\Temp\e3web\node_modules\webpack\lib\HookWebpackError.js:88:9)
    at __webpack_require_module__ (D:\Temp\e3web\node_modules\webpack\lib\Compilation.js:4963:12)
    at D:\Temp\e3web\node_modules\webpack\lib\Compilation.js:4987:11
    at symbolIterator (D:\Temp\e3web\node_modules\neo-async\async.js:3485:9)
    at timesSync (D:\Temp\e3web\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (D:\Temp\e3web\node_modules\neo-async\async.js:3463:5)
    at D:\Temp\e3web\node_modules\webpack\lib\Compilation.js:4863:16
    at symbolIterator (D:\Temp\e3web\node_modules\neo-async\async.js:3485:9)
    at done (D:\Temp\e3web\node_modules\neo-async\async.js:3527:9)
    at D:\Temp\e3web\node_modules\webpack\lib\Compilation.js:4778:8
-- inner error --
ReferenceError: __webpack_modules__ is not defined
    at webpack/runtime/Aurelia expose webpack internal:1:50
    at D:\Temp\e3web\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:460:11
    at Hook.eval [as call] (eval at create (D:\Temp\e3web\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:9:1)
    at Hook.CALL_DELEGATE [as _call] (D:\Temp\e3web\node_modules\tapable\lib\Hook.js:14:14)
    at D:\Temp\e3web\node_modules\webpack\lib\Compilation.js:4965:39
    at tryRunOrWebpackError (D:\Temp\e3web\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (D:\Temp\e3web\node_modules\webpack\lib\Compilation.js:4963:12)
    at D:\Temp\e3web\node_modules\webpack\lib\Compilation.js:4987:11
    at symbolIterator (D:\Temp\e3web\node_modules\neo-async\async.js:3485:9)
    at timesSync (D:\Temp\e3web\node_modules\neo-async\async.js:2297:7)

Generated code for webpack/runtime/Aurelia expose webpack internal
1 | __webpack_require__.m = __webpack_require__.m || __webpack_modules__;
2 | __webpack_require__.c = __webpack_require__.c || __webpack_module_cache__;
 @ ./src/zimport.ts 1:0-48
 @ ./src/main.ts 3:0-19
 @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js

webpack 5.61.0 compiled with 1 error in 944 ms
2

try

      new MiniCssExtractPlugin({
        experimentalUseImportModule: false
      }),
3

Thank you. It worked with css, but importing scss still showing some errors. I have created a new issue for this here HookWebpackError: __webpack_modules__ is not defined when importing css/scss in typescript file · Issue #197 · aurelia/webpack-plugin · GitHub

4

That got fixed by @bigopon with an update on aurelia-webpack-plugin to 5.0.3, check the new release for it.