New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack support #603

Closed
anthonator opened this Issue May 13, 2015 · 98 comments

Comments

Projects
None yet
@anthonator

anthonator commented May 13, 2015

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 lsegal added the Question label May 14, 2015

@lsegal

This comment has been minimized.

Show comment
Hide comment
@lsegal

lsegal May 14, 2015

Contributor

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!

Contributor

lsegal commented May 14, 2015

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

This comment has been minimized.

Show comment
Hide comment
@AdityaManohar

AdityaManohar Jun 8, 2015

Member

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

Member

AdityaManohar commented Jun 8, 2015

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

This comment has been minimized.

Show comment
Hide comment
@jblack10101

jblack10101 Jul 22, 2015

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

jblack10101 commented Jul 22, 2015

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

@geminiyellow

This comment has been minimized.

Show comment
Hide comment
@geminiyellow

geminiyellow Jul 23, 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 commented Jul 23, 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.

@ryanyogan

This comment has been minimized.

Show comment
Hide comment
@ryanyogan

ryanyogan Jul 27, 2015

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 commented Jul 27, 2015

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

This comment has been minimized.

Show comment
Hide comment
@rstormsf

rstormsf Oct 24, 2015

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

rstormsf commented Oct 24, 2015

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

@prescottprue

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Oct 26, 2015

+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 commented Oct 26, 2015

+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

This comment has been minimized.

Show comment
Hide comment
@rstormsf

rstormsf Oct 26, 2015

The same here :-(

rstormsf commented Oct 26, 2015

The same here :-(

@dbernstein

This comment has been minimized.

Show comment
Hide comment
@dbernstein

dbernstein Oct 27, 2015

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

dbernstein commented Oct 27, 2015

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

@geminiyellow

This comment has been minimized.

Show comment
Hide comment
@geminiyellow

geminiyellow Oct 27, 2015

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

webpack.conf.js

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

geminiyellow commented Oct 27, 2015

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

webpack.conf.js

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

This comment has been minimized.

Show comment
Hide comment
@dbernstein

dbernstein Oct 27, 2015

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 commented Oct 27, 2015

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

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Nov 10, 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 commented Nov 10, 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).

@wesleyyee

This comment has been minimized.

Show comment
Hide comment
@wesleyyee

wesleyyee commented Dec 8, 2015

+1

@prescottprue

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Dec 22, 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 commented Dec 22, 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']},
  ]
}
@jkudish

This comment has been minimized.

Show comment
Hide comment
@jkudish

jkudish Dec 27, 2015

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

jkudish commented Dec 27, 2015

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

@dukedougal

This comment has been minimized.

Show comment
Hide comment
@dukedougal

dukedougal Jan 1, 2016

Please provide webpack support.

dukedougal commented Jan 1, 2016

Please provide webpack support.

@amowu

This comment has been minimized.

Show comment
Hide comment
@amowu

amowu commented Jan 4, 2016

+1

@jontewks

This comment has been minimized.

Show comment
Hide comment
@jontewks

jontewks commented Jan 26, 2016

+1

@mdramos

This comment has been minimized.

Show comment
Hide comment
@mdramos

mdramos Feb 8, 2016

+1 for webpack support.

mdramos commented Feb 8, 2016

+1 for webpack support.

@bendenoz

This comment has been minimized.

Show comment
Hide comment
@bendenoz

bendenoz commented Feb 11, 2016

+1

@dukedougal

This comment has been minimized.

Show comment
Hide comment
@dukedougal

dukedougal Feb 19, 2016

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

dukedougal commented Feb 19, 2016

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

@chrisradek chrisradek added Feature Request and removed Question labels Feb 19, 2016

@chrisradek

This comment has been minimized.

Show comment
Hide comment
@chrisradek

chrisradek Feb 19, 2016

Member

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.

Member

chrisradek commented Feb 19, 2016

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 chrisradek reopened this Feb 19, 2016

@slessans

This comment has been minimized.

Show comment
Hide comment
@slessans

slessans commented Feb 24, 2016

+1

@bendenoz

This comment has been minimized.

Show comment
Hide comment
@bendenoz

bendenoz Feb 24, 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 commented Feb 24, 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')

@deviantony

This comment has been minimized.

Show comment
Hide comment
@deviantony

deviantony Sep 8, 2016

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

