Nuxt + typescript + Storybook で"Error must install typescript"エラーの対処法

5 min read

yarn dev でローカルで nuxt を起動しようとすると、以下のようなエラーが発生した。

ERROR When you use this plugin you must install typescript. 20:17:38

at ForkTsCheckerWebpackPlugin.validateTypeScript (node_modules/fork-ts-checker-webpack-plugin/lib/index.js:124:19)
at new ForkTsCheckerWebpackPlugin (node_modules/fork-ts-checker-webpack-plugin/lib/index.js:80:23)
at WebpackBundler.<anonymous> (node_modules/@nuxt/typescript-build/dist/index.js:41:27)
at WebpackClientConfig.extendConfig (node_modules/@nuxt/webpack/dist/webpack.js:1509:37)
at WebpackClientConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:1544:50)
at WebpackClientConfig.config (node_modules/@nuxt/webpack/dist/webpack.js:1708:26)
at WebpackBundler.getWebpackConfig (node_modules/@nuxt/webpack/dist/webpack.js:2016:19)
at WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2023:12)
at Builder.build (node_modules/@nuxt/builder/dist/builder.js:327:30)
at async Object.\_buildDev (node_modules/@nuxt/cli/dist/cli-dev.js:107:5)
at async Object.startDev (node_modules/@nuxt/cli/dist/cli-dev.js:65:7)
at async Object.run (node_modules/@nuxt/cli/dist/cli-dev.js:52:5)
at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:413:7)

環境

$ node -v
v14.16.1
package.json
{
  "name": "study-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "test": "jest",
    "storybook": "npx nuxt storybook",
    "storybook:build": "npx nuxt storybook build -o docs/storybook"
  },
  "dependencies": {
    "@braid/vue-formulate": "^2.5.2",
    "@nuxtjs/axios": "^5.13.1",
    "@vue/composition-api": "^1.0.0-rc.10",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxt/typescript-runtime": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/tailwindcss": "^4.0.1",
    "@storybook/vue": "^6.2.9",
    "@types/jest": "^26.0.23",
    "@vue/test-utils": "^1.1.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
    "babel-preset-vue": "^2.0.2",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.7.0",
    "jest": "^26.6.3",
    "postcss": "^8.2.8",
    "prettier": "^2.2.1",
    "ts-jest": "^26.5.6",
    "vue-jest": "^3.0.4",
    "vue-loader": "^15.9.7",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.7.0"
  }
}

解決策

以下を packege.json に追記する。

Nuxt + typescript + Storybook = Error must install typescript

  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "**/fork-ts-checker-webpack-plugin",
      "**/fork-ts-checker-webpack-plugin/**"
    ]
  }

diff は以下。

packege.json
{
  "name": "study-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "test": "jest",
    "storybook": "npx nuxt storybook",
    "storybook:build": "npx nuxt storybook build -o docs/storybook"
  },
  "dependencies": {
    "@braid/vue-formulate": "^2.5.2",
    "@nuxtjs/axios": "^5.13.1",
    "@vue/composition-api": "^1.0.0-rc.10",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxt/typescript-runtime": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/tailwindcss": "^4.0.1",
    "@storybook/vue": "^6.2.9",
    "@types/jest": "^26.0.23",
    "@vue/test-utils": "^1.1.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
    "babel-preset-vue": "^2.0.2",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.7.0",
    "jest": "^26.6.3",
    "postcss": "^8.2.8",
    "prettier": "^2.2.1",
    "ts-jest": "^26.5.6",
    "vue-jest": "^3.0.4",
    "vue-loader": "^15.9.7",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.7.0"
  },
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ],
+    "nohoist": [
+      "**/fork-ts-checker-webpack-plugin",
+      "**/fork-ts-checker-webpack-plugin/**"
+    ]
+  }
}

Discussion

ログインするとコメントできます