🐙

StorybookをAmplifyにデプロイするときに出たエラーの解消方法メモ

2023/08/21に公開

Storybookの公式ドキュメントに基づいて,storybook-staticをAmplifyにデプロイしようとしたら,frontendのビルド時に以下のエラーが発生した。

const stringWidth = require('string-width');
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /codebuild/output/src3903572689/src/amatelas/node_modules/string-width/index.js from /codebuild/output/src3903572689/src/amatelas/node_modules/cli-table3/src/utils.js not supported.
Instead change the require of index.js in /codebuild/output/src3903572689/src/amatelas/node_modules/cli-table3/src/utils.js to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (/codebuild/output/src3903572689/src/amatelas/node_modules/cli-table3/src/utils.js:1:21)
at Object.<anonymous> (/codebuild/output/src3903572689/src/amatelas/node_modules/cli-table3/src/table.js:2:15)
at Object.<anonymous> (/codebuild/output/src3903572689/src/amatelas/node_modules/cli-table3/index.js:1:18)
at Object.<anonymous> (/codebuild/output/src3903572689/src/amatelas/node_modules/@storybook/core-server/dist/index.js:113:8471)
at Object.<anonymous> (/codebuild/output/src3903572689/src/amatelas/node_modules/@storybook/cli/dist/generate.js:11:4494)
at Object.<anonymous> (/codebuild/output/src3903572689/src/amatelas/node_modules/@storybook/cli/bin/index.js:9:1)
at Object.<anonymous> (/codebuild/output/src3903572689/src/amatelas/node_modules/storybook/index.js:3:1) {
code: 'ERR_REQUIRE_ESM'
}

build settingを次のように書いたらうまくいった。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build-storybook
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: /storybook-static
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

理由とかがわかったら追記する。

Discussion