search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.4k stars 2.11k forks source link

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

Closed bcbweb closed 5 months ago

bcbweb commented 1 year ago

Before opening, please confirm:

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 12 months ago

Hi, any progress on this issue?

cwomack commented 12 months ago

@emendoza2, are you experiencing the same errors related to "os", "fs", "crypto", and "process" when serving? Can you share your package.json as well for comparison?

@bcbweb, I've built a minimal Amplify + Rollup.js app that so far hasn't seen any build issues. Will be adding in your dependencies to see where it starts to break.

zeth commented 8 months ago

I ran into the same exact problem as the original poster, I wrote a webapp with Lit, the starter kit comes by default with Rollup, then I spent time setting up the backend in AWS amplify, then hit this brick wall. It would be better if AWS Amplify said at the start that it has a hard dependency on webpack and not any other build tools like rollup, then I wouldn't have written code with an incompatible setup.

david-mcafee commented 7 months ago

Just unassigned this from me so that this can be picked up for reproduction (cc @cwomack)

zeth commented 7 months ago

If anyone is reading this, my workaround was just to bite the bullet, surrender and convert my app to use webpack instead of rollup. Again, would have been nice to be told in the beginning that we need to use webpack.

nadetastic commented 7 months ago

With the release of the latest major version of Amplify (aws-amplify@>6), this issue should now be resolved! Please refer to our release announcement, migration guide, and documentation for more information. Please let me know if you still encounter issues with version 6.x.x of aws-amplify

nadetastic commented 5 months ago

I'm going to mark this issue as resolved, if anyone following this issue is still having problems please let me know.