TS7016: Could not find a declaration file for module 'webpack-dashboard/plugin' #324

justnewbee · 2021-03-18T06:51:59Z

Please provide a description of the bug / issue, and provide the details below:

====================================================================

If the issue is visual, please provide screenshots here

====================================================================

Steps to reproduce the problem

Setup webpack configuration using TS
Use webpack-dashboard via import DashboardPlugin from 'webpack-dashboard/plugin' and I got this error

====================================================================

Please provide a gist of relevant files

package.json (specifically the script you are using to start the dashboard)
only dev stuff, stripped anything unrelavant

{
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-proposal-decorators": "^7.13.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
    "@babel/plugin-transform-runtime": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "^7.13.0",
    "@babel/runtime-corejs3": "^7.13.10",
    "@types/mini-css-extract-plugin": "^1.2.2",
    "@types/node": "^14.14.35",
    "@types/terser-webpack-plugin": "^5.0.2",
    "@types/webpack": "^4.41.26",
    "@types/webpack-bundle-analyzer": "^3.9.1",
    "@types/webpack-dev-server": "^3.11.2",
    "autoprefixer": "^10.2.5",
    "babel-loader": "^8.2.2",
    "babel-plugin-styled-components": "^1.12.0",
    "css-loader": "^5.1.3",
    "html-webpack-plugin": "^5.3.1",
    "less": "^4.1.1",
    "less-loader": "^8.0.0",
    "mini-css-extract-plugin": "^1.3.9",
    "path-browserify": "^1.0.1",
    "postcss": "^8.2.8",
    "postcss-loader": "^5.2.0",
    "process": "^0.11.10",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.1",
    "ts-node": "^9.1.1",
    "typescript": "^4.2.3",
    "webpack": "^5.26.3",
    "webpack-bundle-analyzer": "^4.4.0",
    "webpack-cli": "^4.5.0",
    "webpack-dashboard": "^3.3.1",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  },
  "scripts": {
    "start": "webpack-dashboard -- webpack serve --config webpack/webpack.config.dev.ts --progress"
  }
}

webpack.config.dev.ts

import webpack, {
  Configuration
} from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import {
  Configuration as WebpackDevServerConfiguration
} from 'webpack-dev-server';
import {
  merge
} from 'webpack-merge';
import {
  BundleAnalyzerPlugin
} from 'webpack-bundle-analyzer';
import DashboardPlugin from 'webpack-dashboard/plugin';

====================================================================

More Details

What operating system are you on?
- Mac
What terminal application are you using?
- iTerm2
What version of webpack-dashboard are you using?
- 3.3.1
What is the output of running echo $TERM?
- xterm-256color

The text was updated successfully, but these errors were encountered:

justnewbee · 2021-03-18T06:56:13Z

another issue, after @ts-ignore 'ed the import part

ryan-roemer · 2021-06-07T20:42:26Z

Thanks for reporting! Webpack5 might have changed the type.

We'd accept a typedefs PR in https://github.com/FormidableLabs/webpack-dashboard/blob/master/index.d.ts if you have a fix.

TranquilMarmot · 2021-10-25T23:42:55Z

I'm running into this as well using Webpack 4.

I think the issue is that the .d.ts file is in the wrong spot...

Doing:

import DashboardPlugin from 'webpack-dashboard/plugin';

I think it might be looking for a file at node-modules/webpack-dashboard/plugin/index.d.ts.

The file at node-modules/webpack-dashboard/index.d.ts is not being picked up by TypeScript.

thtliife · 2022-01-20T01:26:53Z

I was getting this issue too, using webpack v5.66.0
to solve the declaration file not found error, I just imported the plugin like below:

import DashboardPlugin from 'webpack-dashboard/plugin';
import 'webpack-dashboard';

That then resulted in the following error:

[webpack-cli] Failed to load '/Users/me/repos/project-name/webpack.config.ts' config
[webpack-cli] webpack.config.ts:50:5 - error TS2322: Type 'DashboardPlugin' is not assignable to type '((this: Compiler, compiler: Compiler) => void) | WebpackPluginInstance'.
  Property 'apply' is missing in type 'DashboardPlugin' but required in type 'WebpackPluginInstance'.

50     new DashboardPlugin(),
       ~~~~~~~~~~~~~~~~~~~~~

  .yarn/__virtual__/webpack-virtual-a93fe6ae01/0/cache/webpack-npm-5.66.0-752f35c0ab-5a44664a84.zip/node_modules/webpack/types.d.ts:12229:2
    12229  apply: (compiler: Compiler) => void;
           ~~~~~
    'apply' is declared here.

