Webpack 的 NextJs 构建失败 |摩纳哥编辑答案

【问题标题】：NextJs build fail for webpack | Monaco editorWebpack 的 NextJs 构建失败 |摩纳哥编辑
【发布时间】：2022-03-09 11:58:00
【问题描述】：

错误描述

1.Monaco 编辑器在开发服务器中运行正常，但我必须动态导入它才能关闭 ssr；但它发出警告，但尽管有该错误，但它仍在开发中运行。 error - unhandledRejection: SyntaxError: Cannot use import statement outside a module

2.第二次运行 npm run build 时显示冲突 webpack 错误。

Failed to compile.

Conflict: Multiple assets emit different content to the same filename ../main.js.nft.json

Conflict: Multiple assets emit different content to the same filename ../main.js.nft.json

Conflict: Multiple assets emit different content to the same filename ../main.js.nft.json

Conflict: Multiple assets emit different content to the same filename ../main.js.nft.json


> Build failed because of webpack errors

我的 next.config.js 文件：

const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
const withTM = require("next-transpile-modules")([
  // `monaco-editor` isn't published to npm correctly: it includes both CSS
  // imports and non-Node friendly syntax, so it needs to be compiled.
  "monaco-editor",
]);

module.exports = withTM({
  webpack: (config) => {
    const rule = config.module.rules
      .find((rule) => rule.oneOf)
      .oneOf.find(
        (r) =>
          // Find the global CSS loader
          r.issuer && r.issuer.include && r.issuer.include.includes("_app")
      );
    if (rule) {
      rule.issuer.include = [
        rule.issuer.include,
        // Allow `monaco-editor` to import global CSS:
        /[\\/]node_modules[\\/]monaco-editor[\\/]/,
      ];
    }

    config.plugins.push(
      new MonacoWebpackPlugin({
        languages: [
          "json",
          "markdown",
          "css",
          "typescript",
          "javascript",
          "html",
          "graphql",
          "python",
          "scss",
          "yaml",
        ],
        filename: "static/[name].worker.js",
      })
    );
    return config;
  },
});

这是我在 nextjs 中的 editor.js 页面

import React, { useEffect } from "react";
import dynamic from "next/dynamic";
const MonacoEditor = dynamic(import("react-monaco-editor"), { ssr: false });
import DrawerWrapper from "../components/wrapperRoutes/DrawerWrapper";
import RestrictedForMobile from "../components/restricted/forMobile";
const App = () => {
  const [iframeSrc, setIframeSrc] = React.useState("");
  const [html, setHtml] = React.useState('');
  const [css, setCss] = React.useState('');
  const [js, setJs] = React.useState('');

//useEffect to render iframe output in every 600ms

  useEffect(() => {
    const timeout = setTimeout(() => {
      setIframeSrc(`
        <head><link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
        </head>
        <body>${html}</body>
        <style>${css}</style>
        <script>${js}</script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>
        `);
    }, 600);
    return () => clearTimeout(timeout);
  }, [html, css, js]);

  

  return (
    <>
      <DrawerWrapper>
        <div className="block lg:hidden">
          <RestrictedForMobile />
        </div>

        <div className="hidden lg:block">
          <div className=" w-full bg-coolGray-900 flex justify-between align-center items-center  overflow-visible   ">
            <div className="ml-3">
              <p className="bg-secondary mt-1 text-center text-gray-50 rounded-t-lg">
                HTML
              </p>

              <MonacoEditor
                width="32vw"
                height="400"
                language="html"
                theme="hc-black"
                value={html}
                options={{
                  minimap: {
                    enabled: false,
                  },
                }}
                onChange={setHtml}
              />

            </div>
            <div className=" flex-shrink-0">
              <p className="bg-secondary mt-1 text-center text-gray-50 rounded-t-lg">
                CSS
              </p>

              <MonacoEditor
                width="32vw"
                height="400"
                className="shadow-md"
                language="css"
                theme="hc-black"
                value={css}
                options={{
                  minimap: {
                    enabled: false,
                  },
                }}
                onChange={setCss}
              />

            </div>

            <div className="mr-3 flex-shrink-0">
              <p className="bg-secondary mt-1 text-center text-gray-50 rounded-t-lg">
                JS
              </p>

              <MonacoEditor
                width="32vw"
                height="400"
                language="javascript"
                theme="hc-black"
                value={js}
                options={{
                  minimap: {
                    enabled: false,
                  },
                }}
                onChange={setJs}
              />

            </div>
          </div>
          {/* <div className="text-gray-400 divider">Output [screen : 100vh]</div> */}

          <iframe
            srcDoc={iframeSrc}
            frameBorder="0"
            sandbox="allow-scripts allow-forms"
            className="overflow-scroll h-screen border-t-4 border-b-4 -mb-6 border-secondary"
            width="100%"
            height="100%"
          />
        </div>
      </DrawerWrapper>
    </>
  );
};

export default App;

环境：

操作系统：Apple Macbook Air M1，蒙特雷
浏览器：Chrome

请帮忙。谢谢❤️

【问题讨论】：

我已经解决了动态导入问题，谁能帮我解决一下 webpack

标签： reactjs webpack next.js monaco-editor

【解决方案1】：

除了将服务器从动态导入中排除（您已使用{ ssr: false } 完成），您还需要在创建MonacoWebpackPlugin 时将其排除。 next.config.js 中的 webpack 函数将被调用两次——一次用于服务器端编译，一次用于客户端编译。在运行next build 时，您看到的错误发生在服务器端编译期间，因此请将MonacoWebpackPlugin 限制在客户端：

// next.config.js

// ...

module.exports = withTM({
  webpack: (config, options) => { // add `options` parameter

    // ...

    if (!options.isServer) { // run only for client side
      config.plugins.push(
        new MonacoWebpackPlugin({

          // ...

        })
      );
    }
    return config;
  },
});

【讨论】：