ReferenceError: window is not defined when using react-refresh-webpack-plugin #897

ntucker · 2022-01-05T20:19:36Z

Environment

Linaria version: 3-beta.17
Bundler (+ version): webpack 5.64
Node.js version: 16
OS: ubuntu 20.04 on wsl2 on win10
react-refresh-webpack-plugin: 0.5.4
react-error-overlay: 6.0.9
using thread-loader

Description

ERROR in ./src/App.tsx (./src/App.linaria.css!=!../../node_modules/@linaria/webpack5-loader/lib/outputCssLoader.js?cacheProvider=%2Fhome%2Fntucker%2Fsrc%2Fanansi%2Fpackages%2Fwebpack-config-anansi%2Flib%2Fbase%2FlinariaFileCache.js!./src/App.tsx)
Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: window is not defined
    at tryRunOrWebpackError (/home/ntucker/src/anansi/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/home/ntucker/src/anansi/node_modules/webpack/lib/Compilation.js:4979:12)
    at __webpack_require__ (/home/ntucker/src/anansi/node_modules/webpack/lib/Compilation.js:4936:18)
    at Object.<anonymous> (/home/ntucker/src/anansi/node_modules/thread-loader/dist/cjs.js!/home/ntucker/src/anansi/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].oneOf[1].use[1]!/home/ntucker/src/anansi/node_modules/@linaria/webpack-loader/lib/index.js??ruleSet[1].rules[0].oneOf[1].use[2]!/home/ntucker/src/anansi/packages/webpack-config-anansi/lib/plugins/refreshOverlayModule.js:12:5)
    at /home/ntucker/src/anansi/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (/home/ntucker/src/anansi/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /home/ntucker/src/anansi/node_modules/webpack/lib/Compilation.js:4981:39
    at tryRunOrWebpackError (/home/ntucker/src/anansi/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/home/ntucker/src/anansi/node_modules/webpack/lib/Compilation.js:4979:12)
    at __webpack_require__ (/home/ntucker/src/anansi/node_modules/webpack/lib/Compilation.js:4936:18)
-- inner error --
ReferenceError: window is not defined
    at Object.<anonymous> (/home/ntucker/src/anansi/node_modules/react-error-overlay/lib/index.js:2:44)
    at /home/ntucker/src/anansi/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (/home/ntucker/src/anansi/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /home/ntucker/src/anansi/node_modules/webpack/lib/Compilation.js:4981:39
    at tryRunOrWebpackError (/home/ntucker/src/anansi/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/home/ntucker/src/anansi/node_modules/webpack/lib/Compilation.js:4979:12)
    at __webpack_require__ (/home/ntucker/src/anansi/node_modules/webpack/lib/Compilation.js:4936:18)
    at Object.<anonymous> (/home/ntucker/src/anansi/node_modules/thread-loader/dist/cjs.js!/home/ntucker/src/anansi/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].oneOf[1].use[1]!/home/ntucker/src/anansi/node_modules/@linaria/webpack-loader/lib/index.js??ruleSet[1].rules[0].oneOf[1].use[2]!/home/ntucker/src/anansi/packages/webpack-config-anansi/lib/plugins/refreshOverlayModule.js:12:5)
    at /home/ntucker/src/anansi/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (/home/ntucker/src/anansi/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)

It seems that the react-refresh is being injected into CSS maybe? Previously my thread-loader guarded against processing linaria js files via:

{
              test: /\.(t|j)sx?$/,
              // TODO: Remove when we stop supporting linaria betas
              exclude: /\.linaria-cache/,
}

However, now the caching system has changed I don't know how to avoid this.

Refresh configuration:

        new ReactRefreshWebpackPlugin({
          overlay: {
            // provides editor opening when combined with ErrorOverlayPlugin
            entry: require.resolve('./plugins/ErrorOverlayEntry'),
            // registers error handlers
            module: require.resolve('./plugins/refreshOverlayModule'),
            sockHost: config.devServer.client.webSocketURL.hostname,
            sockPath: config.devServer.client.webSocketURL.pathname,
            sockPort: config.devServer.client.webSocketURL.port,
          },
        }),

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:

const findCacheDir = require('find-cache-dir');
const fs = require('fs');
const path = require('path');
const crypto = require('crypto');
const mkdirp = require('mkdirp');

const hashFileName = name => {
  const hash = crypto.createHash('md4');
  hash.update(name);
  return hash.digest('hex');
};

class LinariaFileCache {
  constructor() {
    const linariaCacheDir = findCacheDir({
      name: `.linaria-${process.env.NODE_ENV}`,
      cwd: process.cwd(),
    });
    if (!linariaCacheDir) {
      throw new Error('Get linaria cache dir failed');
    }
    mkdirp.sync(linariaCacheDir);
    this.linariaCacheDir = linariaCacheDir;
  }

  async get(key) {
    return fs.promises.readFile(
      path.join(this.linariaCacheDir, `${hashFileName(key)}.css`),
      'utf8',
    );
  }

  async set(key, value) {
    return fs.promises.writeFile(
      path.join(this.linariaCacheDir, `${hashFileName(key)}.css`),
      value,
      'utf8',
    );
  }
}

module.exports = new LinariaFileCache();

Full demo is:

git clone git@github.com:ntucker/anansi.git
git checkout de8516c222556e578786c6ae77778ce3019d9230
yarn install from root
cd examples/linaria
yarn start

The text was updated successfully, but these errors were encountered:

ntucker · 2022-01-05T20:53:49Z

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/,
          ],

