Closed marekpetak closed 2 years ago
@bigopon webpack5 is not happy about this injected line. https://github.com/aurelia/webpack-plugin/blob/2a5c95f07c1c29214001e7d5a0749a719c9b4b11/src/AureliaPlugin.ts#L362
It looks like __webpack__modules__
is not visible at that runtime moment. It's probably not a global var anymore.
I am pretty sure we don't need that AureliaExposeWebpackInternal
anymore. It looks like a patch to normalise few old webpack versions, but the latest aurelia-webpack-plugin only supports webpack v5 anyway.
I tried removing it locally, it's getting better. Now I see a different error:
ERROR in Conflict: Multiple assets emit different content to the same filename app.ce168d8682b7c349aad8.bundle.map
The last conflict error can be bypassed by removing output.sourceMapFilename
in the webpack config file. Not sure what went wrong here.
output: {
path: outDir,
publicPath: baseUrl,
filename: production ? '[name].[chunkhash].bundle.js' : '[name].[fullhash].bundle.js',
// sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[fullhash].bundle.map',
chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[fullhash].chunk.js'
},
@3cp I think the "__webpack_require__.m = __webpack_require__.m || __webpack_modules__;"
exposure is to make the plugin work with the loader, since the loader relies on the internal module map to work. Or are you saying that we have a way to configure webpack to output this?
From the code, I can guess that's a patch for old version of webpack when __webpack_require__.m
is not available. That's why I say it's not needed anymore since we only target one version v5 now.
FYI I removed the sourceMapFilename
from v1 skeleton.
It's not needed anyway in webpack v5, as webpack now syncs source map filename with js filename.
@bigopon I was wrong. You have to find a way to get to the modules list.
Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating '__webpack_require__.m[moduleId]')
I see, __webpack_require__.m
and __webpack_require__.c
are variables created by us.
I did more testing. @bigopon this is even more pressing. It's not scss or css.
The My bad, false alarm.__webpack_modules__
is not visible in any context, not even in JS. So everything fails with latest webpack v5. They must have stopped expose __webpack_modules__
variable (at least to user land code).
First clue: webpack v5.52.0 is the first version having this issue, v5.51.2 works fine.
The observation is:
In webpack v5.52.0+, with combination of MiniCssExtractPlugin, in the place that our webpack-plugin injects __webpack_plugin__.m
, somehow __webpack_modules__
is not visible.
Although the error log is not very clear where it happened, I am guessing the issue only happens when writing the css bundle file.
ll dist/
total 3432
-rw-r--r-- 1 huocp staff 580B 4 Nov 10:48 app.4a181df29a49a1b40e2c.bundle.css (this one I am guessing)
-rw-r--r-- 1 huocp staff 206B 4 Nov 10:48 app.4a181df29a49a1b40e2c.bundle.css.map
-rw-r--r-- 1 huocp staff 821K 4 Nov 10:48 app.4a181df29a49a1b40e2c.bundle.js
-rw-r--r-- 1 huocp staff 862K 4 Nov 10:48 app.4a181df29a49a1b40e2c.bundle.js.map
-rw-r--r-- 1 huocp staff 15K 4 Nov 10:48 favicon.ico
-rw-r--r-- 1 huocp staff 492B 4 Nov 10:48 index.html
Following fix bypasses this issue:
class AureliaExposeWebpackInternal extends Webpack.RuntimeModule {
constructor() {
super("Aurelia expose webpack internal");
}
/**
* @returns {string} runtime code
*/
generate() {
return Webpack.Template.asString([
"if (typeof __webpack_modules__ !== 'undefined') {",
"__webpack_require__.m = __webpack_require__.m || __webpack_modules__;",
"__webpack_require__.c = __webpack_require__.c || __webpack_module_cache__;",
"}"
]);
}
}
But better solution should be only apply AureliaExposeWebpackInternal for JS bundle files.
compiler.hooks.compilation.tap('AureliaPlugin', (compilation, params) => {
compilation.hooks.runtimeRequirementInTree
.for(Webpack.RuntimeGlobals.require)
.tap('AureliaPlugin', (chunk) => {
// Somehow, ignore CSS chunk if possible.
// I could not find a signature on the chunk object to separate them.
compilation.addRuntimeModule(chunk, new AureliaExposeWebpackInternal());
});
});
The info in MiniCssExtractPlugin mentioned webpack 5.52.0. Use a new webpack API to execute modules instead of child compilers
might be the reason of hitting our injection code.
experimentalUseImportModule Type: Boolean Default: undefined
Enabled by default if not explicitly enabled (i.e. true and false allow you to explicitly control this option) and new API is available (at least webpack 5.52.0 is required). Boolean values are available since version 5.33.2, but you need to enable experiments.executeModule (not required from webpack 5.52.0).
Use a new webpack API to execute modules instead of child compilers. This improves performance and memory usage a lot.
hey guys I get this error too after bumping mini-css and just to provide a bit more info, downgrading mini-css to an older versions fixes this issue "mini-css-extract-plugin": "~2.3.0"
so there is really something different with this new version and my WebPack was upgraded to the latest which is currently at "webpack": "^5.61.0"
.
Also as a side note, I got another project/lib Slickgrid-Universal using latest WebPack and mini-css (same config) and I'm not having that issue on that repo, so it's really only with Aurelia that I have this issue.
A note here for future visitors: The issue discussed here, was apparently resolved in aurealia-webpack-plugin version 5.0.3. I ran into this issue because I was on version 5.0.0, and had a combination of the factors mentioned above (webpack5, aurelia, and mini-css-extract-plugin).
Thanks for the discussion & resolution.
Only see this issue in newly created Aurelia V1 project using Webpack 5. Older versions, using webpack 4 work fine.
Probably related to #196
to reproduce:
import "bootswatch/dist/yeti/bootstrap.min.css";
in main.tsau run --watch
As suggested on Discord, I have tried
This seems to work when importing css, but ends with different error import in scss (
import './styles/main.scss';
).