reactjs - [NextJS]无法使用 webpack 在 node_modules 中加载带有 svg 图像的 css 文件

Question

我试图将React JSON 编辑器包添加到项目中，它在节点模块中使用 json 编辑器包，它没有被正确地转译并抛出错误。经过一番谷歌搜索后，我添加了下一个转译器插件以使其正确转译，然后它没有加载 css，为此我添加了必要的插件，最后当我认为一切都在 css 中正常工作时，它尝试加载一个 svg 并且它无法加载它并不断要求合适的装载机。尝试了 next-images 插件，还尝试添加不同的文件加载器、css-loader、svg-loader 和不同的插件，但似乎没有任何效果，不知道如何解决这个问题，因为我束手无策。

当我尝试直接进入使用编辑器组件的页面时，会发生这种奇怪的事情，当我加载不同的页面导航到当前页面时会发生以下错误。该组件在没有 css 的情况下被渲染，它只是一个按钮和一个下拉列表的集合。

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;
        },
      })
    )
  )
);

错误

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
    

标签： reactjswebpackbabeljsnext.js