Cómo arreglar el error de la webpack "versión" es un argumento requerido en GCP cloudbuild

I create a bug problema en la webpack repo, pero me temo que estará cerrado ya que piden una reproducción mínima, que no puedo producir.

Uno de mis pasos de nubes es:

- name: node:$_NODE_VERSION
  entrypoint: npm
  args: ['run', 'build:ci'] # with NODE_ENV=production. Skips BundleAnalyzerPlugin
  dir: "v3/client/"
  waitFor: ['css-built', 'secret-available']
  id: 'client-built'

substitutions:
  # Getting errors related to the client/ canvas package using node v15
  #     command failed sh -c node-pre-gyp install --fallback-to-build
  #     No package 'pangocairo' found
  _NODE_VERSION: "14"

Se activa una webpack 4 construir como se define a continuación:

  "scripts": {
    "build:ci": "NODE_ENV=production npm run build -- --env ci",
 }

Cuando Cloudbuild intenta correr el paso, siempre falla con el siguiente error

Step #4 - "client-built": (node:29) UnhandledPromiseRejectionWarning: Error: "version" is a required argument.
Step #4 - "client-built":     at Object.getArg (/workspace/v3/client/node_modules/webpack-sources/node_modules/source-map/lib/util.js:24:11)
Step #4 - "client-built":     at new BasicSourceMapConsumer (/workspace/v3/client/node_modules/webpack-sources/node_modules/source-map/lib/source-map-consumer.js:294:22)
Step #4 - "client-built":     at new SourceMapConsumer (/workspace/v3/client/node_modules/webpack-sources/node_modules/source-map/lib/source-map-consumer.js:22:7)
Step #4 - "client-built":     at SourceMapSource.node (/workspace/v3/client/node_modules/webpack-sources/lib/SourceMapSource.js:32:62)
Step #4 - "client-built":     at SourceMapSource.proto.sourceAndMap (/workspace/v3/client/node_modules/webpack-sources/lib/SourceAndMapMixin.js:29:18)
Step #4 - "client-built":     at getTaskForFile (/workspace/v3/client/node_modules/webpack/lib/SourceMapDevToolPlugin.js:65:30)
Step #4 - "client-built":     at /workspace/v3/client/node_modules/webpack/lib/SourceMapDevToolPlugin.js:215:20
Step #4 - "client-built":     at Array.forEach ()
Step #4 - "client-built":     at /workspace/v3/client/node_modules/webpack/lib/SourceMapDevToolPlugin.js:186:12
Step #4 - "client-built":     at SyncHook.eval (eval at create (/workspace/v3/client/node_modules/tapable/lib/HookCodeFactory.js:1:1), :12:1)
Step #4 - "client-built":     at SyncHook.lazyCompileHook (/workspace/v3/client/node_modules/tapable/lib/Hook.js:154:20)
Step #4 - "client-built":     at /workspace/v3/client/node_modules/webpack/lib/Compilation.js:1413:42
Step #4 - "client-built":     at eval (eval at create (/workspace/v3/client/node_modules/tapable/lib/HookCodeFactory.js:1:1), :19:1)
Step #4 - "client-built": (Use `node --trace-warnings ...` to show where the warning was created)
Step #4 - "client-built": (node:29) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
Step #4 - "client-built": (node:29) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Este error es muy oscuro para mí, y sólo sucede en el cloudbuild, que es muy difícil de depurar (no se puede ssh en el medio ambiente y depurar cosas por mí mismo).

Parece tener algo que ver con la fuente-mapa

Aquí están las partes de mi confidente mencionando mapas fuente

export default {
  mode: "production",
  devtool: "source-map",
  optimization: {
    minimizer: [
      new TerserPlugin({
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          compress: {
            drop_console: true,
          },
          output: {
            comments: false,
          },
        },
      }),
    ]
  },
  module: { 
    rules: [{
      test: /\.css$/i,
      use: [
        {
          loader: "css-loader",
          options: {
            importLoaders: 1,
            modules: false,
            sourceMap: true,
          },
        },
      ],
    }, {
      // add source-map support
      enforce: "pre",
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "source-map-loader",
    }],
  }
};

¿Alguna idea de qué podría tratar de depurar esto?

EDIT: después de burlar el config de la webpack desde la última exitosa construcción de cloudbuild, noté este cambio:

   resolve: {
-    extensions: [".ts", ".tsx", ".js", ".jsx"],
+    // .mjs needed from @apollo/client v3.3.0
+    extensions: [".mjs", ".ts", ".tsx", ".js", ".jsx"],
   },

Pero webpack es compatible con fuentemap para mjs desde 2018/08Supongo que esto es irrelevante.

