Cannot use aws-amplify module with rollup (Lit app)

[bcbweb]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Web Components / Lit

Amplify APIs

Not applicable

Amplify Categories

Not applicable

Environment information

  System:
    OS: macOS 13.0
    CPU: (8) arm64 Apple M2
    Memory: 108.91 MB / 8.00 GB
    Shell: 5.1.16 - /opt/homebrew/bin/bash
  Binaries:
    Node: 19.4.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.0 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 110.1.48.164
    Chrome: 109.0.5414.119
    Firefox: 110.0
    Safari: 16.1
  npmPackages:
    @open-wc/building-rollup: ^2.2.1 => 2.2.1
    @rollup/plugin-replace: ^4.0.0 => 4.0.0 (3.1.0, 2.4.2)
    @rollup/plugin-typescript: ^8.5.0 => 8.5.0
    @typescript-eslint/eslint-plugin: ^5.52.0 => 5.52.0
    @typescript-eslint/parser: ^5.52.0 => 5.52.0
    @vaadin/router: ^1.7.4 => 1.7.4
    @web/dev-server: ~0.1.35 => 0.1.35
    @web/dev-server-esbuild: ~0.3.3 => 0.3.3
    @web/dev-server-rollup: ~0.3.19 => 0.3.21
    @web/rollup-plugin-copy: ~0.3.0 => 0.3.0
    autoprefixer: ^10.4.13 => 10.4.13
    aws-amplify: ^5.0.15 => 5.0.15
    deepmerge: ^4.2.2 => 4.3.0
    eslint: ^8.29.0 => 8.34.0
    eslint-config-ibmresearch: ~0.25.1 => 0.25.1
    eslint-plugin-lit: ^1.7.0 => 1.8.2
    eslint-plugin-lit-a11y: ^2.3.0 => 2.3.0
    eslint-plugin-wc: ^1.4.0 => 1.4.0
    lit: ^2.5.0 => 2.6.1
    lit-analyzer: ^1.2.1 => 1.2.1
    nano-staged: ^0.8.0 => 0.8.0
    npm-run-all: ^4.1.5 => 4.1.5
    picocolors: ^1.0.0 => 1.0.0
    postcss: ^8.4.19 => 8.4.21
    postcss-html: ^1.5.0 => 1.5.0
    postcss-lit: ~0.5.0 => 0.5.0
    prettier: ~2.8.1 => 2.8.4
    prettier-plugin-package: ^1.3.0 => 1.3.0
    pwa-helper-components: ~0.2.10 => 0.2.10
    rimraf: ^3.0.2 => 3.0.2
    rollup: ^3.17.0 => 3.17.0 (2.79.1)
    rollup-plugin-polyfill-node: ^0.12.0 => 0.12.0
    simple-git-hooks: ^2.8.1 => 2.8.1
    stylelint: ^14.16.0 => 14.16.1
    stylelint-config-ibmresearch: ~0.16.0 => 0.16.0
    tslib: ^2.4.1 => 2.5.0 (1.14.1)
    typescript: ~4.9.4 => 4.9.5 (3.9.10)
  npmGlobalPackages:
    @aws-amplify/cli: 10.7.3
    npm: 9.5.0

Describe the bug

I have a web app using Lit for Web Components and I'm trying to serve/bundle using rollup, however I'm seeing issues with referencing "os", "fs", "crypto", and "process" when serving, plus other errors when trying to build.

Expected behavior

serving using @web/dev-server-rollup should work, building using rollup should work

Reproduction steps

I'm able to serve and build without problems, until I try to use the aws-amplify package in my front end code

Code Snippet

// Front end code
import { Amplify, API } from 'aws-amplify'
import awsconfig from '../aws-exports.js'

Amplify.configure(awsconfig)


// rollup.config.js
import { createSpaConfig } from '@open-wc/building-rollup'
import replace from '@rollup/plugin-replace'
import typescript from '@rollup/plugin-typescript'
import { copy } from '@web/rollup-plugin-copy'
import merge from 'deepmerge'
import { black, blue, bgWhite } from 'picocolors'

const NODE_ENV = process.env.NODE_ENV || 'development'
const DIST_PATH = 'server/dist/'
const GENERATE_SERVICE_WORKER = false

const absoluteBaseUrl =
  NODE_ENV === 'production'
    ? 'https://pwa-lit-template.mybluemix.net'
    : 'http://localhost:8000'