I solved this by manually declaring the type in my webpack.config.ts file as below:

import { Configuration, Compiler } from 'webpack';
// ... other code here

interface Webpack5DashboardPlugin extends DashboardPlugin {
  apply: (compiler: Compiler) => void;
}

const config: Configuration = {
  // ... existing config
  plugins: [
    new DashboardPlugin() as Webpack5DashboardPlugin,
    // ... other plugins
  ],
  // ... rest of config
}

ryan-roemer · 2022-01-20T19:13:05Z

Confirmed both the (1) location issue and (2) the webpack5 changes. I'm working on a fix. (I've had other plugins need updated types for webpack5).

ryan-roemer · 2022-01-20T20:25:12Z

Hi folks! Can anyone experiencing TS errors, try out #341 and see how that goes?

If you're getting errors, can you report your version of webpack and webpack-cli? Thanks!

thtliife · 2022-01-20T21:23:38Z

Hi folks! Can anyone experiencing TS errors, try out #341 and see how that goes?

If you're getting errors, can you report your version of webpack and webpack-cli? Thanks!

Im happy to check mate :) will report back in a couple mins

thtliife · 2022-01-20T21:59:01Z

❯ yarn --version
3.1.1

❯ yarn info webpack-dashboard
└─ webpack-dashboard@npm:3.3.6
   ├─ Instances: 1
   ├─ Version: 3.3.6
   │
   ├─ Exported Binaries
   │  └─ webpack-dashboard
   │
   └─ Dependencies
      ├─ chalk@npm:^4.1.1 → npm:4.1.2
      ├─ commander@npm:^8.0.0 → npm:8.3.0
      ├─ cross-spawn@npm:^7.0.3 → npm:7.0.3
      ├─ filesize@npm:^7.0.0 → npm:7.0.0
      ├─ handlebars@npm:^4.1.2 → npm:4.7.7
      ├─ inspectpack@npm:^4.7.1 → npm:4.7.1
      ├─ neo-blessed@npm:^0.2.0 → npm:0.2.0
      ├─ socket.io-client@npm:^4.1.3 → npm:4.4.1
      └─ socket.io@npm:^4.1.3 → npm:4.4.1

❯ yarn info webpack webpack-cli
├─ webpack-cli@npm:4.9.1
│  ├─ Instances: 1
│  ├─ Version: 4.9.1
│  │
│  ├─ Exported Binaries
│  │  └─ webpack-cli
│  │
│  └─ Dependencies
│     ├─ @discoveryjs/json-ext@npm:^0.5.0 → npm:0.5.6
│     ├─ @webpack-cli/configtest@npm:^1.1.0 → npm:1.1.0
│     ├─ @webpack-cli/info@npm:^1.4.0 → npm:1.4.0
│     ├─ @webpack-cli/serve@npm:^1.6.0 → npm:1.6.0
│     ├─ colorette@npm:^2.0.14 → npm:2.0.16
│     ├─ commander@npm:^7.0.0 → npm:7.2.0
│     ├─ execa@npm:^5.0.0 → npm:5.1.1
│     ├─ fastest-levenshtein@npm:^1.0.12 → npm:1.0.12
│     ├─ import-local@npm:^3.0.2 → npm:3.1.0
│     ├─ interpret@npm:^2.2.0 → npm:2.2.0
│     ├─ rechoir@npm:^0.7.0 → npm:0.7.1
│     └─ webpack-merge@npm:^5.7.3 → npm:5.8.0
│
└─ webpack@npm:5.66.0
   ├─ Instances: 1
   ├─ Version: 5.66.0
   │
   ├─ Exported Binaries
   │  └─ webpack
   │
   └─ Dependencies
      ├─ @types/eslint-scope@npm:^3.7.0 → npm:3.7.3
      ├─ @types/estree@npm:^0.0.50 → npm:0.0.50
      ├─ @webassemblyjs/ast@npm:1.11.1 → npm:1.11.1
      ├─ @webassemblyjs/wasm-edit@npm:1.11.1 → npm:1.11.1
      ├─ @webassemblyjs/wasm-parser@npm:1.11.1 → npm:1.11.1
      ├─ acorn-import-assertions@npm:^1.7.6 → npm:1.8.0
      ├─ acorn@npm:^8.4.1 → npm:8.7.0
      ├─ browserslist@npm:^4.14.5 → npm:4.19.1
      ├─ chrome-trace-event@npm:^1.0.2 → npm:1.0.3
      ├─ enhanced-resolve@npm:^5.8.3 → npm:5.8.3
      ├─ es-module-lexer@npm:^0.9.0 → npm:0.9.3
      ├─ eslint-scope@npm:5.1.1 → npm:5.1.1
      ├─ events@npm:^3.2.0 → npm:3.3.0
      ├─ glob-to-regexp@npm:^0.4.1 → npm:0.4.1
      ├─ graceful-fs@npm:^4.2.9 → npm:4.2.9
      ├─ json-parse-better-errors@npm:^1.0.2 → npm:1.0.2
      ├─ loader-runner@npm:^4.2.0 → npm:4.2.0
      ├─ mime-types@npm:^2.1.27 → npm:2.1.34
      ├─ neo-async@npm:^2.6.2 → npm:2.6.2
      ├─ schema-utils@npm:^3.1.0 → npm:3.1.1
      ├─ tapable@npm:^2.1.1 → npm:2.2.1
      ├─ terser-webpack-plugin@npm:^5.1.3 → npm:5.3.0
      ├─ watchpack@npm:^2.3.1 → npm:2.3.1
      └─ webpack-sources@npm:^3.2.2 → npm:3.2.3

