New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ReferenceError: window is not defined when using react-refresh-webpack-plugin #897
Comments
Seems possibly related to this comment, "The root cause of this issue, is when Linaria changed to use inline match resource after #879 , the .linaria.css became a virtual module, its module.nameForCondition() which is used by SplitChunksPlugin also changed from path/to/xxx.linaria.css to path/to/xxx.tsx. The test: /.css$/ cannot match these CSS files anymore." I tried adding exclude to refresh plugin, but it didn't help: exclude: [
/node_modules/,
/outputCssLoader\.js/g,
/@linaria/g,
/\.linaria\.css/,
], Excluding the two files using linaria does make it work tho, which validates what is happening: exclude: [
/node_modules/,
/outputCssLoader\.js/g,
/@linaria/g,
/MenuItem\.tsx/,
/App\.tsx/,
/\.linaria\.css/,
], |
From https://webpack.js.org/api/loaders/#inline-matchresource "When a matchResource is set, it will be used to match with the module.rules instead of the original resource. This can be useful if further loaders should be applied to the resource, or if the module type needs to be changed. It's also displayed in the stats and used for matching Rule.issuer and test in splitChunks." It seems like using matchResource is a bad idea as it confuses the entire rest of webpack ecosystem into not understanding things as css. While cacheGroups have type, other parts don't @malash am I understanding this correctly? |
Looking into how react-refresh plugin works: https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/ebe885a1df2cd528645b7cc68dfc4fa59dde4d11/lib/utils/injectRefreshLoader.js I get the following for moduleData: {
layer: null,
request: '/home/ntucker/src/anansi/node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[6].oneOf[1].use[0]!/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/MenuItem.tsx',
userRequest: '/home/ntucker/src/anansi/examples/linaria/src/MenuItem.linaria.css!=!/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/MenuItem.tsx',
rawRequest: './MenuItem.linaria.css!=!../../../node_modules/@linaria/webpack5-loader/lib/outputCssLoader.js?cacheProvider=%2Fhome%2Fntucker%2Fsrc%2Fanansi%2Fpackages%2Fwebpack-config-anansi%2Flib%2Fbase%2FlinariaFileCache.js!./MenuItem.tsx',
loaders: [
{
loader: '/home/ntucker/src/anansi/node_modules/mini-css-extract-plugin/dist/loader.js',
options: [Object],
ident: 'ruleSet[1].rules[6].oneOf[1].use[0]'
},
{
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/MenuItem.tsx',
context: '/home/ntucker/src/anansi/examples/linaria/src',
matchResource: '/home/ntucker/src/anansi/examples/linaria/src/MenuItem.linaria.css',
resourceResolveData: {
_ResolverCachePluginCacheMiss: true,
context: {
issuer: '/home/ntucker/src/anansi/examples/linaria/src/MenuItem.tsx',
issuerLayer: null,
compiler: undefined
},
path: '/home/ntucker/src/anansi/examples/linaria/src/MenuItem.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/MenuItem.tsx',
__innerRequest_request: undefined,
__innerRequest_relativePath: './src/MenuItem.tsx',
__innerRequest: './src/MenuItem.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
} Does this mean instead of Though it seems having type of 'javascript/auto' is still wrong here... |
Excluding the matchResource that has linaria.css - I still get: {
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
} So manually adding !/\.css/.test(moduleData.resourceResolveData.context.issuer) && to https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/ebe885a1df2cd528645b7cc68dfc4fa59dde4d11/lib/utils/injectRefreshLoader.js#L30 makes it compile - however, hot reloading doesn't work at all (even tho it does for project with no linaria) |
Hi @ntucker! Looks like the problem can be solved by adding |
Details about different asset types can be found here |
Thanks for the reply. I'm having trouble understanding what you mean by extension as I don't have any such variable in this Issue or in the codebase linked. Searching for 'extension' on the linked docs also turns up 0 results. If you could clarify what that refers to I would greatly appreciate it! |
Oh I think i figured it out - the option here: https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#options |
I set the option to |
@Anber https://github.com/ntucker/anansi/blob/master/packages/webpack-config-anansi/src/base/css.js#L113 is how I'm currently processing the .linaria extension |
I don't see |
Just using the same extension for my custom file cache seemed to make it pick up the correct loaders, etc. ntucker/anansi#1483 Not sure if something else changed in meantime. Does extension option do anything anymore? I realized after looking into this again the extension I needed to change we in my custom cache implementation. Perhaps this should include a docs update for the |
This has the brief reference about Please let me know if you face the problem with |
I'm still having this issue. Without Is there an official example of how to get linaria to work with React Fast Refresh plugin? For reference, he's the PR I'm working on: https://github.com/10up/10up-toolkit/pull/263/files. It works fine without HMR/React Fast Refresh. |
If I change the react refresh plugin to exclude processing outputCssLoader all works fine. if (
!/outputCssLoader\.js/.test(moduleData.request) &&
// Include and exclude user-specified files
match(moduleData.matchResource || moduleData.resource) &&
// Exclude files referenced as assets
!moduleData.type.includes('asset') &&
// Skip react-refresh and the plugin's runtime utils to prevent self-referencing -
// this is useful when using the plugin as a direct dependency,
// or when node_modules are specified to be processed.
!moduleData.resource.includes(reactRefreshPath) &&
!moduleData.resource.includes(refreshUtilsPath) &&
// Check to prevent double injection
!moduleData.loaders.find(({ loader }) => loader === resolvedLoader)
) { On my tests UPDATE: submitted a PR: pmmmwh/react-refresh-webpack-plugin#726 |
Environment
Description
It seems that the react-refresh is being injected into CSS maybe? Previously my thread-loader guarded against processing linaria js files via:
However, now the caching system has changed I don't know how to avoid this.
Refresh configuration:
Note that removing the overlay makes this error go away. (as the react-error-overlay code in the trace above is no longer added to files)
Reproducible Demo
Here's my cacheProvider:
Full demo is:
yarn install
from rootcd examples/linaria
yarn start
The text was updated successfully, but these errors were encountered: