2
respostas

Erro ao executar o comando de build, após instalar o "file-loader" e "html-loader"

Erro apresentado ao tentar buildar

Html Webpack Plugin:
  Error: C:\Users\kewin\Desktop\Projeto Alura\projeto_petShop\client/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:93
    var style = document.createElement('style');
                ^
  ReferenceError: document is not defined

  - injectStylesIntoStyleTag.js?:93 insertStyleElement
    [.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:93:15

  - injectStylesIntoStyleTag.js?:208 addStyle
    [.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:208:13

  - injectStylesIntoStyleTag.js?:81 modulesToDom
    [.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:81:18

  - injectStylesIntoStyleTag.js?:239 module.exports
    [.]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js?:239:25

  - clientes.css?:15 eval
    C:\Users\kewin\Desktop\Projeto Alura\projeto_petShop\client/src/assets/css/clientes.css?:15:14

  - clientes.html:168 Object../src/assets/css/clientes.css
    C:/Users/kewin/Desktop/Projeto Alura/projeto_petShop/client/src/clientes.html:168:1

  - clientes.html:21 __webpack_require__
    C:/Users/kewin/Desktop/Projeto Alura/projeto_petShop/client/src/clientes.html:21:30

  - listagem-cliente.js?:3 eval
    C:\Users\kewin\Desktop\Projeto Alura\projeto_petShop\client/src/componentes/lista/listagem-cliente.js?:3:82

  - clientes.html:192 Module../src/componentes/lista/listagem-cliente.js
    C:/Users/kewin/Desktop/Projeto Alura/projeto_petShop/client/src/clientes.html:192:1

  - clientes.html:21 __webpack_require__
    C:/Users/kewin/Desktop/Projeto Alura/projeto_petShop/client/src/clientes.html:21:30

Config webpack:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = { 
    mode: "development",
    devServer: {
        open: true,
        contentBase: "dist"
    },
    entry: "./src/componentes/lista/listagem-cliente.js",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "dist"
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/clientes.html",
            filename: "index.html"
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.html$/,
                use: ["html-loader"]
            },
            {
                test: /\.png$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]"
                    }
                }
            }
        ]
    } 
}

O erro só acontece quando insiro essa parte da config:

            {
                test: /\.png$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]"
                    }
                }
            }
2 respostas

Oi, Kewin, tudo bem?

Eu fiz o teste com o código acima que você disponibilizou e não obtive erros. Compartilha aqui o seu package.json para que possa entender melhor o que possa ter acontecido.

Já resolvi, acredito que era problema da vers. de alguma lib. Reinstalei todas elas, com as vers. apresentadas no vídeo, e funcionou.

Obrigado!