Error importando aws-sdk con Webpack y ES6

Actualmente trabajo en un proyecto React en el que usamos el SDK de Amazon. Por supuesto, tanto el entorno de desarrollo como el de producción corren con Webpack y cual ha sido mi sorpresa que al importar el aws-sdk me he encontrado con los varios warnings y mensajes de error.

Estoy seguro de que no soy ni al primero ni al último que le ocurrirá esto así que en este breve post explicaré como solucionarlo.

 

aws-sdk-webpack-error

 

 

Errores y warnings 

WARNING in ./~/aws-sdk/lib/util.js
Critical dependencies:
40:30-45 the request of a dependency is an expression
43:11-53 the request of a dependency is an expression
 @ ./~/aws-sdk/lib/util.js 40:30-45 43:11-53

WARNING in ./~/aws-sdk/lib/api_loader.js
Critical dependencies:
13:15-59 the request of a dependency is an expression
104:12-46 the request of a dependency is an expression
108:21-58 the request of a dependency is an expression
114:18-52 the request of a dependency is an expression
 @ ./~/aws-sdk/lib/api_loader.js 13:15-59 104:12-46 108:21-58 114:18-52

WARNING in ./~/aws-sdk/lib/region_config.json
Module parse failed: /Users/apple/Documents/Ilusia-v2/node_modules/aws-sdk/lib/region_config.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "rules": {
|     "*/*": {
|       "endpoint": "{service}.{region}.amazonaws.com"
 @ ./~/aws-sdk/lib ^\.\/.*$

ERROR in ./~/aws-sdk/lib/api_loader.js
Module not found: Error: Cannot resolve module 'fs' in /Users/apple/Documents/Ilusia-v2/node_modules/aws-sdk/lib
 @ ./~/aws-sdk/lib/api_loader.js 1:9-22

ERROR in ./~/aws-sdk/lib/services.js
Module not found: Error: Cannot resolve module 'fs' in /Users/apple/Documents/Ilusia-v2/node_modules/aws-sdk/lib
 @ ./~/aws-sdk/lib/services.js 1:9-22

 

¿Qué esta pasando?

Lo que está ocurriendo es que el SDK está utilizando el método require() para gestionar las dependencias y Webpack no lo soporta, independientemente de instalar el módulo fs o no.

 

Solucionando el problema

Solución A

Tenemos dos opciones. La primera es importar la versión pre-built del SDK. De esta manera todas las dependencias se encuentran en un mismo archivo .js y no utiliza el método require() que nos está generando los errores.

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.2.45.min.js"></script>

Ahora, lo tenemos disponible para usarlo en nuestro programa a través del objeto window.

const AWS = window.AWS

 

Solución B

La segunda opción es algo más elegante (al menos a mi modo de verlo). Primero instalamos el SDK desde npm como cualquier otro. Una vez instalado, será el archivo pre-built del módulo el que importaremos. Este archivo se encuentra en dist/aws-sdk.js, por lo que en nuestro programa importaremos de la siguiente manera:

import 'aws-sdk/dist/aws-sdk'
const AWS = window.AWS

Ok, ya hemos solucionado un problema y todo funciona, pero la consola nos ‘pinta’ un warning un tanto molesto.

./~/aws-sdk/dist/aws-sdk.js
Critical dependencies:
4:113-120 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/aws-sdk/dist/aws-sdk.js 4:113-120

Para solucionarlo necesitamos añadir a nuestro archivo de configuración de Webpack un módulo llamado noParse, el cual le dice a Webpack que el archivo ya ha sido procesado y que lo incluya tal y como está.

module: {
  noParse: [
    /aws\-sdk/,
  ]
}

 

Con esto el error está solucionado y podemos empezar currar sin problemas!

La referencia para post aquí.

Espero que os sea util!