Before PR

[webpack-cli] Failed to load '/Users/vito/repos/@thtliife/dashboard-test/webpack.config.ts' config
[webpack-cli] webpack.config.ts:6:29 - error TS7016: Could not find a declaration file for module 'webpack-dashboard/plugin'. '/Users/vito/repos/@thtliife/dashboard-test/.yarn/__virtual__/webpack-dashboard-virtual-2fa1ddb4b9/0/cache/webpack-dashboard-npm-3.3.6-78688c9e79-55b1bbc6eb.zip/node_modules/webpack-dashboard/plugin/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/webpack-dashboard` if it exists or add a new declaration (.d.ts) file containing `declare module 'webpack-dashboard/plugin';`

6 import DashboardPlugin from 'webpack-dashboard/plugin';
                              ~~~~~~~~~~~~~~~~~~~~~~~~~~

After PR

webpack 5.66.0 compiled successfully in 1284 ms
assets by path *.js 1.38 MiB
  asset main.js 1.38 MiB [emitted] (name: main) 1 related asset
  asset main.2936fce54ae83d322c52.hot-update.js 371 bytes [emitted] [immutable] [hmr] (name: main) 1 related asset
asset ../dist/index.html 301 bytes [emitted]
asset main.2936fce54ae83d322c52.hot-update.json 28 bytes [emitted] [immutable] [hmr]
Entrypoint main 1.38 MiB (1.6 MiB) = main.js 1.38 MiB main.2936fce54ae83d322c52.hot-update.js 371 bytes 2 auxiliary assets
cached modules 1.29 MiB [cached] 50 modules
runtime modules 27.6 KiB 16 modules
webpack 5.66.0 compiled successfully in 86 ms

So everything looking good so far mate :)

ryan-roemer added Bug Unverified High Priority labels Jan 20, 2022

ryan-roemer mentioned this issue Jan 20, 2022

Bug: TS fixes #341

Merged

ryan-roemer added Verified and removed Unverified labels Jan 21, 2022

ryan-roemer closed this as completed in #341 Jan 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TS7016: Could not find a declaration file for module 'webpack-dashboard/plugin' #324

TS7016: Could not find a declaration file for module 'webpack-dashboard/plugin' #324

justnewbee commented Mar 18, 2021

justnewbee commented Mar 18, 2021

ryan-roemer commented Jun 7, 2021

TranquilMarmot commented Oct 25, 2021

thtliife commented Jan 20, 2022 •

edited

ryan-roemer commented Jan 20, 2022

ryan-roemer commented Jan 20, 2022

thtliife commented Jan 20, 2022

thtliife commented Jan 20, 2022 •

edited

TS7016: Could not find a declaration file for module 'webpack-dashboard/plugin' #324

TS7016: Could not find a declaration file for module 'webpack-dashboard/plugin' #324

Comments

justnewbee commented Mar 18, 2021

If the issue is visual, please provide screenshots here

Steps to reproduce the problem

Please provide a gist of relevant files

More Details

justnewbee commented Mar 18, 2021

ryan-roemer commented Jun 7, 2021

TranquilMarmot commented Oct 25, 2021

thtliife commented Jan 20, 2022 • edited

ryan-roemer commented Jan 20, 2022

ryan-roemer commented Jan 20, 2022

thtliife commented Jan 20, 2022

thtliife commented Jan 20, 2022 • edited

Before PR

After PR

thtliife commented Jan 20, 2022 •

edited

thtliife commented Jan 20, 2022 •

edited