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

We are trying to migrate from a CRA-based React app to NextJS by importing the root component directly in the Next build. Our plan is to get Next building our bundles, and then we can migrate the pages out one by one without having to do everything at once.

The project uses npm workspaces.

// new-app/pages/index.tsx
import RootComponent from '@watershed/app/src/admin/AdminRoot';

function HomePage() {
  return <RootComponent />;
}

export default HomePage;

When we run next build we get an unexpected error without enough context to resolve:

> @watershed/app-admin@0.1.0 build
> next build

info  - Checking validity of types
info  - Creating an optimized production build
Failed to compile.

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

> Build failed because of webpack errors
npm ERR! Lifecycle script `build` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: @watershed/app-admin@0.1.0
npm ERR!   at location: /Users/adamrneary/github/ghg/client/workspaces/app-admin

What would be the best way to diagnose this? Is this something folks have seen before? Happy to collaborate on a fix, but I am not sure where to start. Thanks in advance for your time!

[adamrneary]

@ivantm I appreciate that (in earnest), but we’re trying to get this working with Next 12.

[medihack]

@shifengdiy I have it working with an up-to-date NextJS 12. Below is the relevant code. It uses some custom language service, but it’ll hopefully give you the idea…

// next.config.js
/** @type {import('next').NextConfig} */
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
const path = require("path");

const nextConfig = {
  reactStrictMode: true,
  webpack: (config, options) => {
    // Allows to load CSS in monaco-editor as Next.js does not handle CSS in
    // node modules folder.
    // Workaround until RFC is through: https://github.com/vercel/next.js/discussions/27953
    config.module.rules
      .find((rule) => rule.oneOf)
      .oneOf.forEach((r) => {
        if (r.issuer?.and?.[0]?.toString().includes("_app")) {
          r.issuer = [
            { and: r.issuer.and },
            /[\\/]node_modules[\\/]monaco-editor[\\/]/,
          ];
        }
      });

    // See https://github.com/vercel/next.js/issues/31692#issuecomment-1061260424
    if (!options.isServer) {
      config.plugins.push(
        new MonacoWebpackPlugin({
          languages: [],
          filename: "static/[name].js",
          customLanguages: [
            {
              label: "medtl",
              worker: {
                id: "vs/language/medtl/medtlWorker",
                entry: path.resolve(
                  "./node_modules/@medtl/monaco-plugin/dist/medtl.worker.js"
                ),
              },
            },
          ],
        })
      );
    }
    return config;
  },
};

module.exports = nextConfig;

// pages/editor.tsx
import { NextPage } from "next";
import dynamic from "next/dynamic";

const MedtlEditor = dynamic(() => import("../src/components/MedtlEditor"), {
  ssr: false,
});

const Editor: NextPage = () => {
  return (
    <div>
      <MedtlEditor />
    </div>
  );
};

export default Editor;

// src/components/MedtlEditor.tsx
import MonacoEditor from "react-monaco-editor";
import { setDiagnosticsOptions } from "@medtl/monaco-plugin";

const MedtlEditor = () => {
  return (
    <div>
      <MonacoEditor
        width={800}
        height={600}
        language="medtl"
        editorDidMount={() => {
          setDiagnosticsOptions();
          console.log("Editor ready");
        }}
      />
    </div>
  );
};

export default MedtlEditor;

Hope this helps.