Files output after optimization are text files

[dantevvp]

I just started using this library today but I can't get it to work. The only thing that has worked for me so far is using ?lqip. I've installed webp-loader, lqip-loader and imagemin-mozjpeg but everytime after conversion, the files just look like this:

package.json

{
  "name": "next-material-kit",
  "version": "1.1.0",
  "description": "NextJS Version of Material Kit React by Creative Tim (https://creative-tim.com)",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next-translate && next dev",
    "build": "next-translate && next build",
    "start": "next start",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf .next/ && npm install && npm run dev"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/creativetimofficial/nextjs-material-kit.git"
  },
  "keywords": [
    "next",
    "nextjs",
    "react",
    "reactjs",
    "npx",
    "material",
    "material-design",
    "material-kit",
    "material-kit-react",
    "next-material-kit"
  ],
  "author": "Creative Tim",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/creativetimofficial/nextjs-material-kit/issues"
  },
  "homepage": "https://demos.creative-tim.com/nextjs-material-kit",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@material-ui/core": "4.9.13",
    "@material-ui/icons": "4.9.1",
    "@sanity/block-content-to-react": "^2.0.7",
    "@sanity/client": "^1.149.18",
    "@sanity/image-url": "^0.140.19",
    "@svgr/webpack": "^5.4.0",
    "@zeit/next-sass": "1.0.1",
    "classnames": "2.2.6",
    "dateformat": "^3.0.3",
    "groq": "^1.149.16",
    "imagemin-mozjpeg": "^9.0.0",
    "lqip-loader": "^2.2.0",
    "moment": "2.25.3",
    "next": "^9.4.0",
    "next-compose-plugins": "2.2.0",
    "next-images": "1.3.1",
    "next-optimized-images": "^2.6.2",
    "next-react-svg": "^1.1.2",
    "next-svgr": "0.0.2",
    "next-translate": "^0.17.2",
    "nextjs-redirect": "2.0.2",
    "node-sass": "4.14.1",
    "nouislider": "14.4.0",
    "path": "0.12.7",
    "prop-types": "15.7.2",
    "react": "16.13.1",
    "react-datetime": "2.16.3",
    "react-dom": "16.13.1",
    "react-markdown": "^4.3.1",
    "react-slick": "0.25.2",
    "react-swipeable-views": "0.13.9",
    "styled-components": "5.1.0",
    "webp-loader": "^0.6.0",
    "webpack": "4.43.0"
  }
}

My next.config.js:

const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
const withSass = require("@zeit/next-sass");
const optimizedImages = require('next-optimized-images');
const webpack = require("webpack");
const path = require("path");

const nextConfig = {
  webpack(config, options) {
    config.resolve.modules.push(path.resolve("./"));
    return config;
  }
};

module.exports = withPlugins([
  [withSass],
  [withImages],
  [optimizedImages, {
    inlineImageLimit: -1,
    optimizeImagesInDev: true
  }]
], nextConfig);

My code:

import React from "react";

export default function Test(props) {
  return (
    <div>
      <img src={require('public/images/picture.jpg?webp')} />
    </div>
  );
}

My _next/static/images/ folder looks like this when firing up the server with npm run dev:

picture-[hash1].jpg (non-optimized original image)
picture-[hash2].jpg
picture-[hash2].jpg.webp (both with the same hash2)

picture-[hash1].jpg is the regular picture, but both picture-[hash2].jpg and picture-[hash2].jpg.webp don't have image data and show this when I open them with a text editor:

module.exports = "/_next/static/images/picture-[hash1].jpg";

When inspecting the img element with DevTools I can see that it's referencing the [hash2] webp image:

<div>
  <img src="/_next/static/images/picture-7f25723b6f9013b0cd2ed48189b66008.jpg.webp">
</div>

Of course, it won't show because it's just text. Somehow images aren't being converted. Do I need to install anything else that I might have skipped over?

Note the optimizeImagesInDev is set to true, but it will do the same if it's set to false, and it will also do the same in production.

Thank you!