Can't resolve 'react/jsx-runtime' with bundled component library

[ealmiladi]

Run next info (available from version 12.0.8 and up)

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 20.3.0: Thu Jan 21 00:07:06 PST 2021; root:xnu-7195.81.3~1/RELEASE_X86_64
Binaries:
  Node: 14.18.1
  npm: 6.14.15
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.0.10
  react: 17.0.2
  react-dom: 17.0.2

What version of Next.js are you using?

12.0.10

What version of Node.js are you using?

v14.18.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

We have a component library that we're developing using Storybook, TailwindCSS, React, and using Rollup to bundle. We bundle our library using rollup -c, then we use yarn link to symlink our bundle to our NextJS repository. We're seeing the following issue when attempting to utilize this library in our next project:

../design-patterns/build/components/card/Card.js:2:0
Module not found: Can't resolve 'react/jsx-runtime'
  1 | import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
> 2 | import { jsx } from 'react/jsx-runtime';
  3 | import './card.scss.js';
  4 | import '../../styles/tailwind.css.js';

Here's our rollup config:

import postcss from 'rollup-plugin-postcss';
import commonjs from '@rollup/plugin-commonjs';
import externals from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import url from 'rollup-plugin-url';
import { getFiles } from './getFiles';

const extensions = ['.js', '.jsx', '.ts', '.tsx'];

export default {
    input: ['./src/index.ts', ...getFiles('./src/components', extensions)],
    output: [
        {
            dir: 'build',
            format: 'esm',
            preserveModules: true,
            preserveModulesRoot: 'src',
            sourcemap: true,
        },
    ],
    plugins: [
        externals(),
        resolve(),
        commonjs(),
        typescript({
            tsconfig: './tsconfig.json',
        }),
        url({
            include: ['**/*.woff', '**/*.woff2'],
            limit: Infinity,
        }),
        postcss({
            config: {
                path: './postcss.config.js',
            },
            extensions: ['.css', '.scss'],
            minimize: true,
            inject: {
                insertAt: 'top',
            },
        }),
    ],
};

Our component library specifies React and ReactDOM as peerDependencies, which is necessary to avoid multiple versions of React conflicting with each other in the host project. If we link our component library in a Create-React-App project, everything works just fine. The issue seems to only present itself in our NextJS repository.

Expected Behavior

We should be able to use our bundled component library in NextJS, as we're able to in a create-react-app.

To Reproduce

I can put up the component library in a Github repo if this is necessary to reproduce.

[ealmiladi]

I was able to resolve by aliasing these dependencies in next.config.js:

  webpack: (config) => {
    config.resolve.alias["react/jsx-runtime"] = path.join(
      __dirname,
      "/node_modules/react/jsx-runtime.js"
    );
    config.resolve.alias["react"] = path.join(
      __dirname,
      "/node_modules/react/index.js"
    );
    config.resolve.alias["react-dom"] = path.join(
      __dirname,
      "/node_modules/react-dom/index.js"
    );
    return config;
  }

Although this solution worked, is this really necessary? Why couldn't it use the local node_modules react dependencies without having to alias the imports?

[sparkinson]

This fix has not worked for me :(

I am in a typescript project, and I wonder if that could be causing the problem.

I also added the following to my tsconfig

{
  "compilerOptions": {
    ...
    "paths": {
      "react/jsx-runtime": ["node_modules/react/jsx-runtime"]
    }
  },
  ...
}

But I don't think that should make a difference as the source files in the module are not typescript

[alperreha]

This alias solution works on me for hono.js "react-jsx" compiler option.
If you use this solution if you are using "hono.js" and "hono/jsx" but adding target_dir is like below:

{
	"compilerOptions": {
		"jsx": "react-jsx",
		"jsxImportSource": "hono/jsx",
		"paths": {
			"react/jsx-runtime": ["./node_modules/hono/dist/jsx"]
		}
	},
	"include": ["src/**/*"],
	"exclude": ["node_modules", "dist", "migrations"]
}

[balazsorban44]

I believe this is a common setup issue.

The "easiest" way to resolve is to link node_modules/react from your app back to the component lib. But this might not be the best solution.

It is better solved using a workspace setup instead, which will hoist React and other common dependencies to the top level that will be shared across your workspaces (your app and component lib in this case). No need for symlinking manually.

Without any special config, moving these two into a common directory you are able to just add one extra file:

// package.json
{
  "name": "my-workspace",
  "private": true,
  "workspaces": ["app", "components"],
  "scripts": { "dev": "cd app && yarn dev" }
}

Where app is your Next.js app, and components is your components library.

This could be further optimized to reduce the developer feedback loop in development.

Hope this helps!

[liho00]

its same, not working as well

how to solve this extactly?

[balazsorban44]

Interesting, I tested this locally. Could you please attach a minimal reproduction?

[thure]

I'm getting the same problem, though I'm using pnpm instead of Yarn.

I control a component library folks should be able to use in Next.js v12, however even using React 18 it doesn’t work out of the box because jsx-runtime can’t be resolved without intervention.

What are React component library maintainers meant to do about this?

[SLTKA]

Most likely Next.js can't do a lot about the issue.
First of all Next.js is able to resolve react/jsx-runtime without .js extension during build time.
The problem we see here happens in runtime when Next.js running a server (or does SSG) on Node.js which is trying to import an external from a library. Due to Node.js resolution algorithm it won't try to add .js to your imports and throw "module not found error".
You have two ways to solve this on library level:

• Upgrade to React 18 where they added exports instructions to their package.json
• Change your Rollup configuration to add .js to the import statement of your external. You can do this by adding output.paths config block, like:

  paths: {
    "react/jsx-runtime": "react/jsx-runtime.js",
  }
  

• (Just a blind idea/question) Is it possible to have a custom runtime Node.js resolver which can be installed as a plugin in a project?

[andrewfritz86]

Anyone make any progress on this? Also having issues pulling in a component library and getting transpilation to work correctly.

[jim-chien]

Have you been able to try this suggestion #34504 (reply in thread)?

I solved my case by adding some changes in tsconfig and webpack.

tsconfig.json
{
  "compilerOptions": {
    ...
    "paths": {
      "react/jsx-runtime": ["node_modules/react/jsx-runtime"]
    }
  },
  ...
}

webpack.config.js
{ 
  ...
  alias: {
       'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
       'react/jsx-runtime': 'react/jsx-runtime.js'
   }
  ...
}

[xixixao]

I'd consider this a bug in the externalDir implementation. I worked around this by mapping the imports in the webpack config to an absolute path:

// next.config.js

module.exports = {
  experimental: {
    externalDir: true,
  },
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // Important: return the modified config
    return {
      ...config,
      resolve: {
        ...config.resolve,
        fallback: {
          "react/jsx-dev-runtime": path.resolve(
            __dirname,
            "node_modules/react/jsx-dev-runtime.js"
          ),
          react: path.resolve(__dirname, "node_modules/react"),
        },
      },
    };
  },
};