const workboxConfig = {
  sourcemap: false,
  runtimeCaching: [
    {
      urlPattern: /images\/.*$/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'images',
        expiration: {
          maxEntries: 60,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
        },
      },
    },
  ],
  skipWaiting: false,
  clientsClaim: false,
}

const config = merge(
  createSpaConfig({
    outputDir: DIST_PATH,
    html: {
      absoluteBaseUrl,
      extractAssets: false,
    },
    legacyBuild: true,
    polyfillsLoader: {
      polyfills: {
        custom: [
          {
            name: 'lit-polyfill-support',
            path: 'node_modules/lit/polyfill-support.js',
            test: "!('attachShadow' in Element.prototype)",
            module: false,
          },
        ],
      },
    },
    developmentMode: process.env.ROLLUP_WATCH === 'true',
    workbox: GENERATE_SERVICE_WORKER && workboxConfig,
    injectServiceWorker: GENERATE_SERVICE_WORKER,
  }),
  {
    input: 'index.html',
    plugins: [
      typescript({
        declaration: false,
        sourceMap: false,
        inlineSources: false,
      }),
      replace({
        preventAssignment: true,
        values: {
          'process.env.NODE_ENV': JSON.stringify('production'),
        },
      }),
      ...(NODE_ENV !== 'development'
        ? [
            replace({
              preventAssignment: true,
              include: 'src/**/*.ts',
              exclude: 'src/config.*.ts',
              delimiters: ['', ''],
              values: {
                './config.js': `./config.${NODE_ENV}.js`,
              },
            }),
          ]
        : []),
      copy({
        // Copy all the static files
        patterns: ['images/**/*', 'manifest.webmanifest', 'robots.txt'],
      }),
    ],
  }
)

console.log(`${bgWhite(black(' Build information'.padEnd(60, ' ')))}

${blue('Name')}                   ${process.env.npm_package_name}
${blue('Environment')}            ${NODE_ENV}
${blue('Service Worker')}         ${GENERATE_SERVICE_WORKER}
${blue('Version')}                v${process.env.npm_package_version}`)

export default config

// web-dev-server.config.mjs
import { fileURLToPath } from 'url'

import replace from '@rollup/plugin-replace'
import { esbuildPlugin } from '@web/dev-server-esbuild'
import { fromRollup } from '@web/dev-server-rollup'

const NODE_ENV = process.env.NODE_ENV || 'development'

export default {
  appIndex: 'index.html',
  nodeResolve: {
    exportConditions: ['development'],
  },
  plugins: [
    esbuildPlugin({
      ts: true,
      tsconfig: fileURLToPath(new URL('./tsconfig.json', import.meta.url)),
    }),
    ...(NODE_ENV !== 'development'
      ? [
          fromRollup(replace)({
            preventAssignment: true,
            include: 'src/**/*.ts',
            exclude: 'src/config.*.ts',
            delimiters: ['', ''],
            values: {
              './config.js': `./config.${NODE_ENV}.js`,
            },
          }),
        ]
      : []),
  ],
}

Log output

In browser when running serve:

Error while transforming node_modules/@aws-sdk/hash-node/dist/es/index.js: Could not resolve import "crypto".

  1 | import { fromArrayBuffer, fromString } from "@aws-sdk/util-buffer-from";
  2 | import { Buffer } from "buffer";
