Tipo no utilizado Error: No se puede leer la propiedad 'locals' de indefinidos

He hecho paquetes.js y pack.css para usar en mi aplicación web,

Mi paquete.json se ve así:

  "dependencies": {
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^1.3.3",
    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0"
  },

Mi webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env, argv) => {
    return {
        //Define entry point
        entry: ['./src/index.js', './src/css/index.scss'],

        //Define output point
        output: {
            path: path.resolve(__dirname, 'wwwroot/dist'),
            filename: 'bundle.js'
        },

        module: {
            rules: [
                {
                    test: /\.s[c|a]ss$/,
                    include: path.resolve(__dirname, 'src'),
                    use: [
                        'style-loader',
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'sass-loader'
                    ]
                },
                {
                    test: /\.js$/,
                    include: path.resolve(__dirname, 'src'),
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"],
                        plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                },
            ]
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery'
            }),
            new MiniCssExtractPlugin({
                filename: 'bundle.css'
            })
        ]

    };
};

Mi estructura de src es así:

src

index.js:

import 'jquery';
import 'bootstrap';
import './js/login';
import './js/helpers';

index.scs:

@import 'bootstrap';
@import 'util.scss';
@import 'login.scss';
@import 'site.css';

Estoy recibiendo este error en la consola:

Consol

paquete.js

Todo lo demás está funcionando bien, no tengo ningún problema con javascript, pero me molesta que no sepa cómo corregir este error.

PS: Soy nuevo en el desarrollo web en general, comenzó a usar la webpack ayer, la idea era utilizar sólo el paquete. Js y bulto. css en mi html sin añadir etiquetas jquery y bootstrap por separado

Pregunta hecha hace 3 años, 4 meses, 29 días - Por techtrailblazer

5 Respuestas:

  • Trate de establecer la opción esModule a false para MiniCssExtractPlugin

    use: [
    'style-loader',
    {
        loader: MiniCssExtractPlugin.loader,
        options: {
            esModule: false,
        },
    },
    'css-loader',
    'sass-loader'
]

    Respondida el Dec 18, 2020 a las 15:50 - por codemaestro

    Votos positivos: 0 | Votos negativos: 0

  • No use 'style-loader' junto con mini-css-extract-plugin, modifique su regla para que coincida con la siguiente:

    {
    test: /\.s[c|a]ss$/,
    include: path.resolve(__dirname, 'src'),
    use: [
            //'style-loader',
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader'
         ]
},

    Puede encontrar más detalles aquí: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/613

    Respondida el Dec 18, 2020 a las 15:57 - por cybermage

    Votos positivos: 0 | Votos negativos: 0

  • Similar a la respuesta de @Dina pero sin MiniCssExtractPlugin :

    use: [
    {
      loader: "style-loader",
      options: {
        esModule: false,
      },
    },
    "css-loader",
    "sass-loader",
  ]

    Respondida el Dec 18, 2020 a las 16:06 - por coderconqueror

    Votos positivos: 0 | Votos negativos: 0

  • El error que estás experimentando, "TypeError: Cannot read property 'locals' of undefined", generalmente ocurre cuando se está utilizando el plugin MiniCssExtractPlugin.loader junto con style-loader en la configuración de Webpack. Este problema puede suceder cuando ambos son usados al mismo tiempo ya que MiniCssExtractPlugin.loader se encarga de extraer el CSS en un archivo separado, mientras que style-loader se encarga de inyectar el CSS en el HTML a través de etiquetas <style>.

    Para solucionar este error, simplemente elimina 'style-loader' de la configuración para el manejo de archivos SCSS en tu webpack.config.js. Aquí te dejo la modificación en la sección de module.rules:

    ```javascript module: { rules: [ { test: /.s[c|a]ss$/, include: path.resolve(dirname, 'src'), use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ] }, { test: /.js$/, include: path.resolve(dirname, 'src'), loader: 'babel-loader', options:

    Respondida el Dec 19, 2020 a las 15:47 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Tipo no utilizado: TypeError: Cannot read property 'locals' of undefined

    Este error ocurre cuando intentas acceder a la propiedad locals de un objeto indefinido. En tu caso, parece que estás intentando acceder a locals dentro de una función de devolución de llamada de Webpack, pero el objeto locals no está definido dentro de esa función.

    Solución:

    Para resolver este error, debes asegurarte de que el objeto locals esté definido dentro de la función de devolución de llamada de Webpack. Esto generalmente se hace pasando el objeto locals como un argumento a la función de devolución de llamada.

    Aquí tienes el código actualizado de tu webpack.config.js con el objeto locals pasado a la función de devolución de llamada:

    ``` const path = require('path'); const webpack = require('webpack'); const MiniCssExtractPlugin = require("mini-css-extract-plugin");

    module.exports = (env, argv) => { return { //Define entry point entry: ['./src/index.js', './src/css/index.scss'],

        //Define output point
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: s[c|a]ss$,
                include: path.resolve(__dirname, 'src'),
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: js$,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader',
                options: {
                    presets: ["@babel/preset-env"],
                    plugins: ['@babel/plugin-proposal-object-rest-spread']
                }
            },
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new MiniCssExtractPlugin({
            filename: 'bundle.css'
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                sassLoader: {
                    data: `$env: ${argv.mode};`
                }
            }
        })
    ]

};

    }; ```

    Además, asegúrate de importar el objeto locals en tu archivo index.js:

    
import 'jquery';
import 'bootstrap';
import './js/login';
import './js/helpers';
import 'webpack-loader!sass-loader!./css/index.scss';

    Nota:

    También he actualizado tu webpack.config.js para incluir el complemento LoaderOptionsPlugin y configurar correctamente el argumento $env para el cargador Sass. Esto asegurará que el entorno de compilación (desarrollo o producción) se pase al archivo Sass.

    Respondida el Dec 19, 2020 a las 15:50 - por Gemini

    Votos positivos: 0 | Votos negativos: 0