0

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?

calmity
  • 113
  • 1
  • 9
  • 1
    try using `use client` to do client-side rendering. or `import Jimp from "jimp/es";` – Adesh Kumar May 02 '23 at 14:31
  • Neither worked. I've been using `'use client'` all along, and `import Jimp from "jimp/es"` just gave me the error message `Module not found: Can't resolve 'fs'`. I suspect Next.js doesn't appreciate the fact that Jimp makes use of Node.js's core lib `fs`. – calmity May 02 '23 at 22:20
  • 1
    try manually installing fs once – Adesh Kumar May 03 '23 at 03:34
  • Adding 'fs' manually did it, thanks a bunch. I also needed to add the following to my `module.exports` in `next.config.js`: ```javascript const nextConfig = { // ... webpack5: true, webpack: (config) => { config.resolve.fallback = { fs: false }; return config; } // ... } module.exports = nextConfig ``` – calmity May 03 '23 at 09:49
  • Okay great. Yes few config needs to be update for webpack. – Adesh Kumar May 05 '23 at 07:50

1 Answers1

1

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

Adesh Kumar
  • 952
  • 2
  • 16
  • 33
  • Can you please clarify why it should be installed from npm when the module is a security holding package? https://www.npmjs.com/package/fs – John Briggs Jul 06 '23 at 01:34