Usando Reactjs con electronjs recibiendo inesperado error de token 'traducido'

He estado tratando de ejecutar electrones js con una capa de vista de react. Ambos tienen diferentes configs de webpack. Mientras que el electrón parece estar funcionando bien, la parte de react arroja error. Webpack config

let rendererConfig = {  
      entry: {
        index: path.join(__dirname, '../src/render/index.js')
          
      }, 
      module: {
        rules: [
       
          {
              test:/\.css$/,
              use:['style-loader','css-loader']
          },               
          {
            test: /\.js?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            
          }         
        ]
      },   
      plugins: [ 
         
        new HtmlWebpackPlugin({
          title: 'BSK',
          filename: 'index.html',
          chunks: ['index'],
          template: path.resolve(__dirname, '../src/render/index.html'),
         
          nodeModules: devMode
            ? path.resolve(__dirname, '../node_modules')
            : false
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
      ],
      output: {
        filename: '[name].js',
        libraryTarget: 'commonjs2',
        path: path.join(__dirname, '../dist/electron'),
        globalObject: 'this'
      },
      target: 'electron-renderer',
     
    }

Este es mi .babelrc

{
   
  "env": {
    "main": {
      "presets": ["@babel/preset-env"]
    },
    "renderer": {
      "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
      ],
      "plugins": ["react-hot-loader/babel","@babel/plugin-proposal-class-properties","emotion"]
    }         
  },
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

Tengo todas las dependencias dev necesarias, pero todavía el cargador de babel parece ignorar los presets

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

3 Respuestas:

• Añadiendo '/' a publicPath de salida solucionó el problema

  referencia

  Respondida el Dec 17, 2020 a las 14:12 - por pixelpioneerbbb5

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El error que estás experimentando puede deberse a una configuración incorrecta en tu archivo de configuración de Webpack o en tu archivo .babelrc. Parece que estás intentando configurar diferentes presets para el entorno de 'main' y 'renderer' en el archivo .babelrc, pero puede que no se esté aplicando correctamente.

  Aquí hay algunas sugerencias para solucionar el problema:

  • Asegúrate de que estás utilizando correctamente los presets y plugins en tu archivo .babelrc. Puedes intentar eliminar la sección "env" y agregar directamente los presets y plugins que necesitas para el entorno de 'renderer', de esta manera:

  json
  {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "react-hot-loader/babel",
      "@babel/plugin-proposal-class-properties",
      "emotion"
    ]
  }
  

  • En tu archivo de configuración de Webpack, asegúrate de que estás utilizando el loader 'babel-loader' para los archivos con extensión '.js'. Puede que haya un problema con la expresión regular que estás usando en la propiedad 'test'. Intenta cambiarla por lo siguiente:

  javascript
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
  }
  

  • Asegúrate de que todas tus dependencias dev de Babel están instaladas correctamente. Puedes reinstalar todas las dependencias dev ejecutando el siguiente comando:

  bash
  npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
  

  Espero que estas sugerencias te ayuden a solucionar el problema con el cargador de Babel en tu configuración de Webpack. Si el problema persiste, por favor proporciona más detalles sobre el error específico que estás viendo para que pueda brindarte una ayuda más específica.

  Respondida el Dec 18, 2020 a las 14:10 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El error que describes generalmente ocurre cuando Babel no puede encontrar la configuración correcta para compilar tu código React. Aquí hay algunos pasos para solucionar el problema:

  1. Verifica que Babel esté configurado correctamente:

  Asegúrate de que tienes instalado el paquete @babel/core. Comprueba que tu archivo .babelrc esté en el directorio raíz de tu proyecto. Verifica que tu configuración de Babel sea válida según la documentación oficial: https://babeljs.io/docs/en/configuration.

  2. Verifica que Webpack esté configurado para usar Babel:

  En tu configuración de Webpack, asegúrate de que el cargador de Babel esté incluido en tu lista de reglas de módulo. Verifica que el cargador de Babel esté configurado para usar la configuración correcta de Babel.

  3. Verifica que estés usando la versión correcta de Babel:

  Asegúrate de utilizar la versión correcta de Babel para tu versión de React. Puedes consultar la documentación de React para obtener la versión compatible de Babel: https://reactjs.org/docs/react-api.htmlreact.version 4. Intenta restablecer la caché de Babel:

  Elimina la carpeta node_modules de tu proyecto. Vuelve a instalar las dependencias ejecutando npm install. Esto restablecerá la caché de Babel y forzará a Webpack a recompilar tu código.

  5. Comprueba si hay errores de sintaxis:

  Revisa tu código en busca de errores de sintaxis que puedan estar provocando que Babel falle. Puedes utilizar herramientas como ESLint o Prettier para ayudarte a identificar errores de sintaxis.

  Si has seguido estos pasos y el problema persiste, puedes intentar proporcionar un ejemplo de código mínimo reproducible para que yo pueda ayudarte a depurarlo más a fondo.

  Respondida el Dec 18, 2020 a las 14:19 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---