While developing a WordPress plugin for a custom Gutenberg block, I encountered a challenge. I needed to incorporate additional scripts in TypeScript and opted to use "$ tsc --watch" along with a "tsconfig.json" file for compilation.
Upon installing @wordpress/scripts ("$ npm i --save-dev --save-exact @wordpress/scripts"), there were 89 errors reported by tsc at the path: node_modules@types\webpack\index.d.ts.
Further investigation revealed that the root cause of these errors stemmed from the initial line of the import statement:
import {
Tapable,
HookMap,
SyncBailHook,
SyncHook,
SyncLoopHook,
SyncWaterfallHook,
AsyncParallelBailHook,
AsyncParallelHook,
AsyncSeriesBailHook,
AsyncSeriesHook,
AsyncSeriesWaterfallHook,
} from 'tapable';
Despite the errors, tsc continued to function for my files. However, the occurrence of 89 errors during each compilation process raised concerns.
Below is the content of my tsconfig.json:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"allowUnreachableCode": false,
"declaration": false,
"resolveJsonModule": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2017"
],
"moduleResolution": "node",
"module": "esnext",
"target": "es2017",
"outDir": "script/build",
"noUnusedLocals": true,
"noUnusedParameters": true,
"jsx": "react",
"jsxFactory": "h"
},
"include": [
"script/src"
],
"exclude": [
"node_modules"
]
}