Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.
This repository was archived by the owner on May 29, 2019. It is now read-only.

Module build failed: ReferenceError: window is not defined #503

Closed
Closed
Module build failed: ReferenceError: window is not defined#503
@bonesoul

Description

@bonesoul
bonesoul
opened on May 17, 2017

"extract-text-webpack-plugin": "2.1.0",

my webpack config;

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    frontend: './assets/js/frontend/frontend.js',
    backend: './assets/js/backend/backend.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './public/dist'),
    publicPath: '/dist/'
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.(jpe?g|gif|png|eot|svg|woff|woff2|ttf)$/, use: 'file-loader' }, // font & image loader
      { test: require.resolve('jquery'), use: [{ loader: 'expose-loader', options: '$' }] }, // globally expose $ for jQuery.
      { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['style-loader', 'css-loader'] }) },
    ],
  },
  resolve: {
    modules: [
      'node_modules',
      'assets/vendor/components'
    ],
    alias: { 'jquery': require.resolve('jquery') }
  },
  plugins: [
    new webpack.ProvidePlugin({ $: 'jquery', jquery: 'jquery' }),
    new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true }),
    new webpack.IgnorePlugin(/\.\/locale$/), // Fixes warning in moment-with-locales.min.js; Module not found: Error: Can't resolve './locale' in ...
  ]
};

getting errors;

λ webpack
Hash: b347f99bdbe1c87b6fb6
Version: webpack 2.5.1
Time: 2176ms
                                 Asset     Size  Chunks                    Chunk Names
  674f50d287a8c48dc19ba404d20fe713.eot   166 kB          [emitted]
  912ec66d7572ff821749319396470bde.svg   444 kB          [emitted]  [big]
  b06871f281fee6b241d60582ae9369b9.ttf   166 kB          [emitted]
af7ae505a9eed503f8b8e6982036873e.woff2  77.2 kB          [emitted]
 fee66e712a8a08eef5805a46892932ad.woff    98 kB          [emitted]
                           frontend.js  2.45 MB       0  [emitted]  [big]  frontend
                            backend.js  2.43 MB       1  [emitted]  [big]  backend
   [0] ./~/jquery/dist/jquery.js 57 bytes {0} {1} [built]
   [4] ./assets/js/common/common.js 641 bytes {0} {1} [built]
   [5] ./assets/js/common/components.js 2.84 kB {0} {1} [built]
   [6] ./assets/js/common/editor.js 2.63 kB {0} {1} [built]
  [11] ./assets/js/common/theme.js 711 bytes {0} {1} [built]
  [73] ./assets/js/backend/moderation.js 2.31 kB {1} [built]
  [74] ./assets/js/backend/styles.js 496 bytes {1} [built]
  [75] ./assets/js/frontend/adguard.js 3.6 kB {0} [built]
  [76] ./assets/js/frontend/comment.js 11.7 kB {0} [built]
  [77] ./assets/js/frontend/flavors.js 2.04 kB {0} [built]
  [78] ./assets/js/frontend/mixer.js 5.87 kB {0} [built]
  [79] ./assets/js/frontend/recipe.js 1.11 kB {0} [built]
  [80] ./assets/js/frontend/styles.js 498 bytes {0} [built]
  [81] ./assets/js/backend/backend.js 799 bytes {1} [built]
  [82] ./assets/js/frontend/frontend.js 559 bytes {0} [built]
    + 68 hidden modules

ERROR in ./~/css-loader!./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/style-loader!./~/style-loader!./~/css-loader!./~/font-awesome/css/font-awesome.css
Module build failed: ReferenceError: window is not defined
    at E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css:106:10
    at E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css:96:47
    at module.exports.module.exports (E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css:134:68)
    at Object.<anonymous> (E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css:625:36)
    at __webpack_require__ (E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css:21:30)
    at E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css:67:18
    at Object.<anonymous> (E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css:70:10)
    at Module._compile (module.js:571:32)
    at Object.exec (E:\Coding\vapingdb\node_modules\webpack\lib\NormalModule.js:126:12)
    at Object.<anonymous> (E:\Coding\vapingdb\node_modules\extract-text-webpack-plugin\loader.js:112:21)
    at Compiler.<anonymous> (E:\Coding\vapingdb\node_modules\webpack\lib\Compiler.js:296:10)
    at E:\Coding\vapingdb\node_modules\webpack\lib\Compiler.js:499:13
    at next (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:138:11)
    at Compiler.<anonymous> (E:\Coding\vapingdb\node_modules\extract-text-webpack-plugin\loader.js:93:4)
    at next (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:140:14)
    at Compiler.<anonymous> (E:\Coding\vapingdb\node_modules\webpack\lib\CachePlugin.js:62:5)
    at Compiler.applyPluginsAsyncSeries (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:142:13)
    at E:\Coding\vapingdb\node_modules\webpack\lib\Compiler.js:496:10
    at Compilation.applyPluginsAsyncSeries (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:131:46)
    at self.applyPluginsAsync.err (E:\Coding\vapingdb\node_modules\webpack\lib\Compilation.js:649:19)
    at Compilation.applyPluginsAsyncSeries (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:131:46)
    at self.applyPluginsAsync.err (E:\Coding\vapingdb\node_modules\webpack\lib\Compilation.js:640:11)
    at Compilation.applyPluginsAsyncSeries (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:131:46)
    at self.applyPluginsAsync.err (E:\Coding\vapingdb\node_modules\webpack\lib\Compilation.js:635:10)
    at Compilation.applyPluginsAsyncSeries (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:131:46)
    at sealPart2 (E:\Coding\vapingdb\node_modules\webpack\lib\Compilation.js:631:9)
    at Compilation.applyPluginsAsyncSeries (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:131:46)
    at Compilation.seal (E:\Coding\vapingdb\node_modules\webpack\lib\Compilation.js:579:8)
    at E:\Coding\vapingdb\node_modules\webpack\lib\Compiler.js:493:16
    at E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:225:11
 @ ./~/font-awesome/css/font-awesome.css 4:14-207
 @ ./assets/js/common/fonts.js
 @ ./assets/js/common/common.js
 @ ./assets/js/backend/backend.js

ERROR in ./~/css-loader!./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/style-loader!./~/style-loader!./~/css-loader!./~/font-awesome/css/font-awesome.css
Module build failed: ReferenceError: window is not defined
    at E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css:106:10
    at E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css:96:47
    at module.exports.module.exports (E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css:134:68)
    at Object.<anonymous> (E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css:625:36)
    at __webpack_require__ (E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css:21:30)
    at E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css:67:18
    at Object.<anonymous> (E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css:70:10)
    at Module._compile (module.js:571:32)
    at Object.exec (E:\Coding\vapingdb\node_modules\webpack\lib\NormalModule.js:126:12)
    at Object.<anonymous> (E:\Coding\vapingdb\node_modules\extract-text-webpack-plugin\loader.js:112:21)
    at Compiler.<anonymous> (E:\Coding\vapingdb\node_modules\webpack\lib\Compiler.js:296:10)
    at E:\Coding\vapingdb\node_modules\webpack\lib\Compiler.js:499:13
    at next (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:138:11)
    at Compiler.<anonymous> (E:\Coding\vapingdb\node_modules\extract-text-webpack-plugin\loader.js:93:4)
    at next (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:140:14)
    at Compiler.<anonymous> (E:\Coding\vapingdb\node_modules\webpack\lib\CachePlugin.js:62:5)
    at Compiler.applyPluginsAsyncSeries (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:142:13)
    at E:\Coding\vapingdb\node_modules\webpack\lib\Compiler.js:496:10
    at Compilation.applyPluginsAsyncSeries (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:131:46)
    at self.applyPluginsAsync.err (E:\Coding\vapingdb\node_modules\webpack\lib\Compilation.js:649:19)
    at Compilation.applyPluginsAsyncSeries (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:131:46)
    at self.applyPluginsAsync.err (E:\Coding\vapingdb\node_modules\webpack\lib\Compilation.js:640:11)
    at Compilation.applyPluginsAsyncSeries (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:131:46)
    at self.applyPluginsAsync.err (E:\Coding\vapingdb\node_modules\webpack\lib\Compilation.js:635:10)
    at Compilation.applyPluginsAsyncSeries (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:131:46)
    at sealPart2 (E:\Coding\vapingdb\node_modules\webpack\lib\Compilation.js:631:9)
    at Compilation.applyPluginsAsyncSeries (E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:131:46)
    at Compilation.seal (E:\Coding\vapingdb\node_modules\webpack\lib\Compilation.js:579:8)
    at E:\Coding\vapingdb\node_modules\webpack\lib\Compiler.js:493:16
    at E:\Coding\vapingdb\node_modules\tapable\lib\Tapable.js:225:11

