4

I am working on converting React.js app to Next.js app project. I had to copy and paste few folders and import. Then after I got this error

enter image description here

Acrroding to the This stackoverflow question

I updated the next.config.js file

const path = require("path");
const withOptimizedImages = require("next-optimized-images");
const nextTranslate = require("next-translate");
const i18nConfig = require("./i18n-config.json");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
    enabled: process.env.ANALYZE === "true"
});
require("dotenv").config();

module.exports = withBundleAnalyzer(
    nextTranslate(
        withOptimizedImages({
            useFileSystemPublicRoutes: false,
            productionBrowserSourceMaps: true,
            i18n: {
                ...i18nConfig
            },
            handleImages: ["png"],
            inlineImageLimit: 68,
            responsive: {
                adapter: require("responsive-loader/jimp")
            },
            defaultImageLoader: "responsive-loader",
            sassOptions: {
                includePaths: [path.join(__dirname, "styles")]
            },
            webpack5: true,
            webpack(config) {
                config.module.rules.push({
                    test: /\.svg$/,
                    use: [
                        {
                            loader: "@svgr/webpack",
                            options: {
                                titleProp: true,
                                svgoConfig: {
                                    plugins: {
                                        removeViewBox: false
                                    }
                                }
                            }
                        }
                    ]
                });
                config.resolve.fallback = { fs: false };

               
               

                return config;
            }
        })
    )
);

I have added this two-line

webpack5: true,

config.resolve.fallback = { fs: false };

But still, the error is the same. My webpack version "@svgr/webpack": "5.5.0", My next js version "next": "10.0.9",

margherita pizza
  • 6,623
  • 23
  • 84
  • 152
  • I'd try const fs = require('fs'); – digitalniweb Oct 07 '21 at 10:20
  • Note that [next.js now uses webpack 5 per default](https://nextjs.org/docs/messages/webpack5), and [webpack 5 has considerable changes](https://webpack.js.org/migrate/5/), which might cause all kinds of trouble. At least update all npm packages, especially babel, maybe delete node_modules and cache folders. – kca Oct 08 '21 at 15:23
  • Related: https://stackoverflow.com/questions/64926174/module-not-found-cant-resolve-fs-in-next-js-application – Ciro Santilli OurBigBook.com Dec 15 '21 at 11:48

0 Answers0