Aws-sdk-js: Webpack support

Created on 14 May 2015  ·  99Comments  ·  Source: aws/aws-sdk-js

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?

feature-request
Source
picture anthonator
👍14

Most helpful comment

This is so painful...

picture mwildehahn on 8 Apr 2016
👍21 😕6

All 99 comments

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!

lsegal picture lsegal on 14 May 2015
👎51

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

AdityaManohar picture AdityaManohar on 8 Jun 2015
👎50

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

jblack10101 picture jblack10101 on 22 Jul 2015

@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.

geminiyellow picture geminiyellow on 23 Jul 2015
👍15

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"

ryanyogan picture ryanyogan on 27 Jul 2015
👍3

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

rstormsf picture rstormsf on 25 Oct 2015
👍14

+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).

prescottprue picture prescottprue on 26 Oct 2015

The same here :-(

rstormsf picture rstormsf on 26 Oct 2015

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

dbernstein picture dbernstein on 27 Oct 2015

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

webpack.conf.js

module: {
  noParse: [/aws-sdk.js/]
}
geminiyellow picture geminiyellow on 27 Oct 2015
👍3

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

dbernstein picture dbernstein on 27 Oct 2015

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).

prescottprue picture prescottprue on 10 Nov 2015
👍5

+1

wesleyyee picture wesleyyee on 8 Dec 2015

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']},
  ]
}
prescottprue picture prescottprue on 22 Dec 2015
👍5 🎉1

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

jkudish picture jkudish on 27 Dec 2015
👍3

Please provide webpack support.

dukedougal picture dukedougal on 1 Jan 2016

+1

amowu picture amowu on 4 Jan 2016

+1

jontewks picture jontewks on 26 Jan 2016

+1 for webpack support.

backnotprop picture backnotprop on 8 Feb 2016

+1

bendenoz picture bendenoz on 11 Feb 2016

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

dukedougal picture dukedougal on 19 Feb 2016
👍3

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.

chrisradek picture chrisradek on 19 Feb 2016

+1

slessans picture slessans on 24 Feb 2016

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')

bendenoz picture bendenoz on 24 Feb 2016
👍6 👎2 🎉1

You can also use a loader to make that a bit cleaner and have no global exposed:

var prePackagedAwsPath = path.join('aws-sdk', 'dist', 'aws-sdk');

