webpack errors after update to 3.0.0-beta.16 #891
Comments
kryops
added
bug report 🦗
github-actions
bot
added
bundler: webpack 📦
|
We are also seeing this in We believe this regression is due to #884. We are going to triple-check and confirm that rolling back to and pinning |
|
I'm having the same issue.. seems to be related to the integration between I can also confirm that rolling back on |
|
@kryops I'v reviewed your repo and got the following conclusion:
new ExtractCssPlugin({
ignoreOrder: true,
- filename: 'styles.css',
+ filename: '[name].css',
}),By changing that line, there should be two CSS file been generated to
cacheGroups: {
styles: {
name: 'styles',
idHint: 'styles',
- test: /\.css$/,
+ type: 'css/mini-extract',
chunks: 'all',
enforce: true,
}
}
In conclusion, this issue happened because of an outdate Webpack config and a bug in latest Linaria v2/v3 #890 cc @Anber |
Ironically #879 is not being released because of this bug, which is simply reporting #879. IMHO bugs from an existing release should not be cause to block releasing fixes for current release. Only bugs from unreleased code should block new releases. |
|
@malash thanks so much for your analysis! I must have missed the changed recommendations for mini-css-extract-plugin when upgrading 😳 I don't think my According to the stack trace, the error surfaces in https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/lib/runtime/RefreshUtils.js#L9, where Just adding something like Apparently someone just had the same idea today in react-refresh-webpack-plugin Not sure if that can be improved on Linaria's side, but for now my setup seems to be working again 😅 (I updated my reproduction branch so now it works, but shows the warnings in development) |
|
@kryops The bug fix of pmmmwh/react-refresh-webpack-plugin#546 did works, but it's not perfect. Many 3rd-party libraries may use variable So I think it is still a bug in |
|
I'm trying to figure out, what is happening inside webpack, css-loader and hmr plugins in order to find a way to prevent this warnings. It seems like a bug that virtual modules don't have moduleId and I have a feeling that this is a Linaria bug. |
|
Webpack doesn't pass the second argument (which is a module id) to webpack_require_module for runtime modules https://github.com/webpack/webpack/blob/main/lib/Compilation.js#L5044, so that it is a bug in |
|
I vote publish. Let other libraries fix their issues |
|
I did a bit more testing, and for me it looks like HMR+React Fast Refresh is indeed working perfectly with Linaria v3 - so I have nothing against it being published 🙂 I commented on pmmmwh/react-refresh-webpack-plugin#245 to see if |
|
Regarding {
layer: null,
request: '/home/ntucker/src/anansi/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[1]!/home/ntucker/src/anansi/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[2]!/home/ntucker/src/anansi/node_modules/@linaria/webpack5-loader/lib/outputCssLoader.js?cacheProvider=%2Fhome%2Fntucker%2Fsrc%2Fanansi%2Fpackages%2Fwebpack-config-anansi%2Flib%2Fbase%2FlinariaFileCache.js!/home/ntucker/src/anansi/examples/linaria/src/App.tsx',
userRequest: '/home/ntucker/src/anansi/examples/linaria/src/App.tsx.webpack[javascript/auto]!=!/home/ntucker/src/anansi/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[1]!/home/ntucker/src/anansi/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[2]!/home/ntucker/src/anansi/node_modules/@linaria/webpack5-loader/lib/outputCssLoader.js?cacheProvider=%2Fhome%2Fntucker%2Fsrc%2Fanansi%2Fpackages%2Fwebpack-config-anansi%2Flib%2Fbase%2FlinariaFileCache.js!/home/ntucker/src/anansi/examples/linaria/src/App.tsx',
rawRequest: '/home/ntucker/src/anansi/examples/linaria/src/App.tsx.webpack[javascript/auto]!=!!!/home/ntucker/src/anansi/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[1]!/home/ntucker/src/anansi/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[2]!/home/ntucker/src/anansi/node_modules/@linaria/webpack5-loader/lib/outputCssLoader.js?cacheProvider=%2Fhome%2Fntucker%2Fsrc%2Fanansi%2Fpackages%2Fwebpack-config-anansi%2Flib%2Fbase%2FlinariaFileCache.js!/home/ntucker/src/anansi/examples/linaria/src/App.tsx',
loaders: [
{
loader: '/home/ntucker/src/anansi/node_modules/css-loader/dist/cjs.js',
options: [Object],
ident: 'ruleSet[1].rules[6].oneOf[1].use[1]'
},
{
loader: '/home/ntucker/src/anansi/node_modules/postcss-loader/dist/cjs.js',
options: [Object],
ident: 'ruleSet[1].rules[6].oneOf[1].use[2]'
},
{
loader: '/home/ntucker/src/anansi/node_modules/@linaria/webpack5-loader/lib/outputCssLoader.js',
options: 'cacheProvider=%2Fhome%2Fntucker%2Fsrc%2Fanansi%2Fpackages%2Fwebpack-config-anansi%2Flib%2Fbase%2FlinariaFileCache.js',
ident: undefined
}
],
resource: '/home/ntucker/src/anansi/examples/linaria/src/App.tsx',
context: '/home/ntucker/src/anansi/examples/linaria/src',
matchResource: '/home/ntucker/src/anansi/examples/linaria/src/App.tsx',
resourceResolveData: {
_ResolverCachePluginCacheMiss: true,
context: {
issuer: '/home/ntucker/src/anansi/examples/linaria/src/App.linaria.css',
issuerLayer: undefined,
compiler: undefined
},
path: '/home/ntucker/src/anansi/examples/linaria/src/App.tsx',
request: undefined,
query: '',
fragment: '',
module: false,
directory: false,
file: false,
internal: false,
fullySpecified: false,
descriptionFilePath: '/home/ntucker/src/anansi/examples/linaria/package.json',
descriptionFileData: {
name: 'example-linaria',
version: '3.0.21',
private: true,
scripts: [Object],
devDependencies: [Object],
dependencies: [Object],
browserslist: [Array]
},
descriptionFileRoot: '/home/ntucker/src/anansi/examples/linaria',
relativePath: './src/App.tsx',
__innerRequest_request: undefined,
__innerRequest_relativePath: './src/App.tsx',
__innerRequest: './src/App.tsx'
},
settings: { type: 'javascript/auto' },
type: 'javascript/auto',
parser: JavascriptParser {
hooks: {
evaluateTypeof: [HookMap],
evaluate: [HookMap],
evaluateIdentifier: [HookMap],
evaluateDefinedIdentifier: [HookMap],
evaluateCallExpressionMember: [HookMap],
isPure: [HookMap],
preStatement: [Hook],
blockPreStatement: [Hook],
statement: [Hook],
statementIf: [Hook],
classExtendsExpression: [Hook],
classBodyElement: [Hook],
classBodyValue: [Hook],
label: [HookMap],
import: [Hook],
importSpecifier: [Hook],
export: [Hook],
exportImport: [Hook],
exportDeclaration: [Hook],
exportExpression: [Hook],
exportSpecifier: [Hook],
exportImportSpecifier: [Hook],
preDeclarator: [Hook],
declarator: [Hook],
varDeclaration: [HookMap],
varDeclarationLet: [HookMap],
varDeclarationConst: [HookMap],
varDeclarationVar: [HookMap],
pattern: [HookMap],
canRename: [HookMap],
rename: [HookMap],
assign: [HookMap],
assignMemberChain: [HookMap],
typeof: [HookMap],
importCall: [Hook],
topLevelAwait: [Hook],
call: [HookMap],
callMemberChain: [HookMap],
memberChainOfCallMemberChain: [HookMap],
callMemberChainOfCallMemberChain: [HookMap],
optionalChaining: [Hook],
new: [HookMap],
expression: [HookMap],
expressionMemberChain: [HookMap],
unhandledExpressionMemberChain: [HookMap],
expressionConditionalOperator: [Hook],
expressionLogicalOperator: [Hook],
program: [Hook],
finish: [Hook]
},
sourceType: 'auto',
scope: undefined,
state: undefined,
comments: undefined,
semicolons: undefined,
statementPath: undefined,
prevStatement: undefined,
currentTagData: undefined
},
parserOptions: undefined,
generator: JavascriptGenerator {},
generatorOptions: undefined,
resolveOptions: undefined
}My issue #897 is the same problem, manifested differently due to me overriding the entry module. While making the injection check in react-refresh-webpack-plugin like so It would be helpful if someone understood the nature of |
|
It sounds like preventing react fast refresh from being injected into the CSS virtual modules (or whatever they are called) is the key to solving some of the issues here. I submitted a PR to react fast refresh plugin: pmmmwh/react-refresh-webpack-plugin#726 With that PR we can now exclude CSS virtual modules generated by linaria. |
|
This issue might have been fixed by pmmmwh/react-refresh-webpack-plugin#769 |
Environment
Description
Hi there,
after upgrading to 3.0.0-beta.16, there are some errors in my webpack build that I cannot quite figure out on my own.
The first error is
This seems to be related to my
optimization.splitChunks.cacheGroupsoption that I have configured to include the CSS for lazy-loaded chunks into the main CSS chunk:If I comment that out, the actual webpack build seems to work fine again (and there is only one CSS chunk, so I'm not sure if that option is even still necessary) - but then I run into errors when starting
webpack-dev-server(using React Fast Refresh):Reproducible Demo
I have created a branch in my
remote-mixerproject:https://github.com/kryops/remote-mixer/tree/linaria3-beta16-error
(Edit: Now with 2 commits on top to fix the issues)
Going back one commit shows that 3.0.0-beta.15 does not seem to be affected.
You can use the following commands to reproduce the problems:
yarnto install the dependenciesyarn frontend buildruns a normal webpack build (you can verify that the result is ok by runningyarn buildand thenyarn start:prod)yarn startstarts the dev serverThanks for looking into it!
The text was updated successfully, but these errors were encountered: