es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El paquete ‘crypto-js’ está generando un error en el paquete de Webpack en IE11.

04 Aug, 2023 Programación

Soy nuevo en webpack y babel. Estoy desarrollando una aplicación de React con una configuración personalizada de webpack y babel.

Había agregado react-app-polyfill a esta aplicación y funcionaba bien en IE11. Pero después de instalar crypto-js, cuando ejecuto el servidor de webpack localmente en IE11, el paquete de webpack lanza un error expected ')'.

Busqué este error y descubrí que esto ocurre con el parámetro predeterminado, que es una característica de ES6 (asumo que crypto-js fue escrito con algunas características de ES6). Entonces, eliminé la exclusión de node_modules en el archivo webpack-local-config.js para transpilar los paquetes de nodos.

Desde:

module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }]
  }

A:

module: {
    rules: [{
      test: /\.(js|jsx)$/,
      include: [
        path.resolve(__dirname, 'node_modules/crypto-js')
      ],
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }]
  }

Pero esto no funcionó, así que intenté lo siguiente:

module: {
    rules: [{
      test: /\.(js|jsx)$/,
      use: {
        loader: 'babel-loader'
      }
    }]
  }

Pero estos intentos no solucionaron el problema.

Hablando honestamente, creo que estoy completamente atascado y no estoy seguro de cómo podría resolver el problema.

¿Qué haces si solo un paquete no es compatible con el navegador IE 11?

Versión:

webpack: ^4.44.1
webpack-cli: ^3.3.12
webpack-dev-server: ^3.7.1

¡Gracias!

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para el error de webpack y babel con crypto-js en IE11

    Si solo un paquete como crypto-js no es compatible con el navegador IE11, puedes intentar los siguientes pasos para solucionar el problema.

    Paso 1: Instalar core-js

    Instala el paquete npm core-js, ya que proporciona polyfills para funciones que no están disponibles en navegadores antiguos como IE11.

    npm install core-js --save-dev

    Paso 2: Configurar babel

    Añade las siguientes líneas a tu archivo .babelrc para incluir core-js y habilitar el uso de parámetros por defecto.

    {
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-react"
  ]
}

    Esto transpilará tu código con polyfills de core-js y habilitará el uso de parámetros por defecto.

    Paso 3: Actualizar la configuración de webpack

    Actualiza la configuración de webpack para incluir el paquete core-js y transpilarlo también.

    module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: 3
              }
            ],
            '@babel/preset-react'
          ]
        }
      }
    },
    {
      test: /\.js$/,
      include: [
        path.resolve(__dirname, 'node_modules/core-js/')
      ],
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: 3
              }
            ]
          ]
        }
      }
    }
  ]
}

    Esto excluye automáticamente node_modules, pero incluye core-js para ser transpilado.

    Paso 4: Probar en IE11

    Ejecuta el servidor de webpack localmente en IE11 después de estos cambios y verifica si se resuelve el error. Si no es así, es posible que necesites revisar otras dependencias y paquetes en busca de problemas de compatibilidad.

    Espero que esto te ayude!

Comments are closed.