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

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

Closed
bonesoul opened this issue May 17, 2017 · 10 comments
Closed

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

bonesoul opened this issue May 17, 2017 · 10 comments

Comments

@bonesoul
Copy link

"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?

@michael-ciniawsky
Copy link
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

@alexander-akait
Copy link
Member

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

@michael-ciniawsky
Copy link
Member

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

@bonesoul
Copy link
Author

seems i missed it thanks for the help.

@mlynch
Copy link

mlynch commented 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
Copy link

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

@PezCoder
Copy link

PezCoder commented Aug 7, 2017

@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.

@peterpeterparker
Copy link

peterpeterparker commented Sep 9, 2017

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
          }
        }
      ]
    }))
  }

@codevvvv9
Copy link

@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()

@Shenmin-Z
Copy link

For people using Vue, vue-style-loader would need to be removed (which was my problem).

sunginHwang added a commit to sunginHwang/react-next-studty that referenced this issue Jul 1, 2018
* 공통 메인 라우터 작업 삽질기

1. 라우팅 전 공통 처리기 _app 작업중 게속 안되서 이상하니 APP, Container 컴포넌트가 next 버전 차이였는지 모듈이 없었음. 다시 latest 버전 설치하니 정상 작동

2. with-redux 등 게속 안되서 example 에서의 실 소스로 lib 에 적용하여 알게된건
결국 window 객체가 존재 안하는데 내가작성한 store에서 redux-dev-tool 부분에서 사용한 window 객체가 사용하는것을 확인

3. (2)번에서 지운 내용으로도 안되서 확인 결과 style-loader module 에서 window 에 대한 window is not found 이슈가 존재 하는 부분 확인 후 이부분 처리하니 이상 없음 확인 style-loader 의 대체 방법을 찾아야 한다.

--todo
style-loader 에 대한 우회 처리 방안
straw-hat-labs/phoenix_assets_webpack#53
webpack-contrib/extract-text-webpack-plugin#503
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants