gajus / gajus/isomorphic-webpack

Trouble tracking down `self is not defined` issue

Open
#20 8 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
289
Forks
16
PR merge metrics
No merged PRs in 30d

Description

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](https://github.com/tsnieman/webpack2test/tree/road-to-isomorphism)... the `_pothole1` branch is just for illustrating the issue below. That's [the only difference between the two](https://github.com/tsnieman/webpack2test/commit/42c7910ef95b1b6ea3d7718793281990d06487ba).

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. (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](https://github.com/tsnieman/webpack2test/blob/42c7910ef95b1b6ea3d7718793281990d06487ba/src/components/app/RootRouter/RootRouter.jsx#L22). 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](https://github.com/tsnieman/webpack2test/blob/42c7910ef95b1b6ea3d7718793281990d06487ba/config/webpack.config.dev.js#L77-L87):
```
// 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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.