web-dev-qa-db-fra.com

fenêtre non définie erreur lors de l'utilisation de extract-text-webpack-plugin React

J'utilise webpack pour construire mes composants de réaction et j'essaie d'utiliser le extract-text-webpack-plugin pour séparer mes css de mon fichier js généré. Cependant, lorsque j'essaie de générer le composant, l'erreur suivante apparaît: Module build failed: ReferenceError: window is not defined.

Mon fichier webpack.config.js ressemble à ceci:

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

module.exports = {
  entry: {
    MainComponent: './src/main.js'
  },
  output: {
    libraryTarget: 'var',
    library: 'MainComponent',
    path: './build',
    filename: '[name].js'
  },
  module: {
    loaders: [{
      test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader!css-loader')
    }]
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
}
reactjswebpack
82
Ganonside

Vous voudrez peut-être utiliser style-loader comme argument before dans la fonction extract.

Voici l'implémentation native:

    ExtractTextPlugin.extract = function(before, loader, options) {
        if(typeof loader === "string") {
            return [
                ExtractTextPlugin.loader(mergeOptions({omit: before.split("!").length, extract: true, remove: true}, options)),
                before,
                loader
            ].join("!");
        } else {
            options = loader;
            loader = before;
            return [
                ExtractTextPlugin.loader(mergeOptions({remove: true}, options)),
                loader
            ].join("!");
        }
    };

Donc, fondamentalement, ce que vous devez faire est:

{
    test: /\.sass$/,
    exclude: /node_modules/,
    loader: ExtractTextPlugin.extract('style-loader', 'css!sass?indentedSyntax=true&sourceMap=true')
},

si vous utilisez par exemple sass.

59
Kamil Lelonek

N'ayant pas vu d'explication de la cause, j'ai posté cette réponse ici.

De https://github.com/webpack/extract-text-webpack-plugin#api

ExtractTextPlugin.extract([notExtractLoader], loader, [options]) crée un chargeur d'extraction à partir d'un chargeur existant.

notExtractLoader (facultatif) le (s) chargeur (s) à utiliser lorsque le css n'est pas extrait (c'est-à-dire dans un bloc supplémentaire lorsque allChunks: false)

loader le (s) chargeur (s) à utiliser pour convertir la ressource en un module d'exportation css.

options

publicPath remplace le paramètre publicPath pour ce chargeur.

Le #extract La méthode devrait recevoir un chargeur qui génère css. Qu'est-ce qui se passait, c'est qu'il recevait un style-loader qui génère du code javascript , destiné à être injecté dans une page Web. Ce code essaierait d'accéder à window.

Vous ne devriez pas passer une chaîne de chargement avec style à #extract. Cependant ... si vous définissez allChunks=false, alors il ne construira pas de fichiers CSS pour des morceaux non initiaux. Par conséquent, il doit savoir quel chargeur utiliser pour l’injection dans la page.

Conseil: Webpack est un outil qui doit être approfondi, sinon vous pouvez rencontrer beaucoup de problèmes étranges.

43
vaughan

Webpack 2

Si vous utilisez Webpack 2, cette variante fonctionne:

    rules: [{
        test: /\.css$/,
        exclude: '/node_modules/',
        use: ExtractTextPlugin.extract({
            fallback: [{
                loader: 'style-loader',
            }],
            use: [{
                loader: 'css-loader',
                options: {
                    modules: true,
                    localIdentName: '[name]__[local]--[hash:base64:5]',
                },
            }, {
                loader: 'postcss-loader',
            }],
        }),
    }]

La nouvelle méthode d'extraction ne prend plus trois arguments et est répertoriée comme un changement radical lors du passage de V1 à V2.

https://webpack.js.org/guides/migrating/#extracttextwebpackplugin-breaking-change

20
Chris

J'ai trouvé la solution à mon problème:

Au lieu de raccorder les chargeurs les uns aux autres (ExtractTextPlugin.extract('style-loader!css-loader')), vous devez indiquer chaque chargeur en tant que paramètre distinct: ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')

12
Ganonside