Skip to content
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

Support Rollup #1769

Closed
bennypowers opened this issue Oct 21, 2017 · 34 comments
Closed

Support Rollup #1769

bennypowers opened this issue Oct 21, 2017 · 34 comments
Labels
feature-request A feature should be added or improved.

Comments

@bennypowers
Copy link

With imports of the type

import { AuthenticationDetails } from 'amazon-cognito-identity-js';

and rollup.config.js featuring:

import sourcemaps from 'rollup-plugin-sourcemaps';
import resolve from 'rollup-plugin-node-resolve';
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';

export default {

  input: 'src/eve-redux/eve-redux-store.js',

  output: {
    file: 'src/bundle.js',
    format: 'iife',
  },

  watch: {
    include: 'src/**',
  },

  plugins: [
    sourcemaps(),
    resolve(),
    json(),
    builtins(),
    globals(),
    commonjs({
      include: 'node_modules/**',
      namedExports: {
        'node_modules/inferno-redux/index.js': ['Provider'],
      },
    }),
  ],

};

rollup -c produces the output:

src/eve-redux/eve-redux-store.js → src/bundle.js...
preferring built-in module 'util' over local alternative at 'FOO/node_modules/util/util.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
preferring built-in module 'process' over local alternative at 'FOO/node_modules/process/index.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
preferring built-in module 'util' over local alternative at 'FOO/node_modules/util/util.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
[!] Error: 'util' is not exported by node_modules/aws-sdk/global.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules/amazon-cognito-identity-js/es/AuthenticationHelper.js (20:9)
18:  */
19:
20: import { util } from 'aws-sdk/global';
             ^
21:
22: import BigInteger from './BigInteger';

error Command failed with exit code 1.
@chrisradek chrisradek added the feature-request A feature should be added or improved. label Oct 23, 2017
@bennypowers
Copy link
Author

By modifying the rollup.config.js slightly I've succeeded at bundling without error, however we're not out of the woods yet.

import sourcemaps from 'rollup-plugin-sourcemaps';
import resolve from 'rollup-plugin-node-resolve';
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';

export default {

  external: ['aws-sdk'],

  globals: {
    'aws-sdk': 'AWS',
  },

  input: 'src/eve-redux/eve-redux-store.js',

  output: {
    file: 'src/bundle.js',
    name: 'EVE',
    format: 'iife',
  },

  watch: {
    include: 'src/**',
  },

  plugins: [
    json(),
    commonjs({
      include: 'node_modules/**',
      ignoreGlobal: true,
      namedExports: {
        'node_modules/inferno-redux/index.js': ['Provider'],
        'node_modules/aws-sdk/global.js': ['util'],
      },
    }),
    globals(),
    builtins(),
    resolve({
      preferBuiltins: true,
    }),
    sourcemaps(),
  ],

};

Rollup successfully bundles the SDK, however, the browser complains:

bundle.js:2316 Uncaught TypeError: Cannot read property 'memoizedProperty' of undefined

which takes us to this line:

var memoizedProperty$1 = util_1.memoizedProperty;

and

var util_1 = util;

and

/**
 * A set of utility methods for use with the AWS SDK.
 *
 * @!attribute abort
 *   Return this value from an iterator function {each} or {arrayEach}
 *   to break out of the iteration.
 *   @example Breaking out of an iterator function
 *     AWS.util.each({a: 1, b: 2, c: 3}, function(key, value) {
 *       if (key == 'b') return AWS.util.abort;
 *     });
 *   @see each
 *   @see arrayEach
 * @api private
 */
