Cannot find module '../node_modules/refractor/lang/markup.js'

🐛 bug report

Parcel doesn’t seem to able compile package refractor. I get the error Uncaught (in promise) Error: Cannot find module '../node_modules/refractor/lang/markup.js' even though the file markup.js is in place.

🎛 Configuration (.babelrc, package.json, cli command)

"babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-syntax-class-properties",
      "@babel/plugin-syntax-dynamic-import"
    ]
  }

🤔 Expected Behavior

Shouldn’t throw any errors since the package is fine

😯 Current Behavior

Uncaught (in promise) Error: Cannot find module '../node_modules/refractor/lang/markup.js'
    at newRequire (bundler.73ee101b.js:37)
    at newRequire (core.9a94de7c.js:29)
    at newRequire (refractor.5c664bab.js:29)
    at newRequire (core.9a94de7c.js:21)
    at localRequire (core.9a94de7c.js:53)
    at Object.parcelRequire.../node_modules/refractor/core.js.hastscript (core.js:23)
    at newRequire (core.9a94de7c.js:47)
    at newRequire (refractor.5c664bab.js:29)
    at newRequire (bundler.73ee101b.js:21)
    at localRequire (bundler.73ee101b.js:53)

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node	12.3.1
Yarn	1.16
Operating System	Ubuntu 18.04

[mrbrianhinton]

I’m seeing this same error.

I’m trying to use the react-syntax-highlighter package. I do see markup.js in node_modules.

import React from 'react';

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';

import { Typography } from 'antd';
const { Title } = Typography;

const Home = () => {
  const codeString = '(num) => num + 1';
  return (
      <div style={{ background: '#fff', minHeight: 280, borderRadius: '4px' }}>
        <Title level={2}>Introduction</Title>
        <p>This is WEBS 'official' Prototype-Admin example guide. Prior experience with other frameworks helps, but is not required.</p>
        <p>To get started simply run </p>
        <SyntaxHighlighter language="javascript" style={dark}>
          {codeString}
        </SyntaxHighlighter>
        <h4>Hello, home!</h4>
      </div>
  );
}

export default Home;

[sogaani]

I met this issue and use a workaround below.

async function startApplication(){
  await import('refractor');
  const App = await import('component which import react-syntax-highlighter');
  ReactDOM.render(<App />, document.getElementById('root'));
}

startApplication();