ntucker · 2022-01-05T20:57:25Z

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?

ntucker · 2022-01-05T22:51:47Z

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 match(moduleData.resource) the react-refresh plugin shoudl be doing match(moduleData.matchResource)?

Though it seems having type of 'javascript/auto' is still wrong here...

ntucker · 2022-01-05T23:01:10Z

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)

Anber · 2022-04-26T16:34:44Z

Hi @ntucker!
First of all, sorry for the disappearing. It was a rough time.

Looks like the problem can be solved by adding .webpack[asset] to the resource extension (eg. extension = '.linaria.css.webpack[asset]',). After that type field became correct. You can override extension option in your own config. If it helps, please let me know and I'll add this to the default extension option.

Anber · 2022-04-26T16:35:43Z

Details about different asset types can be found here

ntucker · 2022-04-26T21:52:43Z

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!

ntucker · 2022-04-26T22:01:55Z

Oh I think i figured it out - the option here: https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#options

ntucker · 2022-04-26T22:08:24Z

I set the option to extension: '.linaria.css.webpack[asset]', and it doesn't work. Did I misunderstand the suggestion?

ntucker · 2022-04-26T22:15:52Z

@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

ntucker · 2022-04-26T22:16:22Z

I don't see webpack[asset] anywhere on the linked doc here: https://webpack.js.org/guides/asset-modules/ so I'm not sure what this means.

ntucker · 2022-04-27T03:07:11Z

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 cacheProvider option

Anber · 2022-04-27T08:56:11Z

I don't see webpack[asset] anywhere on the linked doc here: https://webpack.js.org/guides/asset-modules/ so I'm not sure what this means.

This has the brief reference about webpack[asset]. https://webpack.js.org/guides/asset-modules/ is about different values of assets. Just adding .webpack[asset] to the extension option in your project makes it compilable, however by some unknown reasons styles aren't attached to the builded page.

Please let me know if you face the problem with javascript/auto again.

nicholasio · 2023-02-09T14:24:13Z

I'm still having this issue. webpack[asset] makes it compile but it never generates the actual compiled CSS file. I think adding that just makes webpack either skip compiling it at all or MiniCSSExtraction plugin doesn't know how to handle webpack[asset].

Without webpack[asset] I can get webpack to compile and generate CSS properly but it doesn't work at all in HMR and I get the same ReferenceError: window.

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.

