webpack-isomorphic-tools/plugin ReferenceError: window is not defined about webpack-isomorphic-tools HOT 11 OPEN

For some reason it's loading style-loader-processed assets instead of the uproccessed ones.
Dunno.
Honestly I haven't been supporting this project too much for a while now.
Consider universal-webpack maybe, or there's a ton of other SSR alternatives.

from webpack-isomorphic-tools.

@hrasekh Did you solve this problem?

from webpack-isomorphic-tools.

@skywickenden No, I still get the error, and I could not figure it out what's the problem

from webpack-isomorphic-tools.

Are you using style-loader inside ExtractTextPlugin?
If yes then remove it from there.
webpack-contrib/extract-text-webpack-plugin#503 (comment)

from webpack-isomorphic-tools.

In Webpack config:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));

{ test: /\.less$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?modules&importLoaders=2&sourceMap!autoprefixer-loader?browsers=last 2 version!less-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true' }) },
      { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?modules&importLoaders=2&sourceMap!autoprefixer-loader?browsers=last 2 version!sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true' }) },

In font Awesome config

const ExtractTextPlugin = require('extract-text-webpack-plugin');
fontAwesomeConfig.styleLoader = ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!less-loader' });
fontAwesomeConfig.styleLoader = buildExtractStylesLoader(ExtractTextPlugin.extract({
  fallback: 'style-loader',
  use: ['css-loader', 'less-loader'],
}));

In Bootstrap Config:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
bootstrapConfig.styleLoader = ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader' });

from webpack-isomorphic-tools.

I've just solved that error by using isomorphic-style-loader instead of style-loader. Still working on other errors though, so not sure if it is a complete solution

from webpack-isomorphic-tools.

@hrasekh Don't know, your ExtractTextPlugin config looks ok.
Perhaps you could try commenting-out all require()s in your code and uncommenting them one-by-one to find which one is causing the error.
Other than that, don't know what could be causing the issue - webpack configs are extremely complicated with lots of moving parts inside them and each project has their own home-made webpack config.

from webpack-isomorphic-tools.

@skywickenden perhaps...
The issue seems to be that assets loaded using style-loader are being require()d on the server side.
While webpack-isomorphic-tools does workaround that by excluding style-loadered assets and require()ing just the text CSS instead (before it goes through style-loader) it may not work in some specific scenario: the require() workaround has been tested for simple configs like style-loader!css-loader!... and there is a possibility that for a more complex webpack config it could break.
I myself migrated my project to universal-webpack a long time ago and I think webpack-isomorphic-tools is a messy solution: it was OK when the whole thing started but turned out to be very hacky.

from webpack-isomorphic-tools.

Updated the readme:

webpack-isomorphic-tools is a small helper module providing very basic support for isomorphic (universal) rendering when using Webpack. It was created a long time ago when Webpack was v1 and the whole movement was just starting. Therefore webpack-isomorphic-tools is a hacky solution. It allowed many projects to set up basic isomorphic (universal) rendering in the early days but is now considered deprecated and new projects shouldn't use it. This library can still be found in legacy projects. For new projects use either universal-webpack or all-in-one frameworks like Next.js.

from webpack-isomorphic-tools.

I'm working on one of those legacy projects. Just trying to update some packages, but is turning into a bit of Gordian knot.

next.js looks good, but it would take a couple of months to refactor the whole project to use it! I'll just have to keep plugging away at the errors.

from webpack-isomorphic-tools.

from webpack-isomorphic-tools.