El único otro cambio es usar el node:14 imagen docker en lugar del maestro, ya que nodo 15 causa errores en npm instalación desde que añadí canvas a mi lista de dependencias para pruebas de jest.

EDIT 2: desactivar los mapas fuente para mis obras de construcción de producción. Pero eso será más difícil de depurar los problemas de producción a partir de ahora:(

Pregunta hecha hace 3 años, 4 meses, 28 días - Por syntaxsorcerer

3 Respuestas:

  • Me enfrenté a w / el mismo problema, pero w / webpack 5. Y también uso el cliente Apollo v3. Una diferencia: estaba en gitlab ci. La causa raíz estaba en el uso docker:dind. Muévete dind para usar Docker enganchado fijar el problema para mí

    Respondida el Dec 18, 2020 a las 11:01 - por syntaxsculptor

    Votos positivos: 0 | Votos negativos: 0

  • El error que estás viendo parece estar relacionado con la generación o uso de mapas de origen en Webpack durante el proceso de construcción en Cloud Build.

    Aquí hay algunas sugerencias para ayudarte a depurar este problema:

    • Comprobar configuración de Webpack:
    Revisa tu archivo de configuración de Webpack para asegurarte de que los ajustes de los mapas de origen estén correctamente configurados. Asegúrate de que estés generando los mapas de origen de la manera correcta y de que estén siendo utilizados apropiadamente en tu configuración de producción.

    • Revisar versiones:
    Asegúrate de que estás utilizando versiones compatibles de las dependencias y plugins de Webpack. Algunas veces, problemas como el que estás experimentando pueden surgir debido a incompatibilidades entre versiones de paquetes.

    • Desactivar mapas de origen:
    Como mencionaste en tu última edición, desactivar los mapas de origen para tus construcciones de producción puede ser una solución temporal. Sin embargo, ten en cuenta que puede dificultar la depuración de problemas en producción.

    • Consultar la documentación de Webpack:
    Revisa la documentación oficial de Webpack y busca información específica sobre el error que estás enfrentando. Puede que encuentres pistas sobre cómo resolver el problema o additional detalles sobre la configuración de mapas de origen.

    • Verificar la configuración de Cloud Build:
    Asegúrate de que la configuración en la nube está correctamente especificada para ejecutar el proceso de construcción de Webpack. Revisa que todos los parámetros requeridos estén presentes y configurados de manera adecuada.

    Si después de realizar estas verificaciones aún no resuelves el problema, considera crear un issue más detallado o una pregunta en los foros de soporte de Webpack para obtener ayuda adicional de la comunidad de desarrolladores.

    Respondida el Dec 19, 2020 a las 11:00 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Posibles soluciones:

    1. Actualiza la versión de webpack:

    Verifica que estás utilizando la última versión de webpack. Las versiones anteriores pueden tener errores o incompatibilidades que pueden causar este problema.

    2. Verifica la configuración de la fuente de mapa:

    Asegúrate de que la configuración de la fuente de mapa en tu archivo webpack.config.js sea correcta. Específicamente, verifica los siguientes ajustes:

    devtool: Debe establecerse en 'source-map' para generar archivos de fuente de mapa. minimizer.terserOptions.sourceMap: Debe establecerse en true para generar mapas de fuente para código minimizado. module.rules[].sourceMaps: Establece esto en true para habilitar los mapas de fuente para los cargadores específicos.

    3. Verifica las dependencias:

    Asegúrate de que todas las dependencias necesarias para generar mapas de fuente estén instaladas y actualizadas. Esto incluye:

    source-map webpack-sources webpack-dev-middleware (si estás utilizando un servidor de desarrollo)

    4. Utiliza la depuración remota:

    Si es posible, configura la depuración remota para tu entorno de CloudBuild. Esto te permitirá conectarte al proceso en ejecución y depurar el problema más fácilmente.

    5. Busca problemas conocidos:

    Busca problemas conocidos o avisos relacionados con la generación de mapas de fuente en webpack y CloudBuild. Puede haber problemas específicos que afecten a tu caso.

    6. Simplifica tu configuración:

    Crea un proyecto de webpack mínimo que reproduzca el problema. Elimina cualquier configuración o dependencia innecesaria para aislar el problema. Esto puede ayudarte a identificar la causa raíz más rápido.

    7. Contacta al soporte de webpack:

    Si ninguna de las soluciones anteriores funciona, considera ponerte en contacto con el soporte de webpack. Pueden proporcionar ayuda adicional o información sobre posibles problemas.

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

    Votos positivos: 0 | Votos negativos: 0