Svelte Cognito RollupJs error: 'Sha256' is not exported by node_modules/@aws-crypto/sha256-js/build/index.js

Question

I'm stuck getting an error when trying to get a Svelte app to use the AWS Cognito hosted UI. Not sure if this is the right way to be going about this, but here's what I have:

npm run dev error:

(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/aws-amplify/lib-esm/withSSRContext.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
node_modules/@aws-amplify/storage/lib-esm/index.js
11:  * and limitations under the License.
12:  */
13: var __assign = (this && this.__assign) || function () {
                    ^
14:     __assign = Object.assign || function(t) {
15:         for (var s, i = 1, n = arguments.length; i < n; i++) {
...and 1 other occurrence
node_modules/@aws-amplify/core/lib-esm/Amplify.js
1: var __read = (this && this.__read) || function (o, n) {
                 ^
2:     var m = typeof Symbol === "function" && o[Symbol.iterator];
3:     if (!m) return o;
...and 1 other occurrence

...and 67 other files
(!) Plugin node-resolve: preferring built-in module 'url' over local alternative at '/Users/gregn/Projects/Software/vte/src/frontend-svelte/node_modules/url/url.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/Users/gregn/Projects/Software/vte/src/frontend-svelte/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
(!) Plugin node-resolve: preferring built-in module 'buffer' over local alternative at '/Users/gregn/Projects/Software/vte/src/frontend-svelte/node_modules/buffer/index.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
url (imported by node_modules/@aws-amplify/auth/lib-esm/Auth.js, node_modules/@aws-amplify/core/lib-esm/Signer.js, node_modules/@aws-amplify/auth/lib-esm/OAuth/OAuth.js, node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js, node_modules/@aws-amplify/api-rest/lib-esm/RestClient.js, node_modules/@aws-sdk/url-parser-node/dist/es/index.js)
events (imported by node_modules/@aws-amplify/storage/lib-esm/providers/AWSS3Provider.js, node_modules/@aws-amplify/storage/lib-esm/providers/AWSS3ProviderManagedUpload.js)
buffer (imported by node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js, node_modules/amazon-cognito-identity-js/es/AuthenticationHelper.js, node_modules/amazon-cognito-identity-js/es/CognitoUser.js, node_modules/@aws-amplify/datastore/lib-esm/util.js, node_modules/amazon-cognito-identity-js/es/CognitoJwtToken.js, node_modules/@aws-sdk/util-buffer-from/dist/es/index.js)
(!) Circular dependencies
node_modules/@aws-amplify/core/lib-esm/index.js -> node_modules/@aws-amplify/core/lib-esm/Signer.js -> node_modules/@aws-amplify/core/lib-esm/Util/index.js -> node_modules/@aws-amplify/core/lib-esm/Util/Reachability.js -> node_modules/@aws-amplify/core/lib-esm/index.js
node_modules/@aws-amplify/pubsub/lib-esm/index.js -> node_modules/@aws-amplify/pubsub/lib-esm/PubSub.js -> node_modules/@aws-amplify/pubsub/lib-esm/Providers/index.js -> node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js -> node_modules/@aws-amplify/pubsub/lib-esm/index.js
node_modules/@aws-amplify/datastore/lib-esm/util.js -> node_modules/@aws-amplify/datastore/lib-esm/types.js -> node_modules/@aws-amplify/datastore/lib-esm/util.js
node_modules/aws-amplify/lib-esm/index.js -> node_modules/aws-amplify/lib-esm/withSSRContext.js -> node_modules/aws-amplify/lib-esm/index.js
[!] Error: 'Sha256' is not exported by node_modules/@aws-crypto/sha256-js/build/index.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/@aws-amplify/core/lib-esm/Signer.js (36:9)
34: };
35: import { ConsoleLogger as Logger } from './Logger';
36: import { Sha256 as jsSha256 } from '@aws-crypto/sha256-js';
             ^
37: import { toHex } from '@aws-sdk/util-hex-encoding';
38: import { parse, format } from 'url';
Error: 'Sha256' is not exported by node_modules/@aws-crypto/sha256-js/build/index.js
    at error (/Users/gregn/Projects/Software/vte/src/frontend-svelte/node_modules/rollup/dist/rollup.js:5340:30)
    at Module.error (/Users/gregn/Projects/Software/vte/src/frontend-svelte/node_modules/rollup/dist/rollup.js:9730:9)
    at handleMissingExport (/Users/gregn/Projects/Software/vte/src/frontend-svelte/node_modules/rollup/dist/rollup.js:9644:21)
    at Module.traceVariable (/Users/gregn/Projects/Software/vte/src/frontend-svelte/node_modules/rollup/dist/rollup.js:10069:17)
    at ModuleScope.findVariable (/Users/gregn/Projects/Software/vte/src/frontend-svelte/node_modules/rollup/dist/rollup.js:8689:39)
    at FunctionScope.findVariable (/Users/gregn/Projects/Software/vte/src/frontend-svelte/node_modules/rollup/dist/rollup.js:3025:38)
    at ChildScope.findVariable (/Users/gregn/Projects/Software/vte/src/frontend-svelte/node_modules/rollup/dist/rollup.js:3025:38)
    at Identifier$1.bind (/Users/gregn/Projects/Software/vte/src/frontend-svelte/node_modules/rollup/dist/rollup.js:4363:40)
    at NewExpression.bind (/Users/gregn/Projects/Software/vte/src/frontend-svelte/node_modules/rollup/dist/rollup.js:3112:23)
    at NewExpression.bind (/Users/gregn/Projects/Software/vte/src/frontend-svelte/node_modules/rollup/dist/rollup.js:7952:15)

App.svelte:

  import Amplify, {Auth, Hub, API} from 'aws-amplify'
  import awsconfig from './.aws-config/awsconfig.json'
  import awsauth from './.aws-config/awsauth.json'
<snip>

./aws-config/awsauth.json:

{
  "domain": "auth.example.com",
  "scope": [
    "phone",
    "email",
    "profile",
    "openid",
    "aws.cognito.signin.user.admin"
  ],
  "redirectSignIn":  "https://dev.example.com/",
  "redirectSignOut": "https://dev.example.com/",
  "responseType": "token"
}

./.aws-config/awsconfig.json:

{
  "Auth": {
<snip>
  },
  "API": {
<snip>
  }
}

I've added json to rollup.config.js:

import json from '@rollup/plugin-json'
import svelte from 'rollup-plugin-svelte'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import livereload from 'rollup-plugin-livereload'
import { terser } from 'rollup-plugin-terser'

const production = !process.env.ROLLUP_WATCH

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/build/bundle.js'
  },
  plugins: [
    json(),
<snip>

thank you!

Answer 1

Solved by restarting from the new Svelte v3.0.0 template, upgrading other npm dependencies, adding @rollup/plugin-json and setting resolve.preferBuiltins to false .

rollup.config.js

resolve({
    browser: true,
    dedupe: ['svelte'],
    preferBuiltins: false
}),