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

[pranaypratyush]

🐛 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

[mischnic]

This works for me:

var refractor = require('refractor')

console.log(refractor.highlight('*Emphasis*', 'markdown'))

Please post an example of your code that causes this error.

[theborderradius]

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;

[benduran]

Any suggestions for how best to address this? I'm having an identical issue, and it is currently preventing me from swapping off of Webpack and moving 100% to Parcel

[mischnic]

I'm pretty sure the reason here is that refractor/lang/markup.js is imported synchonously (by refractor/index.js) and also asynchronously (byreact-syntax-highlighter/dist/esm/async-languages/prism.js).
@benduran Your example works correctly with Parcel 2.

[benduran]

@mischnic thanks for sharing. I've been waiting to try and update to Parcel2, since it appears it is still in Alpha phase

[stephenmathieson]

Is the plan for Parcel v1 to not support this? I am not ready to upgrade my app to Parcel v2 but would like the ability to use react-syntax-highlighter.

Is there at least a known work-around for this?

[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();