Webpack support

[anthonator]

Has anybody gotten this library to work with webpack? The webpack team recently fixed a ternary require issue which fixed a show stopper.

I was able to fix an issue with loading a JSON file with the json-loader. Now I'm getting:

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

Which is causing the individual services to not be included in the packaged bundle.

So doing new AWS.S3() returns a is not a function error.

It looks like you might be able to fix this with the ContextReplacementPlugin but I'm not sure how to configure it properly for this scenario.

Does anybody have any examples or anything?

[lsegal]

I think in this case a site like StackOverflow might be a better venue to ask this kind of question. The SDK unfortunately does not currently support Webpack, since we currently have our tooling working with browserify. It seems like this specific issue might be a lot more complicated to solve based on the error, but someone who knows more about the webpack tool may be of more assistance-- it might not be as complicated as it seems. If you do resolve this we'd be happy to hear how you were able to do it!

[AdityaManohar]

I'm marking this as closed since this isn't an SDK issue. Feel free to open another issue if you have other questions.

[jblack10101]

I'm having this same issue. Was a stack overflow ever created?

[geminiyellow]

@AdityaManohar @lsegal

+1 i want webpack support too.

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

it feel so suck.

[ryanyogan]

This issue isn't specific to this repo, having said that Webpack does not care what you throw at it, you may use Browserify transforms in Webpack.

This particular problem looks to be specific to JSON so try adding this to your Webpack config:

npm i --save-dev json-loader

module: {
  loaders: [
    { test: /\.json$/, loader: 'json' }
  ]
}

If that does not fix everything have a look at google "webpack transform packegify"

[rstormsf]

Nope, it doesn't fix it. +1 for webpack support

[prescottprue]

+1 for webpack support. This stack overflow question says it has been solved, but I am still seeing errors about Node related stuff.

The main errors include the following: Module not found: Error: Cannot resolve module 'fs' in .... If it is in a package that gets browserified before being imported, then I was able to get it to work (still haven't gotten it to work with a loader).

[rstormsf]

The same here :-(

[dbernstein]

+1 for webpack support. I'm seeing the same problem.

[geminiyellow]

@prescottprue @rstormsf @dbernstein maybe what you need is no parse it.

webpack.conf.js

module: {
  noParse: [/aws-sdk.js/]
}

[dbernstein]

Thanks @geminiyellow for your suggestion: I tried that - no luck. when I run npm install I still get the warnings below. When I try running my code none of the AWS api's are available ( javascript console error = "AWS.SNS is not a function"). It would appear that the messages below are related. If you have any other ideas I would appreciate it. I've been cycling on this for a few hours.

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

[prescottprue]

I was able to get something working using a solution similiar to @ geminiyellow:

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

Notice that the regex is for the whole aws-sdk module folder, not just the main aws-sdk.js file (as the error was coming from parsing of other files).

[wesleyyee]

+1

[prescottprue]

Posted another solution

Basically:
Using the noParse method should work if you are creating a node package but not for umd format. To do umd I had to use loaders to Browserify 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']},
  ]
}

[jkudish]

This solution worked for me, but it would be great to see better webpack support in the future.

[dukedougal]

Please provide webpack support.

[amowu]

+1

[jontewks]

+1

[backnotprop]

+1 for webpack support.

[bendenoz]

+1

[dukedougal]

Is this likely to be reviewed? Webpack is fundamental now to the JavaScript community.

[chrisradek]

Webpack support is something we're looking into, but don't currently have an estimate on when work will be completed to support it. I'm reopening this as a feature request for now.

[slessans]

+1

[bendenoz]

this provides the best work-around so far : http://andrewhfarmer.com/aws-sdk-with-webpack/

basically

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

instead of require('aws-sdk')

[simonbuchan]

@deviantony @chrisradek Looks like #1117 needs .json in (edit) resolve.extensions right now, which it probably shouldn't. Workaround is to add it for now, but requires of .json files should include the extension.

[chrisradek]

@simonbuchan Could that be because @deviantony's loader is json? In my config above, mine is json-loader (I'm using json-loader@0.5.4)

[simonbuchan]

@chrisradek Nah, it's the same module, just webpack adds -loader if it's not there

[chrisradek]

@simonbuchan
Weird, so for whatever reason, using json-loader works in my test, but just json breaks. If I add the .json extension to all my imports then both options work. Either way, it doesn't hurt to add the extension, that was just unexpected behavior.

[simonbuchan]

@chrisradek Weird? Unless you've changed your resolveLoaders.moduleTemplates, that should only happen if you only have a json-loader-loader module!

[chrisradek]

I've created #1123 that contains all the changes needed to support webpack. It also allows webpack and browserify to be used to generate node bundles as well. Like the other PR, it also allows for importing individual services.

I incorporated some of the feedback from the previous PR and resolved some merge conflicts. There shouldn't be anymore major changes, and I think we've settled on the method for requiring services individually.

