Error: Failed to load plugin '@typescript-eslint' declared in '--config » plugin:@wordpress/recommended': Cannot find module 'typescript'

[ocean90]

Description

Using @wordpress/[email protected] and wp-scripts lint-js is currently failing to lint JavaScript files because typescript is missing as a dependency.

Step-by-step reproduction instructions

1. Create package.json

{
  "name": "ts",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "private",
  "devDependencies": {
    "@wordpress/scripts": "^14.0.0"
  }
}

2. Create index.js
3. Run npx wp-scripts lint-js index.js

Expected behaviour

File is linted without errors.

Actual behaviour

npx wp-scripts lint-js index.js

Oops! Something went wrong! :(

ESLint: 7.22.0

Error: Failed to load plugin '@typescript-eslint' declared in '--config » plugin:@wordpress/recommended': Cannot find module 'typescript'
Require stack:
- /private/tmp/ts/node_modules/tsutils/typeguard/2.8/node.js
- /private/tmp/ts/node_modules/tsutils/typeguard/2.9/node.js
- /private/tmp/ts/node_modules/tsutils/typeguard/3.0/node.js
- /private/tmp/ts/node_modules/tsutils/typeguard/3.2/node.js
- /private/tmp/ts/node_modules/tsutils/typeguard/node.js
- /private/tmp/ts/node_modules/tsutils/typeguard/index.js
- /private/tmp/ts/node_modules/tsutils/index.js
- /private/tmp/ts/node_modules/@typescript-eslint/eslint-plugin/dist/util/isTypeReadonly.js
- /private/tmp/ts/node_modules/@typescript-eslint/eslint-plugin/dist/util/index.js
- /private/tmp/ts/node_modules/@typescript-eslint/eslint-plugin/dist/rules/adjacent-overload-signatures.js
- /private/tmp/ts/node_modules/@typescript-eslint/eslint-plugin/dist/rules/index.js
- /private/tmp/ts/node_modules/@typescript-eslint/eslint-plugin/dist/index.js
- /private/tmp/ts/node_modules/@eslint/eslintrc/lib/config-array-factory.js
- /private/tmp/ts/node_modules/@eslint/eslintrc/lib/index.js
- /private/tmp/ts/node_modules/eslint/lib/cli-engine/cli-engine.js
- /private/tmp/ts/node_modules/eslint/lib/eslint/eslint.js
- /private/tmp/ts/node_modules/eslint/lib/eslint/index.js
- /private/tmp/ts/node_modules/eslint/lib/cli.js
- /private/tmp/ts/node_modules/eslint/bin/eslint.js
Referenced from: /private/tmp/ts/node_modules/@wordpress/eslint-plugin/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (/private/tmp/ts/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/private/tmp/ts/node_modules/tsutils/typeguard/2.8/node.js:7:12)
    at Module._compile (/private/tmp/ts/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)

I'm using node v14.15.4 with npm 6.14.11.

Probably introduced by #27143.

[gziolo]

@sirreal or @sarayourfriend, can you investigate how can fix it?

[ocean90]

After running npm i -D typescript wp-scripts lint-js is working again.

I think the Create Block workflow didn't catch because Gutenberg itself has typescript added here.

[sarayourfriend]

It looks like this is due to an unresolved peer dependency on TypeScript by @typescript-eslint/eslint-plugin. I think there is also an inaccuracy in their package.json that says that the TS dependency is optional: https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/package.json#L70

In any case I think we just need to add TypeScript as a dependency of @wordpress/eslint-plugin to fix this, but I'm not sure how to test it. Test instructions in the PR

[gziolo]

Hotfix published to npm:

Successfully published:
 - @wordpress/[email protected]
 - @wordpress/[email protected]
 - @wordpress/[email protected]
lerna success published 3 packages

I was able to finish without errors:

npx @wordpress/create-block

TypeScript wasn't installed when using npm v6. JS linter works correctly.