Solid js on AWS Amplify, fixing the build error

~ 2 min read

aws aws amplify development errors javascript solidjs

Solid JS and amplify play well together locally in dev, but when you go to deploy to AWS Amplify you’ll get frontend build errors as Vite and the AWS SDK don’t play well together. The error will look something like this.

2022-07-08T16:39:25.446Z [INFO]: vite v2.9.14 building for production...
2022-07-08T16:39:25.494Z [INFO]: transforming...
2022-07-08T16:39:32.843Z [INFO]: ✓ 1926 modules transformed.
2022-07-08T16:39:32.844Z [WARNING]: 'request' is not exported by __vite-browser-external, imported by node_modules/@aws-sdk/credential-provider-node/node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js
                                    file: /codebuild/output/src645904711/src/project-name/node_modules/@aws-sdk/credential-provider-node/node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js:4:9
                                    2: import { ProviderError } from "@aws-sdk/property-provider";
                                    3: import { Buffer } from "buffer";
                                    4: import { request } from "http";
                                    ^
                                    5: /**
                                    6:  * @internal
2022-07-08T16:39:32.845Z [WARNING]: error during build:
                                    Error: 'request' is not exported by __vite-browser-external, imported by node_modules/@aws-sdk/credential-provider-node/node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js
                                    at error (/codebuild/output/src645904711/src/project-name/node_modules/rollup/dist/shared/rollup.js:198:30)
                                    at Module.error (/codebuild/output/src645904711/src/project-name/node_modules/rollup/dist/shared/rollup.js:12555:16)
                                    at Module.traceVariable (/codebuild/output/src645904711/src/project-name/node_modules/rollup/dist/shared/rollup.js:12914:29)
                                    at ModuleScope.findVariable (/codebuild/output/src645904711/src/project-name/node_modules/rollup/dist/shared/rollup.js:11566:39)
                                    at FunctionScope.findVariable (/codebuild/output/src645904711/src/project-name/node_modules/rollup/dist/shared/rollup.js:6486:38)
                                    at ChildScope.findVariable (/codebuild/output/src645904711/src/project-name/node_modules/rollup/dist/shared/rollup.js:6486:38)
                                    at FunctionScope.findVariable (/codebuild/output/src645904711/src/project-name/node_modules/rollup/dist/shared/rollup.js:6486:38)
                                    at ChildScope.findVariable (/codebuild/output/src645904711/src/project-name/node_modules/rollup/dist/shared/rollup.js:6486:38)
                                    at Identifier.bind (/codebuild/output/src645904711/src/project-name/node_modules/rollup/dist/shared/rollup.js:7553:40)
                                    at CallExpression.bind (/codebuild/output/src645904711/src/project-name/node_modules/rollup/dist/shared/rollup.js:5383:23)
2022-07-08T16:39:32.884Z [WARNING]: error Command failed with exit code 1.

Luckily there’s an easy fix. First, define global in index.html inside the head tag.

<head>
    <title>...</title>
...
<script>
      let global = global || window; // To fix aws-sdk and Vite failing to build on AWS Amplify
</script>
</head>

And then apply the resolve workaround to your Vite config (vite.config.ts) which explicitly tells Vite, which uses rollup, to alias the runtimeConfig to the runtimeConfig.browser file.

export default defineConfig({
  plugins: [solidPlugin()],
  build: {
    target: 'esnext',
    polyfillDynamicImport: false,
  },
  resolve: { // To fix aws-sdk and Vite failing to build on AWS Amplify
      alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser',
      },
    ]
  },
});

You should now be able to deploy successfully on AWS Amplify.

all posts →