Module import failing in Next.js: <module name>__WEBPACK_IMPORTED_MODULE_1___default(...).<function name> is not a function

Question

I've got a barebones Next.js project (w/ TypeScript) to which I've added Jimp. I'm using the experimental app dir in my config.

My next.config.js looks like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
}

module.exports = nextConfig

In my page.tsx, whenever I'm attempting to add Jimp by import Jimp from 'jimp'; and invoke its read function

useEffect(() => {

  // ...

  (async () => {
    const img = await Jimp.read(file);
  })();

  // ...

}, []);

I've got the following error:

Uncaught (in promise) TypeError: jimp__WEBPACK_IMPORTED_MODULE_1___default(...).read is not a function, also console.log(Jimp.read) gives me undefined.

What I am missing here?

Answer 1

Try manually installing fs once. npm install fs --save. You might need to change some configuration for webpack