var util = {//...insert AWS util obj here...}

@rntgspr
Copy link

rntgspr commented Mar 2, 2018

I got the same problem running on pure Node@6.10.

I don't have sure if order of lines should be the problem in this case, but i have:

5893: var memoizedProperty = util_1.memoizedProperty;
20350: var util_1 = util$1;
19431: var util$1 = { // amazon code

@powerful235
Copy link

Any update? Facing this issue too.

@IAmBrandonMcGregor
Copy link

Check out Amazon's documentation for using aws-iot-device-sdk-js in the browser. https://github.com/aws/aws-iot-device-sdk-js#browser

It's pretty crazy, but you have to manually compile the JS and include it separately via <script>. That compiled JS defines require(...) so even if you're using Rollup, you have to do...

var AWS = require('aws-sdk');
var AWSIoTData = require('aws-iot-device-sdk');

@btakita
Copy link

btakita commented Jan 2, 2019

import AWS from 'aws-sdk' seems to be working for me. Is this the case for anybody else?

@RedHatter
Copy link

How is this still an issue? This makes the library completely unusable for anyone using rollup. I would expect a bug of this magnitude to be fixed quickly but it's been over a year and no work as been done on it.

I'm by no means an expert with rollup but I suspect the issue arises from the multitude of circular dependencies.

@jordanranz
Copy link

Was anyone able to solve: "Uncaught TypeError: Cannot read property 'memoizedProperty' of undefined"?

@wikiwang1991
Copy link

Looks like I have to use either webpack or mongo stitch.

@jesper-bylund
Copy link

@wikiwang1991 yes, for some reason this issue is not getting solved. I use webpack, it works fine after some tinkering with the configs.

@chufgard
Copy link

chufgard commented Feb 20, 2020

This issue is not open for more than two years...

Stumbled upon this while trying to use amplify together with svelte - which uses rollup.

@chufgard
Copy link

This issue is not open for more than two years...
Stumbles upon this while trying to use amplify together with svelte - which uses rollup.

Same reason I found this post 24 days ago. I ended up just switching to Firebase. : /

Finally found a way: You can use webpack instead of rollup to build the application, then everything works just fine.

@tommedema
Copy link

For those who don't want to switch from rollup to webpack, what is the recommended course of action?

@saumets
Copy link

saumets commented May 6, 2020

For those who don't want to switch from rollup to webpack, what is the recommended course of action?

Switch to GCP and start using Firebase instead, unfortunately, I think. 😢

@jadbox
Copy link

jadbox commented Jul 16, 2020

Has anyone tried rollup with the SDK v3? https://github.com/aws/aws-sdk-js-v3

cc @chufgard

@tjmgregory
Copy link

For GCP, you can instruct external dependancies to be installed on the host machine using a package.unbundled.json and supplying it to the copy plugin in your rollup.config.js.

The following worked for me:

rollup.config.js

import typescript from '@rollup/plugin-typescript'
import nodeResolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import json from '@rollup/plugin-json'
import copy from 'rollup-plugin-copy2'

export default {
    input: './src/index.ts',
    preserveSymlinks: true,
    plugins: [
        typescript(),
        nodeResolve({ preferBuiltins: true }),
        commonjs({
            namedExports: {}
        }),
        json(),
        copy({
            assets: [['./package.unbundled.json', 'package.json']]
        })
    ],
    external: ['crypto', 'firebase-admin', 'firebase-functions', '@google-cloud/firestore', 'buffer', '@google-cloud/pubsub', 'iltorb', 'aws-sdk'],
    output: {
        dir: './lib',
        format: 'cjs',
        sourcemap: true
    }
}

package.unbundled.json

{
    "dependencies": {
        "firebase-admin": "^8.9.2",
        "aws-sdk": "^2.720.0"
    }
}

@justindra
Copy link

I ran into this issue recently and after further investigating found that one of the dependencies I had was importing from aws-sdk/global instead of aws-sdk and that caused this issue. So updating that dependency to use the same import and setting aws-sdk as external helped.

@misogihagi
Copy link

I found a strange way for 'amazon-cognito-identity-js'

echo export default AmazonCognitoIdentity >> node_modules\amazon-cognito-identity-js\dist\amazon-cognito-identity.js
and in your app

import AmazonCognitoIdentity  from 'amazon-cognito-identity-js/dist/amazon-cognito-identity.js';
...

@Tenkir
Copy link

Tenkir commented Mar 30, 2021

Has anyone tried rollup with the SDK v3? https://github.com/aws/aws-sdk-js-v3

cc @chufgard

This issue seems to be resolved in v3. I was encountering it with v2, and it went away when upgrading to v3.

@Chandana-idexcel
Copy link

I am still facing issues with v2. Any solution for v2?

@christianlmc
Copy link

christianlmc commented Jan 10, 2022

I'am still getting the same error as @bennypowers and @jordanranz reported. BTW I'm using "vite": "^2.7.10", with "aws-sdk": "^2.1048.0" on Vue 2.

Builds with webpack still run fine but vite throws me the same error on the browser:

Uncaught TypeError: Cannot read property 'memoizedProperty' of undefined

Is there at least a workaround for this issue?

@christianlmc
Copy link

After a few days of trying to fix this issue, I finally got to a working solution aka workaround.

First create a file for the functions you use on your project (in my case it was only S3)

aws-s3.js

import AWS from 'aws-sdk';

const getS3Object = () => {
    return new AWS.S3({ region: 'us-west-2' });
};

window.getS3Object = getS3Object; // Expose getS3Object to window object

Then create the webpack config file (install webpack if you don't have it).

webpack.config.js

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    // Specify the entry point for our app.
    entry: [path.join(__dirname, 'aws-s3.js')],
    // Specify the output file containing our bundled code.
    output: {
        path: __dirname,
        filename: 'aws-s3.min.js',
    },
    optimization: {
        minimizer: [
            new TerserPlugin({
                extractComments: false, // omit Licence.txt file generation
            }),
        ],
    },
    // Enable WebPack to use the 'path' package.
    resolve: {
        fallback: { path: require.resolve('path-browserify') },
    },
};

Add the following script to your package.json.

package.json

"scripts": {
    // ...
    "build-bundled": "webpack"
}

Then run the following command, this will run the webpack with the configurations we set up on webpack.config.js and generate our file (in this case aws-s3.min.js):

npm run build-bundled

Include the generated aws-s3.min.js to your index.html

index.html

<html>
    <body>
         <!-- Add this script tag -->
        <script type="module" src="/aws-s3.min.js"></script>
    </body>
</html>

With that, you should be able to call the aws-sdk functions with the windows object.

Before

const S3 = new AWS.S3()

After

const S3 = window.getS3Object();

@BossYi
Copy link

BossYi commented Feb 13, 2022

After a few days of trying to fix this issue, I finally got to a working solution aka workaround.

First create a file for the functions you use on your project (in my case it was only S3)

aws-s3.js

import AWS from 'aws-sdk';

const getS3Object = () => {
    return new AWS.S3({ region: 'us-west-2' });
};

window.getS3Object = getS3Object; // Expose getS3Object to window object

Then create the webpack config file (install webpack if you don't have it).

webpack.config.js

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    // Specify the entry point for our app.
    entry: [path.join(__dirname, 'aws-s3.js')],
    // Specify the output file containing our bundled code.
    output: {
        path: __dirname,
        filename: 'aws-s3.min.js',
    },
    optimization: {
        minimizer: [
            new TerserPlugin({
                extractComments: false, // omit Licence.txt file generation
            }),
        ],
    },
    // Enable WebPack to use the 'path' package.
    resolve: {
        fallback: { path: require.resolve('path-browserify') },
    },
};

Add the following script to your package.json.

package.json

"scripts": {
    // ...
    "build-bundled": "webpack"
}

Then run the following command, this will run the webpack with the configurations we set up on webpack.config.js and generate our file (in this case aws-s3.min.js):

npm run build-bundled

Include the generated aws-s3.min.js to your index.html

index.html

<html>
    <body>
         <!-- Add this script tag -->
        <script type="module" src="/aws-s3.min.js"></script>
    </body>
</html>

With that, you should be able to call the aws-sdk functions with the windows object.

Before

const S3 = new AWS.S3()

After

const S3 = window.getS3Object();

it works!!!

@xsky-ken
Copy link

xsky-ken commented May 9, 2022

I'am still getting the same error as @bennypowers and @jordanranz reported. BTW I'm using "vite": "^2.7.10", with "aws-sdk": "^2.1048.0" on Vue 2.

Builds with webpack still run fine but vite throws me the same error on the browser:

Uncaught TypeError: Cannot read property 'memoizedProperty' of undefined

Is there at least a workaround for this issue?

can use CDN import AWS not error

@airjp73
Copy link

airjp73 commented May 23, 2022

I was able to get aws-sdk v2 working with rollup using @rollup/commonjs v22 and setting the new strictRequires option to true.

https://github.com/rollup/plugins/tree/master/packages/commonjs#strictrequires

@t-lock
Copy link

t-lock commented May 27, 2022

import AWS from 'aws-sdk' seems to be working for me. Is this the case for anybody else?

No, not with aws-sdk v2.1143 + Vite 2.9.9.

@airjp73
Copy link

airjp73 commented May 27, 2022

I was able to get aws-sdk v2 working with rollup using @rollup/commonjs v22 and setting the new strictRequires option to true.

https://github.com/rollup/plugins/tree/master/packages/commonjs#strictrequires

With vite, you can do the same solution using strictRequires, but since vite is on v21 of @rollup/commonjs, it requires a slightly hackier approach. This plugin removes the commonjs plugin that vite provides by default and replaces it with v22.

export const updateCommonjsPlugin = (): Plugin => {
  const commonJs22 = commonjs({
    include: [/node_modules/],
    extensions: [".js", ".cjs"],
    strictRequires: true,
  });

  return {
    name: "new-common-js",
    options(rawOptions) {
      const plugins = Array.isArray(rawOptions.plugins)
        ? [...rawOptions.plugins]
        : rawOptions.plugins
        ? [rawOptions.plugins]
        : [];

      const index = plugins.findIndex(
        (plugin) => plugin && plugin.name === "commonjs"
      );
      if (index !== -1) {
        plugins.splice(index, 1, commonJs22);
      }

      const nextConfig = { ...rawOptions, plugins };
      return commonJs22.options.call(this, nextConfig);
    },
  };
};

Then in your vite config you can do

plugins: [updateCommonjsPlugin()],

I think vite is planning on upgrading @rollup/commonjs to v22 in vite 3 (reference) at which point this workaround will become unnecessary.

@t-lock
Copy link

t-lock commented May 27, 2022

`With vite, you can do the same solution using strictRequires, but since vite is on v21 of @rollup/commonjs, it requires a slightly hackier approach. This plugin removes the commonjs plugin that vite provides by default and replaces it with v22.

@airjp73 this method got rid of the Cannot read property 'memoizedProperty' of undefined error for me, but now my Svelte bundle doesn't get called in index.html, resulting in a blank page.

Are you importing aws as es module or using commonjs require?

@airjp73
Copy link

airjp73 commented May 27, 2022

In my case, I'm not using the html output from vite so that could be why I'm not running into that issue.

@MichaelSzer
Copy link

I was able to get aws-sdk v2 working with rollup using @rollup/commonjs v22 and setting the new strictRequires option to true.
https://github.com/rollup/plugins/tree/master/packages/commonjs#strictrequires

With vite, you can do the same solution using strictRequires, but since vite is on v21 of @rollup/commonjs, it requires a slightly hackier approach. This plugin removes the commonjs plugin that vite provides by default and replaces it with v22.

export const updateCommonjsPlugin = (): Plugin => {
  const commonJs22 = commonjs({
    include: [/node_modules/],
    extensions: [".js", ".cjs"],
    strictRequires: true,
  });

  return {
    name: "new-common-js",
    options(rawOptions) {
      const plugins = Array.isArray(rawOptions.plugins)
        ? [...rawOptions.plugins]
        : rawOptions.plugins
        ? [rawOptions.plugins]
        : [];

      const index = plugins.findIndex(
        (plugin) => plugin && plugin.name === "commonjs"
      );
      if (index !== -1) {
        plugins.splice(index, 1, commonJs22);
      }

      const nextConfig = { ...rawOptions, plugins };
      return commonJs22.options.call(this, nextConfig);
    },
  };
};

Then in your vite config you can do

plugins: [updateCommonjsPlugin()],

I think vite is planning on upgrading @rollup/commonjs to v22 in vite 3 (reference) at which point this workaround will become unnecessary.

Worked!

@stavalfi
Copy link

stavalfi commented Jul 7, 2022

I solved it by adding:

  resolve: {
    alias: {
      'aws-sdk': 'aws-sdk/dist/aws-sdk.min.js',
    },
  },

@kilinkis
Copy link

Still getting ERROR Uncaught Exception {"errorType":"TypeError","errorMessage":"Cannot read property 'memoizedProperty' of undefined","stack":["TypeError: Cannot read property 'memoizedProperty' of undefined"," at Object.<anonymous> in 2023

@paul-vd
Copy link

paul-vd commented Mar 10, 2023

I solved it by adding:

  resolve: {
    alias: {
      'aws-sdk': 'aws-sdk/dist/aws-sdk.min.js',
    },
  },

Thanks this worked, I have other packages that use it though, like amplify, I ended up with this issue

[vite:load-fallback] Could not load aws-sdk/dist/aws-sdk.min.js/clients/mobileanalytics (imported by node_modules/.pnpm/@aws-amplify+analytics@1.4.3/node_modules/@aws-amplify/analytics/lib-esm/Providers/AWSPinpointProvider.js): ENOENT: no such file or directory, open 'aws-sdk/dist/aws-sdk.min.js/clients/mobileanalytics'

But solved it by adding a more strict regex

    resolve: {
      alias: [
        {
          find: /^aws-sdk$/,
          replacement: "aws-sdk/dist/aws-sdk.min.js",
        },
      ],
    },

@qbob1
Copy link

qbob1 commented May 20, 2023

I was able to circumvent runtime errors using AWS sdk v2 by utilizing an import map in index.html and exporting window.AWS in a shim module.
index.html

<script src="https://sdk.amazonaws.com/js/aws-sdk-SDK_VERSION_NUMBER.min.js"></script>
<script type="importmap">
  {
    "imports": {
      "aws-sdk": "/aws-sdk.js"
    }
  }
</script>

aws-sdk.js

export default window.AWS

You will also need to mark aws-sdk as external in build options

@kellertk
Copy link
Contributor

Hello. There are some workarounds available in the text of this issue. Please take a look at those workarounds, or migrate to AWS SDK for JS v3.

@kellertk kellertk closed this as not planned Won't fix, can't repro, duplicate, stale Apr 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature-request A feature should be added or improved.
Projects
None yet
Development

No branches or pull requests