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

justnewbee commented 3 years ago

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

justnewbee commented 3 years ago

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

ryan-roemer commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Hi folks! Can anyone experiencing TS errors, try out https://github.com/FormidableLabs/webpack-dashboard/pull/341 and see how that goes?

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

thtliife commented 2 years ago

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 commented 2 years ago

❯ 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

webpack-dashboard

So everything looking good so far mate :)

FormidableLabs / webpack-dashboard