Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: Can't resolve 'react/jsx-runtime' #45

Closed
davidhu2000 opened this issue May 20, 2021 · 6 comments
Closed

Error: Can't resolve 'react/jsx-runtime' #45

davidhu2000 opened this issue May 20, 2021 · 6 comments

Comments

@davidhu2000
Copy link

I tried to add module federation to a brand new nextjs app and i'm seeing this error. Full Error

mf-test (main)$ yarn build
yarn run v1.22.10
$ next build
info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
info  - Creating an optimized production build  
Failed to compile.

ModuleNotFoundError: Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/davidhu/Desktop/mf-test/src/pages'


> Build error occurred
Error: > Build failed because of webpack errors
    at /Users/davidhu/Desktop/mf-test/node_modules/next/dist/build/index.js:17:924
    at async Span.traceAsyncFn (/Users/davidhu/Desktop/mf-test/node_modules/next/dist/telemetry/trace/trace.js:6:584)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I checked node_modules and sees react/jsx-runtime.js in the directory. possibly related to this react issue. I can't seem to find regarding this fix.

Archive.zip

i zipped up a sample code that shows the issue. just run yarn build or yarn dev to see the error.

Here are the versions we are using

  "dependencies": {
    "@module-federation/nextjs-mf": "^0.2.1",
    "next": "10.2.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }

Any ideas?

@davidhu2000
Copy link
Author

next.config.js

const { withModuleFederation } = require("@module-federation/nextjs-mf");
const path = require("path");

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config, options) => {
    const name = "nextjs-webapp-template";
    const mfConf = {
      mergeRuntime: true,
      name,
      library: { type: config.output.libraryTarget, name },
      filename: "static/runtime/remoteEntry.js",
      remotes: {
        // For SSR, resolve to disk path (or you can use code streaming if you have access)
        [name]: options.isServer
          ? path.resolve(
              __dirname,
              `../${name}/.next/server/static/runtime/remoteEntry.js`
            )
          : name, // for client, treat it as a global
      },
      exposes: {
        "./StaticAssets": "./src/modules/StaticAssets/index",
      },
      shared: [],
    };

    withModuleFederation(config, options, mfConf);

    if (!options.isServer) {
      config.output.publicPath = "http://localhost:3000/_next/";
    }

    // Important: return the modified config
    return config;
  },
};

_document.js

import Document, { Html, Head, Main, NextScript } from "next/document";

import { patchSharing } from "@module-federation/nextjs-mf";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        {patchSharing()}
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument;

@davidhu2000
Copy link
Author

adding

/** @jsxRuntime classic */
import * as React from 'react';

seem to fix this issue.

but now getting

info  - Creating an optimized production build  
Failed to compile.

HookWebpackError: Cannot read property 'source' of undefined


> Build error occurred
Error: > Build failed because of webpack errors
    at /Users/davidhu/Desktop/skillz/nextjs-webapp-template/node_modules/next/dist/build/index.js:17:924
    at async Span.traceAsyncFn (/Users/davidhu/Desktop/skillz/nextjs-webapp-template/node_modules/next/dist/telemetry/trace/trace.js:6:584)
error Command failed with exit code 1.

@ScriptedAlchemy
Copy link
Member

looks related to ESM issues
resolve alias seems to work - 'react/jsx-runtime': require.resolve('react/jsx-runtime')

@ScriptedAlchemy
Copy link
Member

@davidhu2000
Copy link
Author

good, a combination of 0.3.0 and the resolve.alias fixed the build when i don't have anything under the expose key

@ScriptedAlchemy any idea of this error? seems to happen when i add something into the expose key.

Failed to compile.

static/runtime/remoteEntry.js from Terser
Invalid assignment [static/runtime/remoteEntry.js:437,32]


> Build error occurred
Error: > Build failed because of webpack errors
    at /Users/davidhu/Desktop/skillz/nextjs-webapp-template/node_modules/next/dist/build/index.js:17:924
    at async Span.traceAsyncFn (/Users/davidhu/Desktop/skillz/nextjs-webapp-template/node_modules/next/dist/telemetry/trace/trace.js:6:584)
error Command failed with exit code 1.

@davidhu2000
Copy link
Author

ah, it was because i used - in the name, changing name to use underscore worked.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants