webpack-isomorphic-tools/plugin ReferenceError: window is not defined
hrasekh opened this issue · comments
When I Run
webpack --verbose --colors --display-error-details --config webpack/prod.config.js
I Get the following error:
[webpack-isomorphic-tools/plugin] [error] ReferenceError: window is not defined
at !../../../node_modules/style-loader/addStyles.js.webpack-module:20:3
at !../../../node_modules/style-loader/addStyles.js.webpack-module:10:47
at module.exports (!../../../node_modules/style-loader/addStyles.js.webpack-module:48:68)
at Object. (/home/user//style-loader!.//css-loader!./~/less-loader!./src/components/MainStyle/MainStyle.scss.webpack-module:8:73)
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.
@hrasekh Did you solve this problem?
@skywickenden No, I still get the error, and I could not figure it out what's the problem
Are you using style-loader inside ExtractTextPlugin?
If yes then remove it from there.
webpack-contrib/extract-text-webpack-plugin#503 (comment)
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' });
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
@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.
@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.
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.
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.