module.exports = {
  resolve: {
      alias: {
          'aws-sdk': prePackagedAwsPath
      }
  },
  module: {
      loaders: [
          {
              test: require.resolve(prePackagedAwsPath),
              loader: 'imports?window=>null'
          }
      ]
  },

then you can just use

const AWS = require('aws-sdk');
joscha picture joscha on 3 Mar 2016
👍3

+1

EloB picture EloB on 31 Mar 2016

This is so painful...

mwildehahn picture mwildehahn on 8 Apr 2016
👍21 😕6

It's really hard to understand why one of the most popular build tools is not supported. Surely this justifies priority action.

dukedougal picture dukedougal on 12 Apr 2016
👍2

https://github.com/aws/aws-sdk-js/issues/603#issuecomment-166480762 had a very good suggestion, though it looks like it doesn't include any of the service clients.

By supplying the transform that the SDK uses with browserify (https://github.com/aws/aws-sdk-js/blob/master/dist-tools/transform.js) instead, it looks like the SDK will work properly with webpack. I had to hack around to actually have our transform used instead of brfs, but it shouldn't be too difficult if we can release our transform as a separate npm module.

This would also mean that you could define process.env.AWS_SERVICES to contain the list of services you want included with the SDK, which may result in a smaller SDK footprint.

So, to include an SDK that has just S3, my webpack.config.js file for my application would look something like this:

process.env.AWS_SERVICES = 's3'; // optional
module.exports = {
    entry: './src/index.js',
    output: {
        path: 'builds',
        filename: 'bundle.js'
    },
    // Relevant config starts here
    node: {
        fs: 'empty'
    },
    module: {
        loaders: [
            {
                test: /aws-sdk/,
                loaders: [
                    'transform?aws'
                ] 
            },
            {
                test: /\.json$/, loaders: ['json']
            }
        ]
    },
};

Because we use browserify for our browser builder, and the way the SDK is currently architected, it will take a lot of work to update the SDK so that it feels more 'natural' to use with webpack. That said, how would everyone feel about including configuration like the above, at the very least as an interim solution.

chrisradek picture chrisradek on 20 Apr 2016

Just to follow up, the above configuration can actually be used today with a modification to what gets passed to the transform loader.

First, you need to make sure you npm install the json-loader and transform loader:
npm install json-loader --save-dev
npm install transform-loader --save-dev

Then assuming you've also npm installed the aws-sdk, the config would look like this:

process.env.AWS_SERVICES = 's3'; // optional
module.exports = {
    entry: './src/index.js',
    output: {
        path: 'builds',
        filename: 'bundle.js'
    },
    // Relevant config starts here
    node: {
        fs: 'empty'
    },
    module: {
        loaders: [
            {
                test: /aws-sdk/,
                loaders: [
                    'transform?aws-sdk/dist-tools/transform'
                ] 
            },
            {
                test: /\.json$/, loaders: ['json']
            }
        ]
    },
};

There will be a few warnings generated but they should be safely ignored. Both warnings are irrelevant when using the SDK in the browser with the above transform.

Again, I know it isn't the ideal way for the SDK to work with webpack, but I hope this provides an interim solution until we can make it better.

chrisradek picture chrisradek on 20 Apr 2016
🎉8

+1

Iuriy-Budnikov picture Iuriy-Budnikov on 10 May 2016

+1

bergben picture bergben on 24 May 2016

+1

mikedizon picture mikedizon on 28 May 2016

@chrisradek what would be the solution for running it in node.js ?

alfonsodev picture alfonsodev on 29 May 2016

+1

Iuriy-Budnikov picture Iuriy-Budnikov on 23 Jun 2016
👍1

Not sure if this is useful, but I'm using webpack's exports-loader and can access the AWS variable locally within the js file where it was imported. Note, the AWS object is still attached to the window object. I tried using the imports loader to mitigate that, but wasn't successful. No further webpack config needed.

npm i -D exports-loader

index.js

import AWS from 'exports?AWS!aws-sdk/dist/aws-sdk'
console.log(AWS) // => Object {...}
pruett picture pruett on 24 Jun 2016

I tried a few ways, here is my webpack setup with reasons:

  • Want to redirect aws-sdk to aws-sdk/dist/aws-sdk
 resolve: {
    alias: {
      'aws-sdk': 'aws-sdk/dist/aws-sdk'
    }
  },
  • Next aws-sdk doesn't do a nice export just take its local AWS variable and make it the export:
// npm install exports-loader --save-dev

{
  test: /aws-sdk.js/,
  loader: 'exports?AWS'
}
  • Finally webpack will complain that don't use prebuilt files so tell webpack not to parse this sdk file: 
noParse: [
  /aws-sdk.js/
],

Done :rose: Now you can import * as AWS from "aws-sdk" both in the Browser and NodeJS

basarat picture basarat on 27 Jul 2016
🎉6

Did the same thing as @basarat separately and it works.

prescottprue picture prescottprue on 28 Jul 2016
❤1

Is it possible to only import S3 service using @basarat solution?

deviantony picture deviantony on 8 Aug 2016

@deviantony nope 🌹 You'd need to make a custom build ❤️

basarat picture basarat on 8 Aug 2016

I am attempting to use the @basarat solution but I get the following:
aws-sdk.js?085a:9867 Uncaught TypeError: Cannot read property 'crypto' of undefined
Anyone seen this or know how to resolve?

preetsethi picture preetsethi on 8 Aug 2016

I don't think this is webpack-specific. I am having similar issues trying to pull out just what I need in browserify, and I suspect AMD (requirejs) people will too. The interface exposed externally is a giant monkey-patched AWS object with lots of internal dependencies that aren't being tracked. I think the first step is to figure out the right require order/placement for every file and make a top-level require that pulls in all the parts. That could be fed to browserify in this project to generate UMD, but also give developers like me, who just want a few things, a hint as to what needs to be pulled in, to just use some subset

I think this is the start of that, but because of the dynamic stuff in api_loader it's throwing off everyone who needs a static dependency tree (direct import in ES6, webpack, browserify without brfs, etc.)

If that dynamic stuff is really needed (I'm not sure it is) I'd recommend a separate build-step that generates static require-lists, instead, and keep the generated files in this repo.

konsumer picture konsumer on 12 Aug 2016

I don't think that it was resolved as I'm still getting this error.
I'm trying to use the create-react-app cli with aws-sdk. Just trying to import AWS from "aws-sdk" but I'm getting the following error

Error in ./~/aws-sdk/lib/api_loader.js
Module not found: Error: Cannot resolve module 'fs' in /Users/jagi/workspace/react/client/node_modules/aws-sdk/lib
resolve module fs in /Users/jagi/workspace/react/client/node_modules/aws-sdk/lib
  looking for modules in /Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules
    /Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs doesn't exist (module as directory)
    resolve 'file' fs in /Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules
      resolve file
        /Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs doesn't exist
        /Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs.js doesn't exist
        /Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs.json doesn't exist
  looking for modules in /Users/jagi/workspace/react/client/node_modules
    /Users/jagi/workspace/react/client/node_modules/fs doesn't exist (module as directory)
    resolve 'file' fs in /Users/jagi/workspace/react/client/node_modules
      resolve file
        /Users/jagi/workspace/react/client/node_modules/fs doesn't exist
        /Users/jagi/workspace/react/client/node_modules/fs.js doesn't exist
        /Users/jagi/workspace/react/client/node_modules/fs.json doesn't exist
[/Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs]
[/Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs]
[/Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs.js]
[/Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs.json]
[/Users/jagi/workspace/react/client/node_modules/fs]
[/Users/jagi/workspace/react/client/node_modules/fs]
[/Users/jagi/workspace/react/client/node_modules/fs.js]
[/Users/jagi/workspace/react/client/node_modules/fs.json]
 @ ./~/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/jagi/workspace/react/client/node_modules/aws-sdk/lib
resolve module fs in /Users/jagi/workspace/react/client/node_modules/aws-sdk/lib
  looking for modules in /Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules
    /Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs doesn't exist (module as directory)
    resolve 'file' fs in /Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules
      resolve file
        /Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs doesn't exist
        /Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs.js doesn't exist
        /Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs.json doesn't exist
  looking for modules in /Users/jagi/workspace/react/client/node_modules
    /Users/jagi/workspace/react/client/node_modules/fs doesn't exist (module as directory)
    resolve 'file' fs in /Users/jagi/workspace/react/client/node_modules
      resolve file
        /Users/jagi/workspace/react/client/node_modules/fs doesn't exist
        /Users/jagi/workspace/react/client/node_modules/fs.js doesn't exist
        /Users/jagi/workspace/react/client/node_modules/fs.json doesn't exist
[/Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs]
[/Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs]
[/Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs.js]
[/Users/jagi/workspace/react/client/node_modules/aws-sdk/node_modules/fs.json]
[/Users/jagi/workspace/react/client/node_modules/fs]
[/Users/jagi/workspace/react/client/node_modules/fs]
[/Users/jagi/workspace/react/client/node_modules/fs.js]
[/Users/jagi/workspace/react/client/node_modules/fs.json]
 @ ./~/aws-sdk/lib/services.js 1:9-22
lukejagodzinski picture lukejagodzinski on 17 Aug 2016
👍1

It's challenging to understand why Amazon doesn't fix Webpack support.

dukedougal picture dukedougal on 17 Aug 2016
👍1

@jagi and @dukedougal did you try the solution posted by @basarat? I have used this same method to implement aws-sdk in tons of projects.

It makes more sense to setup a more specific webpack config rather than modify how this library works just for "supporting webpack". This is a nodejs library, so it makes sense that it uses node specific packages like fs, you just need to make sure that your build config (webpack) knows about this and makes the appropriate adjustments.

prescottprue picture prescottprue on 17 Aug 2016
👎4

+1

devhyunjae picture devhyunjae on 18 Aug 2016

@prescottprue it should work out of the box.

AWS should work seamlessly with the major JavaScript build systems. Users should not need to initially try and fail to make it work then somehow know to dig down in github and to know that one specific comment by one guy is the way to make it work. Amazon should fix it and they haven't more than a year after the initial report on this thread.

This thread is labelled as "feature request" but its really a bug. No milestone, no-one assigned.

dukedougal picture dukedougal on 18 Aug 2016
👍20

I've had success with the default entrypoint and ignoring require() calls with module.exprContext*, which doesn't include any services, so I use aws-sdk/dist-tools/service-collector to generate a services definition module:

// build-aws-services.js
const collector = require('aws-sdk/dist-tools/service-collector');

module.exports = `var AWS = require('aws-sdk');
${collector(process.env.AWS_SERVICES)
  .replace(/\brequire\('\.\//g, 'require(\'aws-sdk/lib/')}
`;

Then just add the output to the entry dynamically with val-loader:

// See `node -p 'require("aws-sdk/lib/api_loader").services'`
const services = 'cognitoidentityserviceprovider,cognitoidentity,firehose';
process.env.AWS_SERVICES = services;

module.exports = {
  entry: {
    app: [
      'regenerator-runtime/runtime',
      'val!./build-aws-services', // Enhance AWS with services from AWS_SERVICES
      './src',
    ],
  },
  module: {
    // Ignore require(expr) in aws-sdk
    exprContextRegExp: /$^/,
    exprContextCritical: false,
// ...
simonbuchan picture simonbuchan on 19 Aug 2016

@prescottprue I can use solution proposed by @basarat because I'm using create-react-app tool which does not allow modifying webpack config. Actually it does but it would require "ejecting" project and that will make it harder later to update to newest versions of react.

lukejagodzinski picture lukejagodzinski on 19 Aug 2016
👍2

@jagi I also am trying to use this with create-react-app and would prefer not to eject. Where you able to solve this?

ajmurmann picture ajmurmann on 21 Aug 2016
👍1

See aws/amazon-cognito-identity-js#117 where I have to add a bunch of extra stuff in the docs for webpack usage that looks a bit weird to have in another aws project :)

simonbuchan picture simonbuchan on 22 Aug 2016

@prescottprue The title of the repo is "AWS SDK for JavaScript in the browser and Node.js http://aws.amazon.com/javascript" Description of the repo "The official AWS SDK for JavaScript, available for browsers and mobile devices, or Node.js backends" so I don't agree this is just a nodejs library.

Aws JS team should listen the needs of users and give support to Webpack out of the box, or write simple instructions in the main Readme. The same problem is happening in other libraries like aws-iot-device-sdk
I'm don't want to be negative, I think this could be solved if the AWS Javascript team meets and decide a general approach to take in all the JS packages to give true universal support when possible for all Javascript engines, (nodejs, browser, react-native). And adds the information to the Readme.

alfonsodev picture alfonsodev on 22 Aug 2016
👍4

@ajmurmann for now I've just setup endpoints and I'm making http requests. It's temporary solution util aws-sdk support for webpack will be fixed.

lukejagodzinski picture lukejagodzinski on 22 Aug 2016

Hello everyone,
Given all the feedback, we're actively looking at how to make the experience of using the AWS SDK with webpack better.

First, PR #1116 adds a sample webpack configuration to the SDK's README to help users get started. Thank you @basarat for providing the configuration you use!

In the short-term, we're looking into how we can make the SDK work 'out of the box' with webpack without making any breaking changes. The goal here is to make the browser SDK work, but not necessarily support custom builds (additional webpack configuration would be necessary for that.)

To fully be able to support webpack and other bundlers, we will have to make some breaking changes. We're actively looking into what is possible with a major version bump, but don't have a timeline for that yet.

chrisradek picture chrisradek on 29 Aug 2016
🎉9

It would be great to have a possibility to import only needed parts of the library in the project.

Currently, you can import the whole library. So, after adding s3 functionality to your 300kb project file, it becomes 1.3mb.

vladshcherbin picture vladshcherbin on 30 Aug 2016
❤3

I've posted pr #1117 as a WIP for webpack support out of the box. I've done some testing, including with the create-react-app project to verify the SDK is being bundled and works correctly.

It still needs further testing but given the amount of demand, I wanted to post something as soon as possible to give those who want a chance to start playing with it.

chrisradek picture chrisradek on 30 Aug 2016

@VladShcherbin
The latest changes in the PR allow for pulling in individual services.

In your code, instead of writing something like:

var AWS = require('aws-sdk');
var s3 = new AWS.S3();

You could write something like:

var S3 = require('aws-sdk/browser/s3');
var s3 = new S3();

Then tools like webpack and browserify will only pull in S3 and the SDK core.

If you're not using a bundler, you could continue creating custom builds of the SDK using the browser builder.

This isn't live yet, but the code is available in the PR.

chrisradek picture chrisradek on 1 Sep 2016
👍5 🎉4

@chrisradek sounds awesome, will give it a try this week. Thanks! 👍

vladshcherbin picture vladshcherbin on 1 Sep 2016

Any guesses as to approx when this might become available in the released version?

thanks

dukedougal picture dukedougal on 1 Sep 2016

@dukedougal
You can npm install specific git branches.
So for this PR, you could run:
npm install git://github.com/chrisradek/aws-sdk-js.git#webpack
This is still a work in progress, so the code isn't completely finalized yet.

You'll still need the generic json-loader in your webpack config, but that should be it. I checked, and the create-react-app that people reported using includes this by default.

For example, this is the webpack config I was testing with:

var path = require('path');


module.exports = {
    entry: [
        path.join(process.cwd(), 'app', 'index.js')
    ],

    output: {
        path: path.join('dist'),
        filename: 'aws-bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.json$/, 
                loaders: ['json-loader']
            },
        ]
    }
}
chrisradek picture chrisradek on 1 Sep 2016
👍2

@chrisradek
When following the solutions in this thread, the script fails (with webpack) with the error message:
Error: Missing credentials in config(…) "CredentialsError: Missing credentials in config

But I have both the shared credentials file in ~/aws/credentials as well as environment variables set up.

Only when I hardcode the credentials it works... (why ?)

daumann picture daumann on 6 Sep 2016

I'm trying to use solution by @chrisradek but I can't make it work on the server. Everything works properly on the client. On the server I'm using aws-sdk API in Lambda function. I have a project using webpack that creates bundle which I upload to Lambda function. And when using aws-sdk I get the following error:

{
    "errorMessage": "Cannot find module \"./region_config.json\"",
    "errorType": "Error",
    "stackTrace": [
        "Object.<anonymous> (/var/task/build/handler.js:23392:182)",
        "__webpack_require__ (/var/task/build/handler.js:21:30)",
        "Object.<anonymous> (/var/task/build/handler.js:22843:21)",
        "__webpack_require__ (/var/task/build/handler.js:21:30)",
        "Object.<anonymous> (/var/task/build/handler.js:17663:2)",
        "__webpack_require__ (/var/task/build/handler.js:21:30)",
        "Object.<anonymous> (/var/task/build/handler.js:16601:12)",
        "Object.module.exports.module.exports (/var/task/build/handler.js:16624:31)",
        "__webpack_require__ (/var/task/build/handler.js:21:30)"
    ]
}

The handler.js file is a bundle file. Here is a fragment of the handler.js:16624:31 file in which is error (the last line)

    /* WEBPACK VAR INJECTION */(function(process) {var util = __webpack_require__(165);

    // browser specific modules
    util.crypto.lib = __webpack_require__(286);
    util.Buffer = __webpack_require__(287).Buffer;

    // browser stubs
    util.nodeRequire = function nodeRequire(mod) {};

    var AWS = __webpack_require__(166);

    // Load browser API loader
    AWS.apiLoader = function(svc, version) {
      return AWS.apiLoader.services[svc][version];
    };

    /**
     * @api private
     */
    AWS.apiLoader.services = {};

    // Load the DOMParser XML parser
    AWS.XML.Parser = __webpack_require__(296);

    // Load the XHR HttpClient
    __webpack_require__(297);

    if (typeof process === 'undefined') {
      process = {
        browser: true
      };
    }
    /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(164)))
lukejagodzinski picture lukejagodzinski on 6 Sep 2016

@daumann
The solutions provided in this thread only allow the browser version of the SDK to be used with webpack. In the browser, the SDK won't be able to access the credentials on your hard drive, or via environment variables.

There is still more work to be done to allow the SDK to support webpack for node bundles.

chrisradek picture chrisradek on 6 Sep 2016

@jagi
When creating your webpack bundle, are you requiring the SDK completely, or are you pulling in specific services? Are you configuring webpack to build a node.js bundle?

chrisradek picture chrisradek on 6 Sep 2016

@chrisradek I'm requiring entire library. What do you mean by "to build a node.js bundle". It's building project into one file/bundle and my output webpack is:

  output: {
    path: paths.serverAppBuild,
    filename: 'handler.js',
    library: 'lib',
    libraryTarget: 'commonjs2'
  },

And I've tested it works properly if I'm not using aws-sdk.

lukejagodzinski picture lukejagodzinski on 6 Sep 2016

@jagi
In webpack, you can specify a target By default the target is web, which causes webpack to look at the browser field in the package.json file. In the SDK's case, this essentially means you'll be getting the browser version of the SDK.

For Lambda, you won't want the browser version of the SDK. The PR only covers supporting the browser version of the SDK with webpack right now, so if you change the target to node, you'll likely face some issues still. I'll work on updating the PR to also support webpack/browserify when setting the target to node.

chrisradek picture chrisradek on 6 Sep 2016
👍1

@chrisradek oh I see... I didn't know about the target option. I've changed it and now getting another error Cannot find module 'domain'. but it's probably a problem you're talking about.

Sorry for probably stupid question, but why it's not working with webpack? At the beginning I though that the problem is using import statement but even when I use require in webpack it's still not working. So is it like webpack take the aws-sdk library and just exports it but library is just not prepared to be used with webpack? And actually why it's not webpack compatible? There are many other libraries that when being created, haven't been designed to work with webpack but they work.

Do you know how much time will it take you to make this change?

lukejagodzinski picture lukejagodzinski on 6 Sep 2016

@jagi
The SDK doesn't already work in webpack/browserify for node.js projects largely due to the way API models are consumed. The models are loaded dynamically, when many of these tools require static imports (or custom configuration) to work properly. In the PR, for the browser use-case the APIs are now imported statically. We'll need to do something similar to get this working for node.js as well.

chrisradek picture chrisradek on 6 Sep 2016

@chrisradek oh I see. Thanks for explanation. Do you know when can it be ready? Is it a big feature to implement?

lukejagodzinski picture lukejagodzinski on 6 Sep 2016

@jagi
Since we've gotten a couple issues now regarding how to use browserify/webpack with the SDK for node.js projects, I'll try to include that with the existing PR. I can't say with certainty when it will be ready, but I plan to work on that this week. Hopefully we can borrow a lot of what we did to support the browser version to also support the node.js version.

chrisradek picture chrisradek on 6 Sep 2016
👍5

I need the server version for node.js, not browser.

dukedougal picture dukedougal on 6 Sep 2016

Got the following issues when trying to use @chrisradek aws-sdk branch:

ERROR in ./~/aws-sdk/browser/s3.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../apis/s3-2006-03-01.min in /.../website/web/node_modules/aws-sdk/browser
 @ ./~/aws-sdk/browser/s3.js 8:45-81

ERROR in ./~/aws-sdk/browser/s3.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../apis/s3-2006-03-01.paginators in /.../website/web/node_modules/aws-sdk/browser
 @ ./~/aws-sdk/browser/s3.js 9:56-99

ERROR in ./~/aws-sdk/browser/s3.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../apis/s3-2006-03-01.waiters2 in /.../website/web/node_modules/aws-sdk/browser
 @ ./~/aws-sdk/browser/s3.js 10:53-94

I'm using the following code in my app:

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

const s3 = new S3({...});
...
deviantony picture deviantony on 8 Sep 2016

@deviantony
I'll be putting up a new PR shortly that should address some problems. In your webpack config, are you specifying a json loader like in the above comment:
https://github.com/aws/aws-sdk-js/issues/603#issuecomment-244189509

chrisradek picture chrisradek on 8 Sep 2016

@chrisradek yeap, I'm using a json loader. Thanks for your work !

deviantony picture deviantony on 8 Sep 2016

@deviantony Do you mind sharing your config? With my latest changes I've been testing with a pretty bare bones config, for web-based and node-based projects. If you can share what yours looks like I can expand my test cases.

chrisradek picture chrisradek on 8 Sep 2016

@chrisradek here's the webpack config I've used:

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://0.0.0.0:8080',
    'webpack/hot/only-dev-server',
    './src/index.jsx',
  ],

  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/',
  },

  plugins: [
    new webpack.NoErrorsPlugin(),
  ],

  resolve: {
    extensions: ['', '.js', '.jsx'],
  },

  module: {
    loaders: [
      // Javascript & React JSX files
      {
        test: /\.jsx?$/,
        loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'],
        include: path.join(__dirname, 'src'),
        exclude: /node_modules/,
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader!postcss-loader',
      },
      // Auth0-Lock Build
      {
        test: /node_modules[\\\/]auth0-lock[\\\/].*\.js$/,
        loaders: ['transform-loader/cacheable?brfs',
        'transform-loader/cacheable?packageify',
      ],
    }, {
      test: /node_modules[\\\/]auth0-lock[\\\/].*\.ejs$/,
      loader: 'transform-loader/cacheable?ejsify',
    }, {
      test: /\.json$/,
      loader: 'json',
    },
    // Bootstrap CSS
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader',
    }, {
      test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/font-woff',
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/octet-stream',
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'file',
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=image/svg+xml',
    },
    {
      test: /\.less$/,
      loader: 'style!css!less',
    },
    {
      test: /\.(jpe?g|png|gif|svg)$/,
      loader: 'file?hash=sha512&digest=hex&name=[hash].[ext]!image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false',
    },
  ],
  postLoaders: [
    { test: /\.jsx?$/, loader: 'transform?envify' },
  ],
},
postcss: function postCss() {
  return [autoprefixer];
},
devServer: {
  historyApiFallback: true,
  contentBase: 'public/',
},
};
deviantony picture deviantony on 8 Sep 2016

