Could not find a declaration for module

[robbiecren07]

I have installed and setup the plugin as per the instructions in the README. Here is a screenshot of the message im getting:

My test image in my index.html file looks like: <img alt="" src="images/9ine-gaming.webp" />

The actual image in my /images folder is: "9ine-gaming.jpg"

I got no errors when installing the plugin and when I run dev on my project I get no errors but the image does not get converted. I have tried changing my image to src="images/9ine-gaming.jpg", I have also installed both dependences imagemin and imagemin-webp, that didn't change anything. I have also tried to change my webpack.config files to match your test-project, no luck either.

Here is my current config:

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');

module.exports = (env, argv) => ({
  mode: argv.mode,
  devtool: argv.mode === 'development' ? 'source-map' : false,
  entry: [
    './src/js/app.js',
    './src/css/app.css',
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'assets/app.js',
  },
  optimization: {
    minimizer: [
      new TerserPlugin(),
      new OptimizeCSSAssetsPlugin(),
      new CopyPlugin({
        patterns: [{
          from: 'src/*.html',
          to: '[name].[ext]',
        }, {
          from: 'src/images/*',
          to: 'images/[name].[ext]',
        }],
      }),
    ],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      }, {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images/',
              name: '[name][hash].[ext]',
            },
          },
        ],
      }, {
        test: /.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
        exclude: /images/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'fonts/',
              name: '[name][hash].[ext]',
            },
          },
        ],
      }, {
        test: /\.(css)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          }, {
            loader: 'css-loader',
          }, {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          }, {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  ['autoprefixer'],
                ],
              },
            },
          }, {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'assets/app.css',
    }),
    new ImageminWebpWebpackPlugin({
      config: [{
        test: /\.(jpe?g|png)/,
        options: {
          quality: 76,
        },
      }],
      overrideExtension: true,
      detailedLogs: false,
      silent: false,
      strict: true,
    }),
  ],
  devServer: {
    contentBase: [
      path.join(__dirname, '/src'),
    ],
    watchContentBase: true,
    compress: true,
    port: 9000,
    open: true,
  },
});

and here is my package:

  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/plugin-proposal-class-properties": "^7.7.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.7.1",
    "autoprefixer": "^9.7.1",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.1.0",
    "css-loader": "^4.3.0",
    "eslint": "^7.9.0",
    "file-loader": "^6.1.0",
    "imagemin-webp-webpack-plugin": "^3.3.3",
    "mini-css-extract-plugin": "^0.11.2",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss": "^7.0.32",
    "postcss-loader": "^4.0.1",
    "resolve-url-loader": "^3.1.1",
    "sass": "^1.26.11",
    "sass-loader": "^10.0.2",
    "stylelint": "^13.7.1",
    "stylelint-config-standard": "^20.0.0",
    "svg-inline-loader": "^0.8.2",
    "terser-webpack-plugin": "^4.2.0",
    "url-loader": "^4.1.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@barba/core": "^2.8.0",
    "fitty": "^2.3.2",
    "gsap": "file:gsap-bonus.tgz",
    "highlight.js": "^10.2.0",
    "imagemin": "^7.0.1",
    "imagemin-webp": "^6.0.0",
    "imagesloaded": "^4.1.4",
    "reset-css": "^5.0.1"
  }

[iampava]

Hey @robbiecren07!

The warning you get in the first screenshot is regarding typescript. I have not added type information to this package.

Regarding the other problem, you should not see converted images when running development mode. The webpack-dev-server keeps the assets in memory so you'll not find them on disk. Did you try running the production build?

[blephy]

Hi,

Just implemented this plugin on my Typescript repo. This plugin is not written with Typescript so you do not have types.

You can avoid this error by following this steps :

1. Just create a @types folder.
2. Tell typescript to scan this folder for custom types.
3. Write a typing file in your @types folder.
4. restart your IDE or your typescript server.

Here is my configuration :

// tsconfig.json
{
  "ts-node": {
    "compilerOptions": {
      "module": "commonjs"
    }
  },
  "compilerOptions": {
    "baseUrl": "./",
    "sourceMap": true,
    "module": "esnext",
    "target": "es2017",
    "moduleResolution": "node",
    "jsx": "react",
    "checkJs": false,
    "allowJs": false,
    "importHelpers": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "typeRoots": ["./node_modules/@types", "./src/@types", "./config/@types"], // note this line
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": [
    "build",
    "stats",
    "reports",
    "coverage",
    "server",
    ".vscode",
    ".github",
    "**/node_modules/**",
    "config/test/**"
  ]
}

// declaration file, under your @types folder specified in your tsconfig.json
declare module 'imagemin-webp-webpack-plugin' {
  export interface IConfig {
    test: RegExp
    options: {
      quality: number
    }
  }
  export interface IOptions {
    config: IConfig[]
    overrideExtension: boolean
    detailedLogs: boolean
    silent: boolean
    strict: boolean
  }

  class ImageminWebpWebpackPlugin {
    constructor(options: IOptions)
  }

  export default ImageminWebpWebpackPlugin
}

[iampava]

Closing this one, seems to be resolved