Integrating AWS Amplify Auth with Snowpack via React

[pujitm]

Has anyone had any luck getting the React AWS Amplify UI Library (specifically the Auth components) working with Snowpack?

I'm getting errors related to dynamic/lazy module loading (I think).

For the record, I read #718 and a few other rollup + amplify guides (like this one), but no prior solution seemed to work.

Quick reproduction is

npx create-snowpack-app aws-amplify-snowpack --template @snowpack/app-template-react-typescript --use-yarn
yarn add aws-amplify @aws-amplify/ui-react
yarn start --polyfill-node --verbose # after changing App.tsx as shown below

// src/App.tsx
import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import { AmplifyAuthenticator } from '@aws-amplify/ui-react';

interface AppProps {}

function App({}: AppProps) {
  // Create the count state.
  const [count, setCount] = useState(0);
  // Create the counter (+1 every second).
  useEffect(() => {
    const timer = setTimeout(() => setCount(count + 1), 1000);
    return () => clearTimeout(timer);
  }, [count, setCount]);
  // Return the App component.
  return (
    <AmplifyAuthenticator>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <p>
            Page has been open for <code>{count}</code> seconds.
          </p>
          <p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </p>
        </header>
      </div>
    </AmplifyAuthenticator>
  );
}

export default App;

Expected error:

Dependency Load Error
ENOENT: no such file or directory, open '/Users/pujitm/new-dir/node_modules/.cache/snowpack/development/@aws-amplify/amplify-authenticator.entry.js'

Source: /web_modules/@aws-amplify/amplify-authenticator.entry.js

# Abbreviated stack log from browser console

hmr-client.js:200 [ESM-HMR] /web_modules/@aws-amplify/amplify-authenticator.entry.js
 Dependency Load Error
ENOENT: no such file or directory, open '/Users/pujitm/new-dir/node_modules/.cache/snowpack/development/@aws-amplify/amplify-authenticator.entry.js'

ui-react.js:1902 GET http://localhost:8080/web_modules/@aws-amplify/amplify-authenticator.entry.js net::ERR_ABORTED 500 (Internal Server Error)

ui-react.js:1888 TypeError: Failed to fetch dynamically imported module: http://localhost:8080/web_modules/@aws-amplify/amplify-authenticator.entry.js

ui-react.js:1606 Uncaught (in promise) TypeError: Cannot read property 'isProxied' of undefined
    at ui-react.js:1606
    at step (ui-react.js:271)
    at Object.next (ui-react.js:252)
    at fulfilled (ui-react.js:243)

For the last part of the stack there, I checked the build output, and this part of the output led me to believe that it was rooted in a lazy loading error (the line where the error occurred seems to be checking whether the lazily loaded module is proxied):

