CODEWITHSUNDEEP
wordpresstypescriptnpmwebpackwordpress-gutenberg
Daniel
Daniel

Reputation: 45

Module '"tapable"' has no exported member 'Tapable'

I was working on a WordPress plugin for a custom Gutenberg block. Since I needed to add additional scripts which I wanted to write in TypeScript, I used "$ tsc --watch" and a "tsconfig.json"-file to compile them. After installing @wordpress/scripts ("$ npm i --save-dev --save-exact @wordpress/scripts"), tsc indicated 89 errors at this path: node_modules@types\webpack\index.d.ts.

I have opened this file and found that the source of all the errors was the first line of this import statement:

import {
  Tapable,
  HookMap,
  SyncBailHook,
  SyncHook,
  SyncLoopHook,
  SyncWaterfallHook,
  AsyncParallelBailHook,
  AsyncParallelHook,
  AsyncSeriesBailHook,
  AsyncSeriesHook,
  AsyncSeriesWaterfallHook,
} from 'tapable';

Tsc was still working for my files, but having 89 errors thrown each time I compile is concerning nonetheless.

This is the code 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"
  ]
}

Upvotes: 0

Views: 1869

Answers (1)

Daniel
Daniel

Reputation: 45

I found that the problem was the path of the import statement. Webpack was importing Tapable from node_modules/tapable when it would have needed to import it from node_modules/@types/tapable.

Changing the last line of the import statement fixed all errors:

} from '../tapable';

Upvotes: 1

Related Questions