Aws-sdk-js: Cannot be compiled with Babel 7

[simonemazzoni]

Hello, I get the following error trying to import the aws-sdk module in my react app.

ERROR in ../node_modules/aws-sdk/lib/event_listeners.js
Module not found: Error: Can't resolve 'util' in 'myproject-root/node_modules/aws-sdk/lib'

The app is compiled using @babel/[email protected] and [email protected] which are the last version on babel cores and loader.

Tried the same thing in another project using @babel/[email protected] and [email protected] and all works just fine.

Any idea?
Thanks.

[chrisradek]

@simonemazzoni
Did you use create-react-app to generate a new project, or are you using babel/webpack (any other tools) directly?

If you use commonjs syntax are you able to import the SDK?

[chrisradek]

Ah, I see in this issue you reported you weren't using create-react-app. Can you share what your project configuration looks like? package.json, babel config, etc.

[simonemazzoni]

@chrisradek I don't user create-react-app as you already said.
I use webpack 4 with babel-loader.

{
    enforce: 'pre',
    test: /\.(js|jsx)?$/,
    exclude: /node_modules/,
    include: this.srcPathAbsolute,
    loader: 'babel-loader',
    options: {
        presets: ['@babel/env', '@babel/react'],
        plugins: [
            '@babel/plugin-syntax-dynamic-import',
            '@babel/plugin-proposal-class-properties',
            'react-hot-loader/babel'
        ]
    }
},
{
    test: /\.js?$/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
        options: {
            extends: path.join(__dirname, '../../.babelrc'),
            cacheDirectory: true
        }
    }
},

And this is my .babelrc

{
  "presets": [
    ["@babel/env", { "shippedProposals": true }],
    "@babel/react"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties",
    "react-hot-loader/babel"
  ],
  "env": {
    "test": {
      "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        "@babel/plugin-proposal-object-rest-spread",
        "istanbul"
      ]
    }
  }
}

[chrisradek]

@simonemazzoni
Can you also share what your dependencies look like in your package.json? At least, your babel/webpack/react dependencies? We've seen issues with specific babel plugins in the past and so want to get as close as possible to the same setup you have.

[simonemazzoni]

@chrisradek here the meaningful (I guess) dependencies.

"aws-amplify": "^1.1.6",
"@babel/polyfill": "^7.0.0",
"copy-webpack-plugin": "^4.2.0",
"script-ext-html-webpack-plugin": "^2.0.1",
"style-ext-html-webpack-plugin": "^3.4.7",
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.2",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"babel-plugin-istanbul": "^4.1.4",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.20.2",
"react": "^16.2.0",

[chrisradek]

@simonemazzoni
I haven't been able to reproduce an issue using webpack with babel7.

I suspect there's something different about my configuration or project that's not triggering the error. Can you share a simple project you can share that reproduces the issue? package.json/webpack.config.js, .babelrc, and the source file that triggers webpack to fail?

It might also help if you shared the webpack error you're receiving.

[chrisradek]

While I haven't been able to reproduce the issue, based on the original post in the amplify repo, I think it may have something to do with this line where the node util module is being imported.

This util is likely getting shimmed by most build tools. I know webpack and browserify both will shim this node module. I'm wondering if there's something about your config, version of node-util being shimmed, or babel that's causing util to either not be present, or to be incompatible.

We can update the SDK to make sure a pinned version of node-util is always used in the browser version of the SDK, though I'd like to be able to reproduce your issue so I can be sure that doing this addresses your problem as well.

[chrisradek]

@simonemazzoni
I have a branch that should resolve the missing 'util' issue. Can you try running the following in your app to install the branch?
npm install --save git://github.com/chrisradek/aws-sdk-js.git#fix-babel7

If that solves your issue, we'll merge it in.

[simonemazzoni]

@chrisradek tried right now and it works just fine! 🎉 🎉
So did you change the util require you mentioned in the answer above?

[chrisradek]

@simonemazzoni
Yes. Instead of relying on a build tool to pull it in, we're explicitly setting it. See #2312 for details.

Glad it works!

[simonemazzoni]

@chrisradek great! So, when you will release this fix, I will be able to use also the aws-amplify module, which was my first intention.
How long should be take the release of this fix?