ERROR in E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\extract-text-webpack-plugin\loader.js?{"omit":1,"remove":true}!E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css doesn't export content

ERROR in E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\extract-text-webpack-plugin\loader.js?{"omit":1,"remove":true}!E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\style-loader\index.js!E:\Coding\vapingdb\node_modules\css-loader\index.js!E:\Coding\vapingdb\node_modules\font-awesome\css\font-awesome.css doesn't export content
Child extract-text-webpack-plugin:
       [0] ./~/css-loader!./~/font-awesome/css/font-awesome.css 42 kB {0} [built]
       [1] ./~/style-loader/addStyles.js 9.15 kB {0} [built]
       [2] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [3] ./~/font-awesome/fonts/fontawesome-webfont.eot 82 bytes {0} [built]
       [4] ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 82 bytes {0} [built]
       [5] ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0 82 bytes {0} [built]
       [6] ./~/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0 82 bytes {0} [built]
       [7] ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 84 bytes {0} [built]
       [8] ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0 83 bytes {0} [built]
       [9] ./~/style-loader/fixUrls.js 3.01 kB {0} [built]
        + 1 hidden modules
Child extract-text-webpack-plugin:
                                     Asset     Size  Chunks                    Chunk Names
      674f50d287a8c48dc19ba404d20fe713.eot   166 kB          [emitted]
      912ec66d7572ff821749319396470bde.svg   444 kB          [emitted]  [big]
      b06871f281fee6b241d60582ae9369b9.ttf   166 kB          [emitted]
    af7ae505a9eed503f8b8e6982036873e.woff2  77.2 kB          [emitted]
     fee66e712a8a08eef5805a46892932ad.woff    98 kB          [emitted]
       [0] ./~/css-loader!./~/font-awesome/css/font-awesome.css 42 kB {0} [built]
       [1] ./~/style-loader/addStyles.js 9.15 kB {0} [built]
       [2] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [3] ./~/font-awesome/fonts/fontawesome-webfont.eot 82 bytes {0} [built]
       [4] ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 82 bytes {0} [built]
       [5] ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0 82 bytes {0} [built]
       [6] ./~/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0 82 bytes {0} [built]
       [7] ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 84 bytes {0} [built]
       [8] ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0 83 bytes {0} [built]
       [9] ./~/style-loader/fixUrls.js 3.01 kB {0} [built]
        + 1 hidden modules

any ideas?

Activity

michael-ciniawsky

michael-ciniawsky commented on May 17, 2017

@michael-ciniawsky
michael-ciniawsky
on May 17, 2017
Member
- { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['style-loader', 'css-loader'] }) },
+ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ 'css-loader' ] }) },

Remove style-loader from ExtractTextPlugin.extract().use it should be on the fallback only

michael-ciniawsky
closed this as completedon May 17, 2017
alexander-akait

alexander-akait commented on May 17, 2017

@alexander-akait
alexander-akait
on May 17, 2017
Member

