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í:
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:
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, 5 meses, 5 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 constyle-loader
en la configuración de Webpack. Este problema puede suceder cuando ambos son usados al mismo tiempo ya queMiniCssExtractPlugin.loader
se encarga de extraer el CSS en un archivo separado, mientras questyle-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 tuwebpack.config.js
. Aquí te dejo la modificación en la sección demodule.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 alocals
dentro de una función de devolución de llamada de Webpack, pero el objetolocals
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 objetolocals
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 archivoindex.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