How to use webpack import aws-sdk

Question

I found this issues in the official, but it looks like they refused to answer. So I can only ask questions on SO. Here is my Error&Warning Log:

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 ^\.\/.*$
Module not found: Error: Cannot resolve directory '.' in /Users/me/Documents/Sources/my-project/client/node_modules/aws-sdk/lib
 @ ./~/aws-sdk/lib ^\.\/.*$

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/me/Documents/Sources/my-project/client/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/me/Documents/Sources/my-project/client/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/me/Documents/Sources/my-project/client/node_modules/aws-sdk/lib
 @ ./~/aws-sdk/lib/services.js 1:9-22

There are three types:

1. Cannot resolve module 'fs'

I only need to install fs can solve this.

2. need an appropriate loader

Well, this will need to install json-loader, and set it in webpack.config.js, but also can solve.

3. Critical dependencies
4. Module not found: Error: Cannot resolve directory '.'

I webpack newbie.So, i don't know how to solve this. Will someone help me? thanks.

UPDATE:

4. Module not found: Error: Cannot resolve directory '.'

that is my fault, config file's extensions missing a .

Answer 1

I found this blog post that fixed it for me.

Essentially you need to import the built version of the library.

All credit goes to the author. Here is the code:

require('aws-sdk/dist/aws-sdk');
var AWS = window.AWS;

ES6 version:

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

Answer 2

config:

module: {
  noParse: [
   /aws/
  ]
}

usage:

window.AWS to the reference of the global AWS object.

Answer 3

Using the noParse method should work if you are creating a node package, as this is setting webpack to not apply any parsing/loaders. This did not work for me when creating a umd formatted output file/library.

To create a umd formatted library I had to use loaders to Browserify aws-sdk and handle json files.

Install the loaders:

npm install json-loader --save-dev

npm install transform-loader brfs --save-dev

Webpack Config:

module: {
  loaders: [
    { test: /aws-sdk/, loaders: ["transform?brfs"]},
    { test: /\.json$/, loaders: ['json']},
  ]
},
output: {
  library: 'LibraryName',
  libraryTarget: 'umd'
},
resolve: {
  extensions: ['', '.js']
}

Replace LibraryName with you own namespacing. Currently the library would be used through a constructor as follows:

var libObj = new LibraryName();

Answer 4

AWS SDK added support to webpack starting from version 2.6.1, please see Using webpack and the AWS SDK for JavaScript to Create and Bundle an Application – Part 1 blog post describing how to require aws-sdk into webpack bundle.