Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

react-markdown doesn't work in SSR dev

See original GitHub issue

Describe the bug

react-markdown fails with ReferenceError: module is not defined when I try to import it from a module loaded with ssrLoadModule. It seems to be caused by mixing ES modules and CJS modules in the transitive dependencies. Everything works as expected when I add "type": "module" to package.json.

Reproduction

Clone this repo and install dependencies: https://github.com/cyco130/vite-react-markdown-issue
Run node ssr-module.mjs and observe that react-markdown works correctly when run directly.
Run node index.cjs and observe loading with SSR fails.
Add "type": "module" to package.json to fix it.

System Info

System:
    OS: Linux 5.4 Linux Mint 20.2 (Uma)
    CPU: (8) x64 Intel(R) Core(TM) i7-3630QM CPU @ 2.40GHz
    Memory: 365.33 MB / 15.53 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.18.1 - /usr/local/bin/node
    Yarn: 1.22.11 - ~/.npm-global/bin/yarn
    npm: 7.24.1 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 96.0.4664.45
    Firefox: 94.0
  npmPackages:
    vite: ^2.7.0-beta.9 => 2.7.0-beta.9

Used Package Manager

npm

Logs

No response

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

Issue Analytics

State:
Created 2 years ago
Comments:10 (5 by maintainers)

Top GitHub Comments

1reaction

benmccanncommented, Dec 2, 2021

I still think it’s incorrect to say there’s no regression here in 2.7. While the reproduction the reporter shared doesn’t demonstrate a regression, if you read the code it sure looks like there’s one and I’d expect we could create a reproduction.

The newly introduced code says the package should be externalized if pkg.type === 'module' but is reading the wrong package.json. I think this means that if the user’s project is of "type": "module" then all packages will be externalized. And per the discussion in https://github.com/vitejs/vite/pull/5903 it sounds like we don’t want that. I sent https://github.com/vitejs/vite/pull/5927 as an improved fix. If people are able to take a look, I think it’d be nice to get into 2.7

1reaction

brilloutcommented, Dec 1, 2021

@patak-js I will have a look at these 2 regressions. (But let me finish 2 highest prio vite-plugin-ssr things I need to finish today. Hopefully I’ll have some spare time for this later today.)

Top Results From Across the Web

reactjs - Can't display markdown on NEXTJS - Stack Overflow

that's not H1 , and the code tag seems didn't work, BUT when i'm using bold: const [value, setValue] = useState("# A **demo**...

How to safely render Markdown using react-markdown

Learn how to safely render Markdown syntax to the appropriate HTML with this short react-markdown tutorial.

How to Render Markdown in React with react-markdown

In this article, you will learn how to use Markdown in React applications using the react-markdown library. We will see how to render...

A Light-weight Markdown Editor Based on React. - Morioh

import react, react-markdown-editor-lite, and a markdown parser you like import React ... an open-source JavaScript library for designing development tools.

React Markdown: A Thorough Guide With Markdown Examples

It also enables developers to use plugins to customize how the ... react-markdown is not the only library that transforms Markdowns into a ......