web-dev-qa-db-fra.com

Erreur 'fenêtre non définie' lors de l'utilisation de style-loader avec webpack

Construire une application de réaction côté serveur et lors de l'utilisation de Webpack, j'ai des problèmes avec Style-Loader.

J'utilise la version "^ 0.23.1" et lors de l'exécution d'un script pour regrouper et construire, il y a un problème avec Style-Loader.

Le problème est window is not defined

webpack:///./node_modules/style-loader/lib/addStyles.js?:23
    return window && document && document.all && !window.atob;

Quelqu'un at-il rencontré ce problème? Après avoir parcouru Stack et les problèmes de Github pour le style-loader, je ne trouve aucune solution.

Voici mon fichier webpack:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  // webpack to use node
  target: 'node',
  entry: './src/index.js',
  output: {
    filename: 'client-build.js',
    path: path.resolve(__dirname, 'build/public'),
    publicPath: '/build/public'
  },
  module: {
    rules: [
      {
        test: /\.js$|\.jsx$/,
        loader: 'babel-loader',
        exclude: '/node_modules/',
        options: {
          presets: [
            '@babel/preset-react'
          ]
        }
      },
      {
        test: /\.(s*)css$/,
        loader: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.jpeg$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$|\.jpg$|\.pdf$/,
        loader: 'file-loader',
        query: {
          name: 'assets/img/[name].[ext]'
        },
      },
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      "React": "react",
    }),
  ],
}

S'il y a autre chose que vous devez voir, je peux le poster.

reactjswebpackwebpack-style-loader
9
T. Evans

Je pense que votre problème est qu'il n'y a pas d'objet window lors de l'exécution du code js sur un serveur de noeud. Ce qui est également logique, car votre serveur n'a pas de fenêtre où votre code est rendu. Vous pouvez utiliser à la place l'objet global pour les références globales, voir cet article associé ici: node.js a-t-il l'équivalent d'un objet window dans le navigateur

5
Jan-Luca Klees

style-loader essaie d'injecter des styles dans le head du site Web (window/document), qui seront inexistants sur votre serveur lors du rendu/exécution.

Vous devez supprimer ce chargeur de votre configuration de serveur et le remplacer par quelque chose d'autre (par exemple ExtractTextPlugin ou MiniCSSExtractplugin , selon la version de votre webpack)

4
Rouby

J'ai eu ce problème où j'avais besoin de certains thèmes et styles d'une bibliothèque de composants qui à son tour utilisait webpack et style-loader.
Mon projet était un script pur et est censé générer des fichiers et n'avait donc pas de navigateur. Il ne compilerait pas du tout puisque le chargeur de style (et certaines autres bibliothèques) tentaient d'injecter des styles dans la balise.
J'ai fini par me moquer de la fenêtre et du document pour que le projet importé puisse être compilé.

NOTEZ que cela a fonctionné dans mon cas où je n'avais besoin que d'une partie mineure de ma bibliothèque de composants, si vous l'utilisez dans un projet plus compliqué, il y aura probablement quelques bugs étranges. Mais cela pourrait aider quelqu'un à comprendre un problème similaire

Exécutez ceci avant de faire l'importation réelle
Étant donné que c'est l'importation réelle qui cause le problème, vous devez faire le piratage avant d'importer.

import * as Hack from './hack/StyleLoaderHack';
Hack.runHack();
...
import {X} from 'your library'

StyleLoaderHack.js

class HackStyle {
    position;

    constructor() {
        this.position = [];
    }
}

class HackElement {
    className;
    childNodes;
    style;

    constructor(tag) {
        this.className = tag;
        this.attributes = [];
        this.childNodes = [];
        this.style = new HackStyle();
    }

    appendChild = (child) => {
        let append;
        if (!(child instanceof HackElement)) {
            append = new HackElement(child);
        } else {
            append = child;
        }
        this.childNodes.Push(append);
        return append;
    };

    insertBefore = (newChild, refChild) => {
        let insert;
        if (!(newChild instanceof HackElement)) {
            insert = new HackElement(newChild);
        } else {
            insert = child;
        }
        this.childNodes.Push(insert);
    };

    setAttribute = (qualifiedName, value) => {
        // sketchy but works
        this.attributes.Push(qualifiedName);
        this.attributes.Push(value);
    };
}

class HackDocument {
    head;

    constructor() {
        this.head = new HackElement("head");
    }

    createElement = (tagName) => {
        const element = new HackElement(tagName);
        return element;
    };

    querySelector = (target) => {
        const node = new HackElement(target);
        return node;
    };

    querySelectorAll = (target) => {
        if (target === "[data-emotion-css]") {
            return [];
        }
        const node = new HackElement(target);
        return [node];
    };

    createTextNode = (data) => {
        return new HackElement(data);
    };
}


/**
 * Adds some function to global which is needed to load style-loader, emotion, create-emotion and react-table-hoc-fixed-columns.
 */
export const runHack = () => {
    global.window = {};

    const hackDocument = new HackDocument();
    global.document = hackDocument;
};
0
Joakim Palmkvist

Si je l'ai bien compris, je pense que vous essayez d'utiliser le chargeur de style pour regrouper le code côté serveur.Si c'est le cas, essayez de le faire au lieu de le faire:

    loader: ['style-loader', 'css-loader', 'sass-loader']

Essaye ça:

    loader: ['css-loader/locals', 'sass-loader']

Le chargeur de style n'est pas censé être utilisé sur le code côté serveur. Nous fournissons donc une sorte de chargeur nul au lieu de chargeur css et supprimons le chargeur de style. Cela devrait faire l'affaire, je suppose.

0
Spider