[deviantony]

@chrisradek I just retried with npm install git://github.com/chrisradek/aws-sdk-js.git#webpack, is it updated yet? As I still have the same issue.

[chrisradek]

@deviantony
Apologies, I created a different branch when resolving some merge conflicts and adding support for node bundles.
npm install git://github.com/chrisradek/aws-sdk-js.git#full-webpack should work.

[deviantony]

@chrisradek

This works perfectly:

import S3 from 'aws-sdk/clients/s3';

const s3 = new S3({...});

Amazing job 👏

[chrisradek]

The PR has been merged and released as part of 2.6.0. We'll work on updating our documentation on how to use webpack/browserify.

[danbrianwhite]

Heads up to other devs

If you start getting webpack build errors from ./~/aws-sdk/lib/util.js and have something like

{
                test: /aws-sdk/,
                loaders: ['transform?brfs']
 }

in your webpack config, remove it and the build will work again.

[rameshsubramanian]

@chrisradek I keep getting TypeError: Cannot read property 'crypto' of undefined error. Anyone else facing the issue?

Thanks
Ramesh

[chrisradek]

@rameshsubramanian
Which version of the SDK are you using?

If you're having trouble getting the SDK to work with webpack, take a look at these blog posts that walk through a simple example and see if they help:
Using webpack and the AWS SDK for JavaScript to Create and Bundle an Application - Part 1
Using webpack and the AWS SDK for JavaScript to Create and Bundle an Application - Part 2

[nickbreaton]

@rameshsubramanian I was still getting this when I was using babel-loader. If you are also using babel, and easy fix is to ensure you have exclude: /node_modules/ in your loader configuration.

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

[jmanuel1609]

https://aws.amazon.com/blogs/developer/using-webpack-and-the-aws-sdk-for-javascript-to-create-and-bundle-an-application-part-1/

[kejsiStruga]

Hello, I am using react and I am trying to connect to DynamoDB via aws-sdk. How could this be accomplished ? I have tried the above methods, still cannot set up credentials for dynamo. This works on Javascript but not on React !

import AWS from 'aws-sdk/dist/aws-sdk';
AWS.config.loadFromPath('./config.json');

[chrisradek]

@kejsiStruga
The browser doesn't have access to the file system, so AWS.config.loadFromPath doesn't work when your project is run in a browser. There are a couple of options for getting credentials loaded in the browser SDK, with Cognito being the preferred way in most cases. Here's some documentation that goes into setting up credentials for the browser SDK:
http://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/setting-credentials-browser.html

Also, since version 2.6.0 of the SDK, it is no longer necessary to import the SDK from aws-sdk/dist/aws-sdk. This was a temporary solution that had cons such as webpack being unable to do any 'tree-shaking' to optimize the bundles it generates, and having to use complicated webpack config.
Here are the docs that explain how to use the SDK with webpack (you can simply import AWS from 'aws-sdk' now):
http://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/webpack.html

[shyamchandranmec]

@chrisradek I tried this.. But its not working.. I am getting the following error.

ERROR in .//xmlbuilder/lib/index.js
Module not found: Error: Can't resolve 'lodash/object/assign' in '/Users/shyam/Documents/indee/new-indee/node_modules/xmlbuilder/lib'
@ .//xmlbuilder/lib/index.js 5:11-42
@ .//aws-sdk/lib/xml/builder.js
@ .//aws-sdk/lib/core.js
@ ./~/aws-sdk/lib/browser.js
@ ./plugins/aws.js

[gerardmrk]

I am also getting what @shyamchandranmec is getting, the exact same error. I am at my wits ends trying to figure out how to fix this. I spent two days scouring stack overflow and github issues threads and cannot find any working fixes. Please someone address this! If its any help, I'm using Webpack 2 with TypeScript and React.

[shyamchandranmec]

@gerardmrk I have created a npm package with the changes. You can use this until aws developers resolve this.
Here is the url

[chrisradek]

@shyamchandranmec and @gerardmrk
Can you share more info, like what your webpack config looks like, and what version of the SDK you're using?

The error you're reporting isn't one I've seen since before. The error indicates that webpack can't find the lodash dependency on xmlbuilder. Can you check if you are pulling in multiple versions of lodash? My first guess would be webpack isn't correctly resolving the lodash dependency xmlbuilder uses, but any more info you can share would help.

Side note: This feature request to support webpack has been closed. Since this is a new error you're seeing, please feel free to open up a new issue.

[shyamchandranmec]

@chrisradek I was getting the error when I was importing aws-sdk. This issue was already reported by someone else. Refer this link. Somebody has already raised a pull request but its not merged yet. I have changed the versions of some of the packages. Thats the only change.

Updated:

• xmlbuilder 2.6.2 -> 4.2.1
• sax 1.1.5 -> 1.2.1
• xml2js 0.4.15 -> 0.4.17
• uuid 3.0.0 -> 3.0.1

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in this thread.