ReferenceError: self is not defined

[What are you searching?]

error - ./styles/base.min.css
ReferenceError: self is not defined

Hi, I got this error with @zeit/next-css the css file import from _app.js

module.exports = withPreact(
   withCSS({
      webpack(config) {
         // retrieve the rule without knowing its order
         const jsLoaderRule = config.module.rules.find(
            (rule) => rule.test instanceof RegExp && rule.test.test(".js")
         );

         const linariaLoader = {
            loader: "linaria/loader",
            options: {
               displayName: process.env.NODE_ENV !== "production",
               sourceMap: false,
            },
         };
         if (Array.isArray(jsLoaderRule.use)) {
            jsLoaderRule.use.push(linariaLoader);
         } else {
            jsLoaderRule.use = [jsLoaderRule.use, linariaLoader];
         }
         return config;
      },
   })
);

[Sven]

Thanks for the report. I tracked down the issue to be an incompatibility between mini-css-extract-plugin and prefresh. I'll take a deeper look

[Sven]

Thanks to @JoviDeCroock we could track down the issue to be in the prefresh next.js plugin. I'll work with him to provide a fix

[Sven]

@JoviDeCroock just published @prefresh/next@1.3.0 where we fixed this issue. I published next-plugin-preact@3.0.2 that will upgrade @prefresh/next. If you upgrade your deps it should all work now.