0

este es el error que me arroja al tratar de hacer npm run build, y cuando hago npm start abre el código en blanco el problema parece estar en la entrada pero no puedo ver el error.

ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\mmares\Documents\proyectos-telenet\boletin\node_modules\babel-preset-react\lib\index.js

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

module.exports = {
    entry:  './src/index.js',
    output: {
        path: path.resolve('/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /(\.js|.jsx)$/,
                exclude: /node_modules/,
                use: {
                   loader: 'babel-loader'
               }
            },
            {
                test: /\.json$/,
                use: {
                    loader: 'json-loader'
               } 
            },
            {
                test: /\.css$/,
                use: {
                    loader: 'css-loader'
                }
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: './index.html'
        })
    ]
}

1 respuesta 1

0

entiendo que es un app que usa reactjs, por lo tanto falta una parte del build.

El flujo es algo asi:

Webpack

Construye un arbol de dependencias, es decir, recorre toda tu aplicacion y entiende que archivos necesitas y arma un paquete de uno o pocos archivos. Al recorrer todos los archivos tambien los transforma a algo que webpack entienda, es decir, javascript.

Babel Es una libreria que compila/transforma javascript para que puedas programar usando elementos experimentales o avanzados del lenguaje, y tener como resultado un codigo que funciona en la mayoria de navegadores actuales.

React

Es una libreria que esta enfocada en renderizar tu interfaz grafica de manera eficiente. Puedes usar react usando javascript basico (Por ej. React.createElement("")) o mas comunmente usando jsx (<MiComponente />).

Cuando webpack carga archivos jsx, no los entiende pues <MiComponente /> no es javascript, entonces necesitamos decirle al loader de jsx que los transforme usando babel a un javascript que webpack pueda entender.

Para lograr esto debes instalar estos modulos via npm:

npm i @babel/preset-env @babel/preset-react 

y en la configuracion de webpack:

 ...
 {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
        presets: ['@babel/preset-env', '@babel/preset-react'],
        plugins: []
    }
  },
  ...
2
  • Hola, estoy intentando hacerlo de esa forma y no me salio.
    – myrna
    Commented el 8 abr. 2020 a las 20:38
  • Puedes darnos mas informacion sobre el error?
    – Juank
    Commented el 8 abr. 2020 a las 21:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.