'react/jsx-runtime' not found

himat commented 1 year ago

Initial checklist

[X] I read the support docs
[X] I read the contributing guide
[X] I agree to follow the code of conduct
[X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

9.0.0

Link to runnable example

No response

Steps to reproduce

I just installed this package into my existing project with yarn add react-markdown

That worked fine

And then I made a component

import { useState } from "react";
import Markdown from "react-markdown";

function NotesViewer() {
  const meetingNotesText = `# Hi, *Pluto*!
        This is something.

        Nice then.`;

  return (
    <>
      <div className="mt-4 lg:flex lg:flex-row">
        <Markdown>{meetingNotesText}</Markdown>
      </div>
    </>
  );
}

export default NotesViewer;

I am using ╰─❯ node -v v19.6.1

╰─❯ yarn -v 1.22.15

Expected behavior

It should run normally

Actual behavior

When I then ran my project though (with react-scripts start), I get this error

ERROR in ./node_modules/react-markdown/lib/index.js 88:0-56

Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/hima/Workspace/gov-page/app/frontend/node_modules/react-markdown/lib'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Runtime

Other (please specify in steps to reproduce)

Package manager

yarn 1

OS

macOS

Build and bundle tools

Create React App

ChristianMurphy commented 1 year ago

Welcome @himat! 👋 Sorry you ran into a spot of trouble. I'm not able to replicate the issue in a clean environment https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-vite?file=src%2Fapp.tsx

A few things to try/consider:

make sure yarn installed the dependency into the _nodemodules folder
make sure you are running the most recent version of react-scripts, webpack used to have issues with ESM module loading
Create react app is deprecated https://github.com/reactjs/react.dev/pull/5487#issuecomment-1409720741, consider moving to a build tool which still has support like https://vitejs.dev/, https://nextjs.org/, or https://remix.run/ (among others)

github-actions[bot] commented 1 year ago

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

wooorm commented 1 year ago

And: Use react 18, as is explained in the changelog. It has a correct export map. Earlier reacts have no export maps, and your bundler might not find the "extensionless" file.

remcohaszing commented 1 year ago

I ran into this once too. Older versions of React (I think React 16), implements the JSX automatic runtime incorrectly. You need to update to a newer version of React.

liaokaime commented 7 months ago

I had the same problem and abandoned the upgrade when I realized I couldn't upgrade react-mardown 9.x from create-react-app + react17

remarkjs / react-markdown