nicholasio · 2023-02-10T16:13:53Z

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)
  ) {

https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/ac9dc02e4cfc6251e9790366df9d1fc61d810fcb/lib/utils/injectRefreshLoader.js#L28

On my tests moduleData.matchResource and moduleData.resource both refers to the original file not the "dynamic module" (I think it's how this is called) that includes the outputCssLoader.js. So I had to test against moduleData.request instead.

UPDATE: submitted a PR: pmmmwh/react-refresh-webpack-plugin#726

ntucker added bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided needs: triage 🏷 Issue needs to be checked and prioritized labels Jan 5, 2022

github-actions bot added bundler: webpack 📦 Issue is related to webpack bundler platform: ssr 🛠️ Issue related to SSR and removed needs: triage 🏷 Issue needs to be checked and prioritized labels Jan 5, 2022

ntucker mentioned this issue Jan 6, 2022

fix(webpack): replace file system cache with in-memory cache (fixes #878) #879

Merged

fxOne mentioned this issue Jan 6, 2022

[Chore] Storybook with webpack 5 draft-js-plugins/draft-js-plugins#2517

Merged

5 tasks

This was referenced Feb 7, 2022

webpack errors after update to 3.0.0-beta.16 #891

Open

pkg: @linaria/webpack5-loader to beta.17 ntucker/anansi#1374

Merged

ntucker mentioned this issue Apr 27, 2022

enhance: Switch back to mainstream linaria loader ntucker/anansi#1483

Merged

ntucker closed this as completed Apr 27, 2022

nicholasio mentioned this issue Feb 10, 2023

TypeError: Cannot read property 'exports' of undefined function getModuleExports(moduleId) { return __webpack_require__.c[moduleId].exports; } pmmmwh/react-refresh-webpack-plugin#245

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ReferenceError: window is not defined when using react-refresh-webpack-plugin #897

ReferenceError: window is not defined when using react-refresh-webpack-plugin #897

ntucker commented Jan 5, 2022 •

edited

ntucker commented Jan 5, 2022 •

edited

ntucker commented Jan 5, 2022 •

edited

ntucker commented Jan 5, 2022 •

edited

ntucker commented Jan 5, 2022 •

edited

Anber commented Apr 26, 2022

Anber commented Apr 26, 2022

ntucker commented Apr 26, 2022

ntucker commented Apr 26, 2022

ntucker commented Apr 26, 2022

ntucker commented Apr 26, 2022

ntucker commented Apr 26, 2022

ntucker commented Apr 27, 2022

Anber commented Apr 27, 2022

nicholasio commented Feb 9, 2023 •

edited

nicholasio commented Feb 10, 2023 •

edited

ReferenceError: window is not defined when using react-refresh-webpack-plugin #897

ReferenceError: window is not defined when using react-refresh-webpack-plugin #897

Comments

ntucker commented Jan 5, 2022 • edited

Environment

Description

Reproducible Demo

ntucker commented Jan 5, 2022 • edited

ntucker commented Jan 5, 2022 • edited

ntucker commented Jan 5, 2022 • edited

ntucker commented Jan 5, 2022 • edited

Anber commented Apr 26, 2022

Anber commented Apr 26, 2022

ntucker commented Apr 26, 2022

ntucker commented Apr 26, 2022

ntucker commented Apr 26, 2022

ntucker commented Apr 26, 2022

ntucker commented Apr 26, 2022

ntucker commented Apr 27, 2022

Anber commented Apr 27, 2022

nicholasio commented Feb 9, 2023 • edited

nicholasio commented Feb 10, 2023 • edited

ntucker commented Jan 5, 2022 •

edited

ntucker commented Jan 5, 2022 •

edited

ntucker commented Jan 5, 2022 •

edited

ntucker commented Jan 5, 2022 •

edited

ntucker commented Jan 5, 2022 •

edited

nicholasio commented Feb 9, 2023 •

edited

nicholasio commented Feb 10, 2023 •

edited