// L1775 in my build output
lazyBundles.map(function (lazyBundle) { return lazyBundle[1].map(function (compactMeta) {
        var cmpMeta = {
            $flags$: compactMeta[0],
            $tagName$: compactMeta[1],
            $members$: compactMeta[2],
            $listeners$: compactMeta[3],
        };

Does this error pattern seem familiar to anyone?

---

Other attempted fixes

I tried the webpack plugin without any additional config, but I didn't observe anything different.

I also set the experimental source to skypack:

Error:

Uncaught SyntaxError: Unexpected identifier
http://localhost:8080/web_modules/-/@aws-amplify/[email protected]/esm/polyfills/index.js [:1:18]

Trying to navigate there results in a malformed URL error, btw.

---

Verbose Output

Local Modules as source

[snowpack] run command: dev
[snowpack] loaded plugin: @snowpack/plugin-react-refresh
[snowpack] loaded plugin: @snowpack/plugin-dotenv
[snowpack] loaded plugin: @snowpack/plugin-typescript
[snowpack] config loaded: {
  plugins: [
    {
      name: '@snowpack/plugin-esbuild',
      resolve: [Object],
      load: [AsyncFunction: load],
      cleanup: [Function: cleanup]
    },
    {
      name: '@snowpack/plugin-react-refresh',
      transform: [Function: transform],
      markChanged: [Function (anonymous)]
    },
    {
      name: '@snowpack/plugin-dotenv',
      markChanged: [Function (anonymous)]
    },
    {
      name: '@snowpack/plugin-typescript',
      run: [AsyncFunction: run],
      markChanged: [Function (anonymous)]
    }
  ],
  alias: {},
  scripts: {},
  exclude: [
    '**/node_modules/**/*',
    '**/web_modules/**/*',
    '**/.types/**/*',
    '/Users/pujitm/new-dir/build/**/*'
  ],
  installOptions: {
    packageLookupFields: [],
    polyfillNode: true,
    rollup: { plugins: [] }
  },
  devOptions: {
    secure: false,
    hostname: 'localhost',
    port: 8080,
    open: 'default',
    output: 'dashboard',
    fallback: 'index.html',
    hmrDelay: 0,
    hmrPort: undefined,
    hmrErrorOverlay: true
  },
  buildOptions: {
    out: '/Users/pujitm/new-dir/build',
    baseUrl: '/',
    webModulesUrl: '/web_modules',
    clean: false,
    metaDir: '__snowpack__',
    minify: false,
    sourceMaps: false,
    watch: false,
    htmlFragments: false
  },
  testOptions: { files: [ '__tests__/**/*', '**/*.@(spec|test).*' ] },
  experiments: { source: 'local', routes: [], ssr: false },
  webDependencies: undefined,
  mount: {
    '/Users/pujitm/new-dir/public': { url: '/', static: true, resolve: true },
    '/Users/pujitm/new-dir/src': { url: '/dist', static: false, resolve: true }
  },
  install: [],
  proxy: [],
  knownEntrypoints: [],
  _extensionMap: { '.mjs': '.js', '.jsx': '.js', '.ts': '.js', '.tsx': '.js' }
}
[snowpack] lockfile not loaded
[snowpack] attaching console.log listeners
[snowpack] dashboard started
[snowpack] Using in-memory cache.
[snowpack] Mounting directories:
[snowpack]  -> '/Users/pujitm/new-dir/public' as URL '/'
[snowpack]  -> '/Users/pujitm/new-dir/src' as URL '/dist'
[snowpack] Using cache folder: node_modules/.cache/snowpack/development
[snowpack] Cache up-to-date. Using existing cache
[snowpack] starting @snowpack/plugin-typescript run() in watch/isDev mode
[snowpack] [304] GET /
[@snowpack/plugin-react-refresh] transform() starting… [public/index.html]
[@snowpack/plugin-react-refresh] ✔ transform() success [public/index.html]
[snowpack] [304] GET /__snowpack__/hmr-client.js
[snowpack] [304] GET /__snowpack__/hmr-error-overlay.js
[@snowpack/plugin-esbuild] load() starting… [src/index.tsx]
[snowpack] [304] GET /dist/index.js
[snowpack] [304] GET /__snowpack__/env.js
[snowpack] [304] GET /web_modules/react.js
[@snowpack/plugin-esbuild] ✔ load() success [src/index.tsx]
[@snowpack/plugin-react-refresh] transform() starting… [src/index.js]
[@snowpack/plugin-react-refresh] ✔ transform() success [src/index.js]
[snowpack] [304] GET /dist/index.css.proxy.js
[@snowpack/plugin-react-refresh] transform() starting… [src/index.css]
[@snowpack/plugin-react-refresh] ✔ transform() success [src/index.css]
[@snowpack/plugin-esbuild] load() starting… [src/App.tsx]
[snowpack] [304] GET /dist/App.js
[snowpack] [304] GET /web_modules/common/index-8337b075.js
[@snowpack/plugin-esbuild] ✔ load() success [src/App.tsx]
[@snowpack/plugin-react-refresh] transform() starting… [src/App.js]
[@snowpack/plugin-react-refresh] ✔ transform() success [src/App.js]
[snowpack] [304] GET /dist/App.css.proxy.js
[snowpack] [304] GET /dist/logo.svg.proxy.js
[@snowpack/plugin-react-refresh] transform() starting… [src/App.css]
[@snowpack/plugin-react-refresh] ✔ transform() success [src/App.css]
[@snowpack/plugin-react-refresh] transform() starting… [src/logo.svg]
[@snowpack/plugin-react-refresh] ✔ transform() success [src/logo.svg]
[snowpack] [304] GET /web_modules/react-dom.js
[snowpack] [304] GET /web_modules/@aws-amplify/ui-react.js
[snowpack] [304] GET /dist/logo.svg
[snowpack] Dependency Load Error: ENOENT: no such file or directory, open '/Users/pujitm/new-dir/node_modules/.cache/snowpack/development/@aws-amplify/amplify-authenticator.entry.js'
[snowpack] Error: ENOENT: no such file or directory, open '/Users/pujitm/new-dir/node_modules/.cache/snowpack/development/@aws-amplify/amplify-authenticator.entry.js'
[snowpack] [500] /web_modules/@aws-amplify/amplify-authenticator.entry.js
[snowpack] [500] GET /web_modules/@aws-amplify/amplify-authenticator.entry.js
[snowpack] [200] GET /favicon.ico

Skypack as source

[snowpack] run command: dev
[snowpack] loaded plugin: @snowpack/plugin-react-refresh
[snowpack] loaded plugin: @snowpack/plugin-dotenv
[snowpack] loaded plugin: @snowpack/plugin-typescript
[snowpack] config loaded: {
  plugins: [
    {
      name: '@snowpack/plugin-esbuild',
      resolve: [Object],
      load: [AsyncFunction: load],
      cleanup: [Function: cleanup]
    },
    {
      name: '@snowpack/plugin-react-refresh',
      transform: [Function: transform],
      markChanged: [Function (anonymous)]
    },
    {
      name: '@snowpack/plugin-dotenv',
      markChanged: [Function (anonymous)]
    },
    {
      name: '@snowpack/plugin-typescript',
      run: [AsyncFunction: run],
      markChanged: [Function (anonymous)]
    }
  ],
  alias: {},
  scripts: {},
  exclude: [
    '**/node_modules/**/*',
    '**/web_modules/**/*',
    '**/.types/**/*',
    '/Users/pujitm/new-dir/build/**/*'
  ],
  installOptions: {
    packageLookupFields: [],
    polyfillNode: true,
    rollup: { plugins: [] }
  },
  devOptions: {
    secure: false,
    hostname: 'localhost',
    port: 8080,
    open: 'default',
    output: 'dashboard',
    fallback: 'index.html',
    hmrDelay: 0,
    hmrPort: undefined,
    hmrErrorOverlay: true
  },
  buildOptions: {
    out: '/Users/pujitm/new-dir/build',
    baseUrl: '/',
    webModulesUrl: '/web_modules',
    clean: false,
    metaDir: '__snowpack__',
    minify: false,
    sourceMaps: false,
    watch: false,
    htmlFragments: false
  },
  testOptions: { files: [ '__tests__/**/*', '**/*.@(spec|test).*' ] },
  experiments: { source: 'skypack', routes: [], ssr: false },
  webDependencies: undefined,
  mount: {
    '/Users/pujitm/new-dir/public': { url: '/', static: true, resolve: true },
    '/Users/pujitm/new-dir/src': { url: '/dist', static: false, resolve: true }
  },
  install: [],
  proxy: [],
  knownEntrypoints: [],
  _extensionMap: { '.mjs': '.js', '.jsx': '.js', '.ts': '.js', '.tsx': '.js' }
}
[snowpack] lockfile not loaded
[snowpack] attaching console.log listeners
[snowpack] dashboard started
[snowpack] Using in-memory cache.
[snowpack] Mounting directories:
[snowpack]  -> '/Users/pujitm/new-dir/public' as URL '/'
[snowpack]  -> '/Users/pujitm/new-dir/src' as URL '/dist'
[snowpack] starting @snowpack/plugin-typescript run() in watch/isDev mode
[snowpack] [304] GET /
[@snowpack/plugin-react-refresh] transform() starting… [public/index.html]
[@snowpack/plugin-react-refresh] ✔ transform() success [public/index.html]
[snowpack] [304] GET /__snowpack__/hmr-client.js
[snowpack] [304] GET /__snowpack__/hmr-error-overlay.js
[@snowpack/plugin-esbuild] load() starting… [src/index.tsx]
[snowpack] [304] GET /dist/index.js
[@snowpack/plugin-esbuild] ✔ load() success [src/index.tsx]
[@snowpack/plugin-react-refresh] transform() starting… [src/index.js]
[@snowpack/plugin-react-refresh] ✔ transform() success [src/index.js]
[snowpack] [304] GET /__snowpack__/env.js
[source:skypack] Fetching latest react → https://cdn.skypack.dev/react
[source:skypack] Fetching latest react-dom → https://cdn.skypack.dev/react-dom
[snowpack] [304] GET /dist/index.css.proxy.js
[@snowpack/plugin-react-refresh] transform() starting… [src/index.css]
[@snowpack/plugin-react-refresh] ✔ transform() success [src/index.css]
[@snowpack/plugin-esbuild] load() starting… [src/App.tsx]
[snowpack] [304] GET /dist/App.js
[source:skypack] Fetching latest @aws-amplify/ui-react → https://cdn.skypack.dev/@aws-amplify/ui-react
[@snowpack/plugin-esbuild] ✔ load() success [src/App.tsx]
[@snowpack/plugin-react-refresh] transform() starting… [src/App.js]
[@snowpack/plugin-react-refresh] ✔ transform() success [src/App.js]
[snowpack] [304] GET /dist/App.css.proxy.js
[snowpack] [304] GET /dist/logo.svg.proxy.js
[@snowpack/plugin-react-refresh] transform() starting… [src/App.css]
[@snowpack/plugin-react-refresh] ✔ transform() success [src/App.css]
[@snowpack/plugin-react-refresh] transform() starting… [src/logo.svg]
[@snowpack/plugin-react-refresh] ✔ transform() success [src/logo.svg]
[snowpack] [304] GET /web_modules/react
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/react.js
[snowpack] [304] GET /web_modules/react-dom
[snowpack] [304] GET /web_modules/@aws-amplify/ui-react
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/object-assign.js
[snowpack] [304] GET /web_modules/-/@aws-amplify/[email protected]/dist=es2020/@aws-amplify/ui-react.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/react-dom.js
[snowpack] [304] GET /web_modules/-/@aws-amplify/[email protected]/dist=es2020,mode=raw/loader
[snowpack] [304] GET /web_modules/-/@aws-amplify/[email protected]/dist=es2020/@aws-amplify/auth.js
[snowpack] [304] GET /web_modules/-/@aws-amplify/[email protected]/dist=es2020/@aws-amplify/core.js
[snowpack] [304] GET /web_modules/-/@aws-amplify/[email protected]/dist=es2020/@aws-amplify/ui-components.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/scheduler.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020,mode=raw/sha256
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/amazon-cognito-identity-js.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020,mode=raw/enc-base64
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/util-hex-encoding.js
[snowpack] [304] GET /web_modules/-/@aws-crypto/[email protected]/dist=es2020/@aws-crypto/sha256-js.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/url.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/zen-observable-ts.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/credential-provider-cognito-identity@v1.0.0-rc.4-IP5GJ9j6uJ1ilibGZOLZ/dist=es2020/@aws-sdk/credential-provider-cognito-identity.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/client-cognito-identity.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/universal-cookie.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/buffer.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020,mode=raw/core
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020,mode=raw/hmac-sha256
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/tslib.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/js-cookie.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/punycode.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/querystring.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/util-utf8-browser.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/property-provider.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/zen-observable.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/tslib.js
[snowpack] [304] GET /web_modules/-/@aws-amplify/[email protected]/esm-es5/loader.mjs
[snowpack] [304] GET /web_modules/-/@aws-crypto/[email protected]/dist=es2020/@aws-crypto/sha256-browser.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/fetch-http-handler.js
[snowpack] [304] GET /web_modules/-/@aws-amplify/[email protected]/esm/polyfills/index.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/invalid-dependency.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/middleware-retry.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/url-parser-browser.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/util-body-length-browser.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/util-base64-browser.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/util-user-agent-browser.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/util-utf8-browser.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/config-resolver.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/middleware-content-length.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/middleware-host-header.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/middleware-logger.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/middleware-signing.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/smithy-client.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/middleware-user-agent.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/protocol-http.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/middleware-serde.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/cookie.js
[snowpack] [304] GET /web_modules/error/node:punycode?from=node:punycode
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/base64-js.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/ieee754.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/isarray.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020,mode=raw/hmac
[snowpack] [304] GET /web_modules/-/@aws-crypto/[email protected]/dist=es2020/@aws-crypto/sha256-js.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/util-locate-window.js
[snowpack] [304] GET /web_modules/-/@aws-crypto/[email protected]/dist=es2020/@aws-crypto/supports-web-crypto.js
[snowpack] [304] GET /web_modules/-/@aws-crypto/[email protected]/dist=es2020/@aws-crypto/ie11-detection.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/querystring-builder.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/service-error-classification.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/querystring-parser.js
[snowpack] [304] GET /web_modules/-/[email protected]/dist=es2020/uuid.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/middleware-stack.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/signature-v4.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/util-uri-escape.js
[snowpack] [304] GET /web_modules/-/@aws-sdk/[email protected]/dist=es2020/@aws-sdk/is-array-buffer.js
[snowpack] [200] GET /favicon.ico

[Townsheriff]

Having the same issue.

[melissamcewen]

Hi @Townsheriff if you could file a bug that would help us get the info needed to replicate and debug.