Unable to resolve import "prop-types" (reboost) about reboost

[sarsamurmu]

Oh, My bad. It needs a minor fix to the CSS plugin to work. So I can't do anything until I get my monitor back. Sorry.

[sarsamurmu]

Fixed in v0.18.2. Update your installation of Reboost.

[sarsamurmu]

If you look at the package.json of @monaco-editor/react you can see that prop-types is a peerDependency, so it means you have to manually install it. Please install it in your project using

npm i prop-types
# or
yarn add prop-types

[jet10000]

thank you.

[jet10000]

I don’t know what happened, I tried to solve it myself, but I don’t know how to deal with it.

suren-atoyan/monaco-react#139

[sarsamurmu]

In your template include these

<script type="module" src="{{PATH_TO_SCRIPT}}"></script>
<script nomodule src="{{PATH_TO_SCRIPT}}"></script>

Both are required. Hope it fixes the issue.

[jet10000]

no effect

[sarsamurmu]

This is caused by CommonJS modules. Can you try adding this to your options

start({
  // ... other options

  commonJSInterop: {
    mode: 1
  }
})

[jet10000]

[sarsamurmu]

Actually, CommonJS interoperability with ES modules is a complex thing. I guess I have to rewrite the transformer code to support it. Until then all you can do is wait.

[sarsamurmu]

It looks like the problem comes from @monaco-editor/react. It created an import mess in its code which's why Reboost can't optimize it to work with ES Modules. I tried react-monaco-editor and it's working fine with some configuration.

Files

• reboost.js

  const { start, builtInPlugins: { UsePlugin, FilePlugin } } = require('reboost');
  
  start({
    entries: [
      ['./src/index.jsx', './public/dist/index.js']
    ],
    commonJSInterop: {
      mode: 1
    },
    plugins: [
      // For loading fonts
      UsePlugin({
        include: /\.ttf/i,
        use: FilePlugin()
      })
    ],
  })

• src/index.js

  import React from "react";
  import ReactDOM from "react-dom";
  
  import MonacoEditor from "react-monaco-editor";
  
  const App = () => <MonacoEditor height="90vh" language="javascript" />;
  
  const monacoElement = document.getElementById("monaco");
  ReactDOM.render(<App />, monacoElement);

So you can just use react-monaco-editor instead of @monaco-editor/react. There's no other way to fix this in Reboost.

[jet10000]

I adjusted it according to your code and tested it, but it still doesn't work. Can you add an example to the playground?

[jet10000]

[jet10000]

if enable commonJSInterop mode:1