@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.

simonbuchan picture simonbuchan on 8 Sep 2016

@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)

chrisradek picture chrisradek on 8 Sep 2016

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

simonbuchan picture simonbuchan on 8 Sep 2016

@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.

chrisradek picture chrisradek on 8 Sep 2016

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

simonbuchan picture simonbuchan on 8 Sep 2016

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.

chrisradek picture chrisradek on 8 Sep 2016
👍1

@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.

deviantony picture deviantony on 8 Sep 2016

@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.

chrisradek picture chrisradek on 8 Sep 2016
🎉1

@chrisradek

This works perfectly:

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

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

Amazing job :clap:

deviantony picture deviantony on 9 Sep 2016
👍3

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.

chrisradek picture chrisradek on 9 Sep 2016
🎉11 ❤3

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.

danbrianwhite picture danbrianwhite on 9 Sep 2016

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

Thanks
Ramesh

rameshsubramanian picture rameshsubramanian on 1 Oct 2016

@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

chrisradek picture chrisradek on 1 Oct 2016
👍1

@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/ }
nickbreaton picture nickbreaton on 3 Nov 2016

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

jmanuel1609 picture jmanuel1609 on 23 Nov 2016
👍2

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');

kejsiStruga picture kejsiStruga on 19 Jan 2017
👍1

@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

chrisradek picture chrisradek on 19 Jan 2017

@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

shyamchandranmec picture shyamchandranmec on 20 Feb 2017

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.

gerardmrk picture gerardmrk on 18 Mar 2017

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

shyamchandranmec picture shyamchandranmec on 20 Mar 2017

@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.

chrisradek picture chrisradek on 20 Mar 2017

@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
shyamchandranmec picture shyamchandranmec on 20 Mar 2017
👍1

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.

lock[bot] picture lock[bot] on 29 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ranode picture ranode  ·  4Comments
pocari picture pocari  ·  3Comments
schatekar picture schatekar  ·  3Comments
bhishp picture bhishp  ·  4Comments
adolfosrs picture adolfosrs  ·  3Comments