> 3 | import { createHash, createHmac } from "crypto";
    |                                        ^
  4 | var Hash = /** @class */ (function () {
  5 |     function Hash(algorithmIdentifier, secret) {
  6 |         this.hash = secret ? createHmac(algorithmIdentifier, castSourceData(secret)) : createHash(algorithmIdentifier);

Error while transforming node_modules/@aws-sdk/util-body-length-node/dist/es/index.js: Could not resolve import "fs".

> 1 | import { lstatSync } from "fs";
    |                           ^
  2 | export function calculateBodyLength(body) {
  3 |     if (!body) {
  4 |         return 0;

Error while transforming node_modules/@aws-sdk/util-user-agent-node/dist/es/index.js: Could not resolve import "os".

  1 | import { __awaiter, __generator } from "tslib";
  2 | import { loadConfig } from "@aws-sdk/node-config-provider";
> 3 | import { platform, release } from "os";
    |                                   ^
  4 | import { env, versions } from "process";
  5 | export var UA_APP_ID_ENV_NAME = "AWS_SDK_UA_APP_ID";
  6 | export var UA_APP_ID_INI_NAME = "sdk-ua-app-id";

When running build:

node_modules/@aws-amplify/pubsub/lib-esm/vendor/paho-mqtt.js
94:     root.Paho = factory();
95:   }
96: })(this, function LibraryFactory() {
       ^
97:   var PahoMQTT = (function (global) {
98:     // Private variables below, these are only visible inside the function closure
node_modules/universal-cookie/es6/Cookies.js
1: var __assign = (this && this.__assign) || function () {
                   ^
2:     __assign = Object.assign || function(t) {
3:         for (var s, i = 1, n = arguments.length; i < n; i++) {
...and 1 other occurrence
[!] (plugin rollup-plugin-import-meta-assets) SyntaxError: Unexpected token (2:8)
node_modules/@aws-sdk/client-lex-runtime-service/package.json (2:8)
    at Parser.pp$4.raise (/Users/benjaminbrown/Sites/rcmd/node_modules/rollup/dist/shared/rollup.js:21291:13)
    at Parser.pp$9.unexpected (/Users/benjaminbrown/Sites/rcmd/node_modules/rollup/dist/shared/rollup.js:18592:8)
    at Parser.pp$9.semicolon (/Users/benjaminbrown/Sites/rcmd/node_modules/rollup/dist/shared/rollup.js:18569:66)
    at Parser.pp$8.parseExpressionStatement (/Users/benjaminbrown/Sites/rcmd/node_modules/rollup/dist/shared/rollup.js:19052:8)
    at Parser.pp$8.parseStatement (/Users/benjaminbrown/Sites/rcmd/node_modules/rollup/dist/shared/rollup.js:18785:24)
    at Parser.pp$8.parseBlock (/Users/benjaminbrown/Sites/rcmd/node_modules/rollup/dist/shared/rollup.js:19068:21)
    at Parser.pp$8.parseStatement (/Users/benjaminbrown/Sites/rcmd/node_modules/rollup/dist/shared/rollup.js:18750:36)
    at Parser.pp$8.parseTopLevel (/Users/benjaminbrown/Sites/rcmd/node_modules/rollup/dist/shared/rollup.js:18649:21)
    at Parser.parse (/Users/benjaminbrown/Sites/rcmd/node_modules/rollup/dist/shared/rollup.js:18421:15)
    at Function.parse (/Users/benjaminbrown/Sites/rcmd/node_modules/rollup/dist/shared/rollup.js:18471:35)
    at Graph.contextParse (/Users/benjaminbrown/Sites/rcmd/node_modules/rollup/dist/shared/rollup.js:24867:38)
    at Object.transform (/Users/benjaminbrown/Sites/rcmd/node_modules/@web/rollup-plugin-import-meta-assets/src/rollup-plugin-import-meta-assets.js:65:24)
    at /Users/benjaminbrown/Sites/rcmd/node_modules/rollup/dist/shared/rollup.js:24657:40


error Command failed with exit code 1.

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[cwomack]

Hello, @bcbweb 👋. This looks related to #9639 regarding the aws-amplify package giving issues with some js build tools. While that's still an open issue/feature request, there was a workaround provided in the comments here.

Not certain if creating a new resolve.alias will unblock you while this is investigated further, but it appears that it can be done within rollup.config.js via this plugin.

[david-mcafee]

To add to what @cwomack mentioned - I recently created an app using Rollup, and there were a few configuration nuances that were particular to Rollup.

@bcbweb can you please share your current list of dependencies / devDependencies, as well as your rollup.config.js? Happy to take a look and see what may be missing.

[bcbweb]

@david-mcafee Apologies for the slow reply. I will try a temporary fix with @cwomack's suggestion, meanwhile here are my dependencies rollup config:

"dependencies": {
    "@vaadin/router": "^1.7.4",
    "lit": "^2.5.0",
    "pwa-helper-components": "~0.2.10",
    "tslib": "^2.4.1"
  },
  "devDependencies": {
    "@open-wc/building-rollup": "^2.2.1",
    "@rollup/plugin-replace": "^4.0.0",
    "@rollup/plugin-typescript": "^8.5.0",
    "@typescript-eslint/eslint-plugin": "^5.52.0",
    "@typescript-eslint/parser": "^5.52.0",
    "@web/dev-server": "~0.1.35",
    "@web/dev-server-esbuild": "~0.3.3",
    "@web/dev-server-rollup": "~0.3.19",
    "@web/rollup-plugin-copy": "~0.3.0",
    "autoprefixer": "^10.4.13",
    "deepmerge": "^4.2.2",
    "eslint": "^8.29.0",
    "eslint-config-ibmresearch": "~0.25.1",
    "eslint-plugin-lit": "^1.7.0",
    "eslint-plugin-lit-a11y": "^2.3.0",
    "eslint-plugin-wc": "^1.4.0",
    "lit-analyzer": "^1.2.1",
    "nano-staged": "^0.8.0",
    "npm-run-all": "^4.1.5",
    "picocolors": "^1.0.0",
    "postcss": "^8.4.19",
    "postcss-html": "^1.5.0",
    "postcss-lit": "~0.5.0",
    "prettier": "~2.8.1",
    "prettier-plugin-package": "^1.3.0",
    "rimraf": "^3.0.2",
    "rollup": "^2.79.1",
    "simple-git-hooks": "^2.8.1",
    "stylelint": "^14.16.0",
    "stylelint-config-ibmresearch": "~0.16.0",
    "typescript": "~4.9.4"
  }

rollup.config.js

import { createSpaConfig } from '@open-wc/building-rollup';
import replace from '@rollup/plugin-replace';
import typescript from '@rollup/plugin-typescript';
import { copy } from '@web/rollup-plugin-copy';
import merge from 'deepmerge';
import { black, blue, bgWhite } from 'picocolors';

const NODE_ENV = process.env.NODE_ENV || 'development';
const DIST_PATH = 'server/dist/';
const GENERATE_SERVICE_WORKER = false;

const absoluteBaseUrl =
  NODE_ENV === 'production'
    ? 'https://pwa-lit-template.mybluemix.net'
    : 'http://localhost:8000';

const workboxConfig = {
  sourcemap: false,
  runtimeCaching: [
    {
      urlPattern: /images\/.*$/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'images',
        expiration: {
          maxEntries: 60,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
        },
      },
    },
  ],
  skipWaiting: false,
  clientsClaim: false,
};

const config = merge(
  createSpaConfig({
    outputDir: DIST_PATH,
    html: {
      absoluteBaseUrl,
      extractAssets: false,
    },
    legacyBuild: true,
    polyfillsLoader: {
      polyfills: {
        custom: [
          {
            name: 'lit-polyfill-support',
            path: 'node_modules/lit/polyfill-support.js',
            test: "!('attachShadow' in Element.prototype)",
            module: false,
          },
        ],
      },
    },
    developmentMode: process.env.ROLLUP_WATCH === 'true',
    workbox: GENERATE_SERVICE_WORKER && workboxConfig,
    injectServiceWorker: GENERATE_SERVICE_WORKER,
  }),
  {
    input: 'index.html',
    plugins: [
      typescript({
        declaration: false,
        sourceMap: false,
        inlineSources: false,
      }),
      replace({
        preventAssignment: true,
        values: {
          'process.env.NODE_ENV': JSON.stringify('production'),
        },
      }),
      ...(NODE_ENV !== 'development'
        ? [
            replace({
              preventAssignment: true,
              include: 'src/**/*.ts',
              exclude: 'src/config.*.ts',
              delimiters: ['', ''],
              values: {
                './config.js': `./config.${NODE_ENV}.js`,
              },
            }),
          ]
        : []),
      copy({
        // Copy all the static files
        patterns: ['images/**/*', 'manifest.webmanifest', 'robots.txt'],
      }),
    ],
  }
);

console.log(`${bgWhite(black(' Build information'.padEnd(60, ' ')))}

${blue('Name')}                   ${process.env.npm_package_name}
${blue('Environment')}            ${NODE_ENV}
${blue('Service Worker')}         ${GENERATE_SERVICE_WORKER}
${blue('Version')}                v${process.env.npm_package_version}`);

export default config;

[bcbweb]

@cwomack To update you, I've tried the suggestions in that thread and they don't seem to resolve the issue. Added the resolve alias using the rollup plugin but I still see the "could not resolve" errors.

[emendoza2]

Hi, any progress on this issue?