在使用 Webpack 的开发中运行使用 `fs` 和 `sharp` 的 Next.js 脚本？

Question

I am trying to create a simple GIFPlayer which shows GIF if someone clicks on a play button otherwise shows a PNG like:

<img className="w-full h-full" src={isPlaying ? gifPath : imgPath} alt={pic.alt} />

I only have GIF file so I create PNG file using Node.js sharp module.

scripts/gif-to-png.js

const fs = require('fs')
const path = require('path')
const sharp = require('sharp')
const fg = require('fast-glob')

const ROOT_PATH = process.cwd()
const POSTS_PATH = path.join(ROOT_PATH, 'src/_posts')

function* walkSync(dir) {
    const files = fs.readdirSync(dir, { withFileTypes: true })
    for (let i = 0; i < files.length; i++) {
        if (files[i].isDirectory()) {
            yield* walkSync(path.join(dir, files[i].name))
        } else {
            yield path.join(dir, files[i].name)
        }
    }
}

const gifToPng = async () => {
    try {
        for (let [i, file] of [...walkSync(POSTS_PATH)].entries()) {
            const extname = path.extname(file)
            if (extname === '.gif') {
                const dirname = path.dirname(file)
                const png = path.resolve(dirname, path.basename(file).replace('.gif', '.png'))
                await sharp(file).png().toFile(png)
            }
        }
    } catch (e) {
        console.error('Error thrown:', e)
    }
}

gifToPng()

My next.config.js runs this script in development like:

module.exports = {
    webpack: (config, options) => {

        if (!options.dev && options.isServer) {
            .
            .
            .
        } else {
            const originalEntry = config.entry

            config.entry = async () => {
                const entries = { ...(await originalEntry()) }
                entries['./scripts/gif-to-png'] = './scripts/gif-to-png.js'
                return entries
            }
        }

        return config
    },
}

However, its throwing error saying:

Module not found: Can't resolve 'fs'

The reason I need this script in development instead of production is I need to see the PNG file in development as well. Otherwise I won't be able to see it if it only runs in production .

How do I solve this?

Answer 1

I found the answer here .

The following tells webpack to not try and use fs on the client build (since that will fail).

if (!options.isServer) {
  config.resolve.fallback.fs = false
}
return config

webpack.config.js

module.exports = {
    webpack: (config, options) => {

            if (!options.dev && options.isServer) {
                    .
                    .
                    .
            } else {
                    const originalEntry = config.entry

                    config.entry = async () => {
                            const entries = { ...(await originalEntry()) }
                            entries['./scripts/gif-to-png'] = './scripts/gif-to-png.js'
                            return entries
                    }
            }

            
            if (!options.isServer) {
                config.resolve.fallback.fs = false
            }

            return config
    },
}