Runtime error (missing node module) when using ParcelJS

My project uses Parcel as a build tool. I created a file index.tsx containing the following:

import React from "react";
import SyntaxHighlighter from 'react-syntax-highlighter';
const Component = () => {
  const codeString = '(num) => num + 1';
  return <SyntaxHighlighter language='javascript'>{codeString}</SyntaxHighlighter>;  
}

I am able to build this with Parcel (v1.12.3), but when I open the page in the browser, I get the following runtime error:

Uncaught (in promise) Error: Cannot find module ‘…/…/node_modules/refractor/lang/markup.js’ at newRequire (syntaxtest.f69400ca.js:37) at newRequire (core.c556c4e5.js:29) at newRequire (refractor.04149aff.js:29) at newRequire (core.c556c4e5.js:21) at localRequire (core.c556c4e5.js:53) at Object.parcelRequire…/…/node_modules/refractor/core.js.hastscript (core.js:23) at newRequire (core.c556c4e5.js:47) at newRequire (refractor.04149aff.js:29) at newRequire (syntaxtest.f69400ca.js:21) at localRequire (syntaxtest.f69400ca.js:53)

I tried to also install refractor, but that didn’t solve the issue. Does anybody have an idea what the problem might be?

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome v73, Safari 12.1

[Multimo]

Hey just for anyone else who happens to his this problem: @zamotany’s solution has worked for me but I had to use the common js dist instead as my node version had troubled with esm / import syntax.

import Prism from 'react-syntax-highlighter/dist/cjs/prism';

[zamotany]

I was having the same issue when importing prism:

import { Prism } from 'react-syntax-highlighter';

and I found that importing prism directly from dist/esm seems to do the trick:

import Prism from 'react-syntax-highlighter/dist/esm/prism';

For highlight.js this could work:

import Prism from 'react-syntax-highlighter/dist/esm/default-highlight';