@michael-ciniawsky maybe we can throw error if somebody try to use style-loader in use?

michael-ciniawsky

michael-ciniawsky commented on May 17, 2017

@michael-ciniawsky
michael-ciniawsky
on May 17, 2017
Member

yep 😛, seems like it's needed, folks don't read the docs :D

bonesoul

bonesoul commented on May 17, 2017

@bonesoul
bonesoul
on May 17, 2017
Author

seems i missed it thanks for the help.

mlynch

mlynch commented on May 26, 2017

@mlynch
mlynch
on May 26, 2017

Thanks, also got bit by this. Probably confusion is coming from a config not using extract-text then moving to it, it's not clear that style-loader has to be removed from your loaders list for that rule.

sbadri2001

sbadri2001 commented on Aug 1, 2017

@sbadri2001
sbadri2001
on Aug 1, 2017

Can someone explain why removing style-loader from the list of loaders and having that in fallback alone does the trick?

PezCoder

PezCoder commented on Aug 7, 2017

@PezCoder
PezCoder
on Aug 7, 2017 · edited by PezCoder

@sbadri2001 Acc to documentation:
This is what style-loader do:

Adds CSS to the DOM by injecting a <style> tag

& this is what ExtractTextWebpackPlugin do:

extract text from a bundle, or bundles, into a separate file.

You'll probably never need to do both at one place but it's great to have inlining as a fallback to when ExtractTextWebpackPlugin fails.

vlmonk
mentioned this on Sep 1, 2017
peterpeterparker

peterpeterparker commented on Sep 9, 2017

@peterpeterparker
peterpeterparker
on Sep 9, 2017 · edited by peterpeterparker

Just gonna let that here, faced the same problem, finally after trying different solutions, what worked for me was just removing the fallback

{
    test: /\.css$/,
    use: ['to-string-loader'].concat(ExtractTextPlugin.extract({
      //fallback: 'style-loader', <====== There, commented that line and it solved my problem
      use: [
        {
          loader: 'css-loader', options: {
            minimize: true,
            sourceMap: true
          }
        }
      ]
    }))
  }
mygaochunming
mentioned this on Dec 1, 2017
LoganBarnett
mentioned this on Dec 14, 2017
clodal
added a commit that references this issue on Jan 2, 2018

removed styled loader in webpack config (webpack-contrib/extract-text…

564b2fa
catamphetamine
mentioned this on Feb 7, 2018
codevvvv9

codevvvv9 commented on Feb 13, 2018

@codevvvv9
codevvvv9
on Feb 13, 2018

@michael-ciniawsky it's ok，but my style is scss, convert css don't work.
this is webpack.config.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    scss: './src/css/main.scss', 
    bundle: './src/js/app.js'
  },
   
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, 'dist/js')
    // publicPath: "/output/"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          
          use: [{
              //because remove style-loader,my css can't work
              loader: "css-loader", options: { importLoaders: 1 }// translates CSS into CommonJS
          }, {
              loader: "postcss-loader"
          }, {
              loader: "sass-loader" // compiles Sass to CSS
          }]
        })
      },
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader',
          options: {
            minimize: true
          }
        }
      }	  
    ]
  },
  plugins: [
    new CopyWebpackPlugin([ {
      from: 'src/index.html',
      to: '../index.html',
      toType: 'file'
    }], { copyUnmodified: true }),
    new ExtractTextPlugin({
      filename:  (getPath) => {
        return getPath('../main.css').replace('../js', '../css');
      },
      allChunks: true
    })
  ]
};

my app.js is convert bundle.js

import x from './module-1.js'
import y from './module-2.js'
import '../css/main.scss' //it's my desire
x() 
y()

7 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @mlynch@bonesoul@alexander-akait@michael-ciniawsky@sbadri2001

        Issue actions
          Module build failed: ReferenceError: window is not defined · Issue #503 · webpack-contrib/extract-text-webpack-plugin