Trouble tracking down `self is not defined` issue

[tyler-dot-earth]

Base repo (w/ issue referred to below): https://github.com/tsnieman/webpack2test/tree/road-to-isomorphism_pothole1

Note: isomorphic-webpack works in the same repo here... the _pothole1 branch is just for illustrating the issue below. That's the only difference between the two.

I've got isomorphic-webpack working on a basic level in this test repo, but I'm having issues tracking down an issue which presents itself as the error below.

ReferenceError: self is not defined
   at isomorphic-webpack:271:30
   at isomorphic-webpack:266:47
   at module.exports (isomorphic-webpack:288:68)
   at Object.<anonymous> (isomorphic-webpack:1150:36)
   at __webpack_require__ (isomorphic-webpack:26:30)
   at Object.defineProperty.value (isomorphic-webpack:867:68)
   at __webpack_require__ (isomorphic-webpack:26:30)
   at Object.defineProperty.value (isomorphic-webpack:920:64)
   at __webpack_require__ (isomorphic-webpack:26:30)
   at Object.defineProperty.value (isomorphic-webpack:734:70)

Which seems to happen when I try to use the Home page component in the Router. Digging further, I discovered that it really only throws the self is not defined error when I include the line import styles from './Home.css'; (implicit or named import, doesn't matter).

Not, my CSS loader situation is something like this:

// webpack config
      // CSS
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 2,
              localIdentName: '[path]__[name]__[local]__[hash:base64:5]',
            },
          },
          'postcss-loader', // options in postcss.config.js
        ],
      },

At this point, I'm pretty deep into this and not sure how to continue to debug from the original error message. Might be two issues here:

1. how do I debug more thoroughly from the given message? I'm using DEBUG=isomorphic-webpack but it mostly just mirrors what was spit out in the browser (original error at top).

2. my problem of "why does importing css cause this".

Any insight into either issue would be helpful @gajus / other contributors. Thank you very much.

If it would be helpful, I would be happy to strip my repo down even more (since I might end up doing this anyway), but hoping that I pointed out all the important parts.

[gajus]

@tsnieman Are you using the error handler https://github.com/gajus/isomorphic-webpack#isomorphic-webpack-handling-errors ?

[tyler-dot-earth]

@gajus Does formatErrorStack work anymore without the isomorphicMiddleware?

1. couldn't find much about middleware for this project anymore, but see it mentioned a lot in docs

2. I just tried adding formatErrorStack into my server code, but it didn't seem to output anything additional/different -- just the same self is not defined. Not sure if I am using this correctly either -- I'm using async/await + createCompilationPromise right now.

[gajus]

The change you did seems to be correct. It is supposed to replace isomorphic-webpack:288:68 with references to the real code thats causing the problem.

[laggingreflex]

I was getting the same error and I upgraded the dependencies (especially the css-loader and style-loader, as pointed out in #20 that it's related to css/import) in both isomorphic-webpack and isomorphic-webpack-demo which solved it for me.

[tyler-dot-earth]

@laggingreflex Thanks for the idea. Though I never had issues with isomorphic-webpack-demo, and isomorphic-webpack works when I don't import CSS. Regardless, I upgraded my dependencies, but the problem still persists.

[laggingreflex]

Sorry it was actually downgrading the dependencies that helped, not upgrading.

The error seems to be coming from here: https://github.com/webpack-contrib/style-loader/blob/master/addStyles.js#L14.

return /msie [6-9]\b/.test(self.navigator.userAgent.toLowerCase());

Replacing self with window makes it work.

Edit: I'm only testing this out in isomorphic-webpack-demo for now, haven't actually integrated in any projects. But this change (replacing window with self for better service worker support (https://github.com/webpack-contrib/style-loader/commit/9dc45a6dee16553a64071031d18feb1562df86a2)) might've been made in other projects (other than style-loader) as well.? It only affects server-side rendering so it might not be noticeable in those projects' tests which might be only testing in/for browser envs.

[gajus]

I have left a comment with the original commit:

For the record, this broke change broke isomorphic-webpack. https://github.com/gajus/isomorphic-webpack/issues/20#issuecomment-287445277 Perhaps a window.self would have been a safer change?

– https://github.com/webpack-contrib/style-loader/commit/9dc45a6dee16553a64071031d18feb1562df86a2#commitcomment-21377913

[tyler-dot-earth]

@laggingreflex Fantastic find! Rolling back to [email protected] fixed my issue! How in the world did you track that down? Impressive.

@gajus Thanks for commenting on the upstream issue.

EDIT: I suppose this is still open because the errors aren't working though, right? or?