[simonemazzoni]

@chrisradek wait, I'm sorry but I made a mistake. I compiled the wrong branch of my project, which is the branch without the aws-sdk import.

I tried again with the correct branch and I noticed that the problem is still there

ERROR in ../node_modules/aws-sdk/lib/browser_loader.js
Module not found: Error: Can't resolve 'util/' in '/Users/jarvis/WebstormProjects/bandyer-integration-dashboard/node_modules/aws-sdk/lib'
 @ ../node_modules/aws-sdk/lib/browser_loader.js 7:15-31
 @ ../node_modules/aws-sdk/lib/browser.js

That is the error and it refers to browser_loader for what I can see. This line specifically.

Sorry again for the misunderstanding.

[chrisradek]

@simonemazzoni
Thanks for double-checking. Do you have a util package in your node_modules directory? And if so, can you tell where it is coming from? (its package.json should say).

If you can provide any of the full configuration + source file that imports the sdk that would be extremely helpful. Using the dependencies you originally listed I'm unable to encounter this error.

[simonemazzoni]

@chrisradek ok, I just found the bug and the solution and it was just simple and crazy at the same time.

The problem is basically introduced by a resolve alias override in the webpack config.

resolve: {
    alias: {
        assets: `${this.srcPathAbsolute}/assets/`,        
        app: `${this.srcPathAbsolute}/app/`,
        styles: `${this.srcPathAbsolute}/styles/`,
        // util: `${this.srcPathAbsolute}/util/`
    },
    extensions: ['.js', '.jsx'],    
}

Above the relevant configuration file that causes the issue. As you can see in the commented line, there is a new alias for util redefined as the path of a util file contained in the project.
The skeleton of the project is part of a template that uses this alias for convenience, but in this case causes problems since the util alias redefinition change the result of each require('util') or import util from 'util'.
I tried to comment that line and the aws-sdk import works just fine (for real this time).

To summarise, it doesn't looks like the problem is from the aws-sdk itself but from a quirk in the config.

P.S. I will rename the alias to myUtil or something similar to avoid conflicts, but maybe could be safer to rename the aws-sdk util file too to something less common?

[chrisradek]

Part of the problem is the SDK depends on the util module, so it isn't something we can rename. However, we're only using util so we can call inspect when logging data, so it's possible we can rewrite that part of the code to not depend on util anymore.

Thanks for digging into the issue, glad we at least know what's going on now!

[simonemazzoni]

@chrisradek it was a pleasure to help understanding this.
Now I get where the util module comes from and why you can't rename it and it makes a lot of sense. Maybe not rely on the util module could be a safer solution, but I will recommend to other people with the same error I got, to verify where util points on require and import and to be careful with webpack resolve aliases.

I guess we can close this issue.
Thanks again.

[srchase]

@simonemazzoni

Thanks for working with us on this issue. I'm going to close this out. Appreciate the help.

[rfdc]

I am getting the same issue and using "babel-core": "^6.26.0" and latest aws-amplify
What should I do?
Thanks

[rfdc]

@chrisradek ok, I just found the bug and the solution and it was just simple and crazy at the same time.

The problem is basically introduced by a resolve alias override in the webpack config.

resolve: {
    alias: {
        assets: `${this.srcPathAbsolute}/assets/`,        
        app: `${this.srcPathAbsolute}/app/`,
        styles: `${this.srcPathAbsolute}/styles/`,
        // util: `${this.srcPathAbsolute}/util/`
    },
    extensions: ['.js', '.jsx'],    
}

Above the relevant configuration file that causes the issue. As you can see in the commented line, there is a new alias for util redefined as the path of a util file contained in the project.
The skeleton of the project is part of a template that uses this alias for convenience, but in this case causes problems since the util alias redefinition change the result of each require('util') or import util from 'util'.
I tried to comment that line and the aws-sdk import works just fine (for real this time).

To summarise, it doesn't looks like the problem is from the aws-sdk itself but from a quirk in the config.

P.S. I will rename the alias to myUtil or something similar to avoid conflicts, but maybe could be safer to rename the aws-sdk util file too to something less common?

it solved my problem too...thanks guys 💯

[lock[bot]]

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.