deviantony commented Sep 8, 2016

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

@chrisradek

This comment has been minimized.

Show comment
Hide comment
@chrisradek

chrisradek Sep 8, 2016

Member

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

Member

chrisradek commented Sep 8, 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.

@deviantony

This comment has been minimized.

Show comment
Hide comment
@deviantony

deviantony Sep 8, 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 commented Sep 8, 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/',
},
};
@simonbuchan

This comment has been minimized.

Show comment
Hide comment
@simonbuchan

simonbuchan Sep 8, 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 commented Sep 8, 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.

@chrisradek

This comment has been minimized.

Show comment
Hide comment
@chrisradek

chrisradek Sep 8, 2016

Member

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

Member

chrisradek commented Sep 8, 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)

@simonbuchan

This comment has been minimized.

Show comment
Hide comment
@simonbuchan

simonbuchan commented Sep 8, 2016

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

@chrisradek

This comment has been minimized.

Show comment
Hide comment
@chrisradek

chrisradek Sep 8, 2016

Member

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

Member

chrisradek commented Sep 8, 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.

@simonbuchan

This comment has been minimized.

Show comment
Hide comment
@simonbuchan

simonbuchan Sep 8, 2016

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

simonbuchan commented Sep 8, 2016

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

@chrisradek

This comment has been minimized.

Show comment
Hide comment
@chrisradek

chrisradek Sep 8, 2016

Member

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.

Member

chrisradek commented Sep 8, 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.

@deviantony

This comment has been minimized.

Show comment
Hide comment
@deviantony

deviantony Sep 8, 2016

@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 commented Sep 8, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@chrisradek

chrisradek Sep 8, 2016

Member

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

Member

chrisradek commented Sep 8, 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.

@deviantony

This comment has been minimized.

Show comment
Hide comment
@deviantony

deviantony Sep 8, 2016

@chrisradek

This works perfectly:

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

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

Amazing job 👏

deviantony commented Sep 8, 2016

@chrisradek

This works perfectly:

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

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

Amazing job 👏

@chrisradek chrisradek closed this in de21c81 Sep 9, 2016

chrisradek added a commit that referenced this issue Sep 9, 2016

@chrisradek

This comment has been minimized.

Show comment
Hide comment
@chrisradek

chrisradek Sep 9, 2016

Member

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.

Member

chrisradek commented Sep 9, 2016

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

This comment has been minimized.

Show comment
Hide comment
@danbrianwhite

danbrianwhite Sep 9, 2016

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 commented Sep 9, 2016

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

This comment has been minimized.

Show comment
Hide comment
@rameshsubramanian

rameshsubramanian Sep 30, 2016

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

Thanks
Ramesh

rameshsubramanian commented Sep 30, 2016

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

Thanks
Ramesh

@chrisradek

This comment has been minimized.

Show comment
Hide comment
@chrisradek

chrisradek Sep 30, 2016

Member

@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

Member

chrisradek commented Sep 30, 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

@nickbreaton

This comment has been minimized.

Show comment
Hide comment
@nickbreaton

nickbreaton Nov 3, 2016

@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 commented Nov 3, 2016

@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/ }
@kejsiStruga

This comment has been minimized.

Show comment
Hide comment
@kejsiStruga

kejsiStruga Jan 19, 2017

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 commented Jan 19, 2017

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

This comment has been minimized.

Show comment
Hide comment
@chrisradek

chrisradek Jan 19, 2017

Member

@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

Member

chrisradek commented Jan 19, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@shyamchandranmec

shyamchandranmec Feb 20, 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 commented Feb 20, 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

@gerardmrk

This comment has been minimized.

Show comment
Hide comment
@gerardmrk

gerardmrk Mar 18, 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 commented Mar 18, 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.

@shyamchandranmec

This comment has been minimized.

Show comment
Hide comment
@shyamchandranmec

shyamchandranmec Mar 20, 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 commented Mar 20, 2017

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

@chrisradek

This comment has been minimized.

Show comment
Hide comment
@chrisradek

chrisradek Mar 20, 2017

Member

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

Member

chrisradek commented Mar 20, 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.

@shyamchandranmec

This comment has been minimized.

Show comment
Hide comment
@shyamchandranmec

shyamchandranmec Mar 20, 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 commented Mar 20, 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment