reactjs - [NextJS]Unable to load css file with svg image in node_modules using webpack

Question

I was trying to add React JSON editor package to the project and it uses json editor package in node modules which was not getting transpiled correctly and was throwing errors. The after some googling I added next transpiler plugin to get it transpiled correctly then it was not loading css and for that I added the necessary plugin and then finally when I thought everything worked in css it tries to load an svg and it is unable to load it and keeps asking for appropriate loader. Tried next-images plugin and also tried adding different file-loader, css-loader, svg-loader and different plugins but nothing seems to work, do not know how to solve this as I am at my wits end .

And this weird thing happens when I tried to go directly to page where editor component is used the below error occurs when I load a different, page navigate to the current page. The component gets rendered without css it becomes just a collection of button and a drop down.

babel.config.js

  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

next.config.js

const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");
const lessToJS = require("less-vars-to-js");
const withImages = require("next-images");
const fs = require("fs");
const path = require("path");

/**
 * Pass the external modules that needs to be transpiled
 */
const withTM = require("next-transpile-modules")(["jsoneditor"]);
// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);

module.exports = withTM(
  withCSS(
    withImages(
      withLess({
        lessLoaderOptions: {
          javascriptEnabled: true,
          modifyVars: themeVariables, // make your antd custom effective
        },
        webpack: (config, { isServer }) => {
          if (isServer) {
            const antStyles = /antd/.*?/style.*?/;
            const origExternals = [...config.externals];
            config.externals = [
              (context, request, callback) => {
                if (request.match(antStyles)) return callback();
                if (typeof origExternals[0] === "function") {
                  origExternals[0](context, request, callback);
                } else {
                  callback();
                }
              },
              ...(typeof origExternals[0] === "function" ? [] : origExternals),
            ];
            config.module.rules.unshift({
              test: antStyles,
              use: "null-loader",
            });
          } 
          config.module.rules.push({
              test: /.svg$/,
              issuer: {
                test: /.css$/,
              },
              use: ["@svgr/webpack"],
            });

          console.dir(config, { depth: null });

          return config;
        },
      })
    )
  )
);

Error

ReferenceError: self is not defined
    at eval (webpack-internal:///./node_modules/jsoneditor/dist/jsoneditor-minimalist.js:29:104)
    at Object../node_modules/jsoneditor/dist/jsoneditor-minimalist.js (/home/xxxx/xxxxx/spa/.next/server/pages/product/detail.js:208:1)
    at __webpack_require__ (/home/xxxx/xxxx/spa/.next/server/pages/product/detail.js:29:31)
    at eval (webpack-internal:///./node_modules/jsoneditor-react/es/index.js:7:95)
    at Module../node_modules/jsoneditor-react/es/index.js (/home/sachin/fr-mit/spa/.next/server/pages/product/detail.js:197:1)
    at __webpack_require__ (/home/xxxxx/xxx-xxx/spa/.next/server/pages/product/detail.js:29:31)
    at eval (webpack-internal:///./pages/product/detail.tsx:17:74)
    at Module../pages/product/detail.tsx (/home/xxxxx/xxxx/spa/.next/server/pages/product/detail.js:503:1)
    at __webpack_require__ (/home/xxxx/xxxx/spa/.next/server/pages/product/detail.js:29:31)
    at /home/xxxx/xxxxx/spa/.next/server/pages/product/detail.js:104:18
    

question from:https://stackoverflow.com/questions/65864432/nextjsunable-to-load-css-file-with-svg-image-in-node-modules-using-webpack

Answer 1

Waitting for answers