Fails to import monaco editor

[grassick]

Hello!

Attempting to import { ControlledEditor } from '@monaco-editor/react' in typescript fails build with this error:

[snowpack] Failed to load snowpack-wrap:/home/clayton/dev/scratch/wiki/node_modules/@monaco-editor/react/lib/index.js
  Duplicate export 'default' (4:62) in snowpack-wrap:/home/clayton/dev/scratch/wiki/node_modules/@monaco-editor/react/lib/index.js
[snowpack] Install failed.

Monaco does appear to re-assign exports.default:

exports.default = void 0;

var _Editor = _interopRequireDefault(require("./Editor"));

var _DiffEditor = _interopRequireDefault(require("./DiffEditor"));

var _ControlledEditor = _interopRequireDefault(require("./ControlledEditor"));

var _utils = require("./utils");

var _default = _Editor.default;
exports.default = _default;

But removing the first line shown above does not help. Any ideas on how to get monaco-editor to import?

[FredKSchott]

Thanks for finding, that appears to be a bug in our newly-released "auto CJS named export" detection. Just quick-fixed in 1df4e16, we'll push a small release out soon with this fix.

[grassick]

Thank you for the fix to that, but now immer fails to import.

I created a fresh project using:

npx create-snowpack-app notelet3 --template @snowpack/app-template-react-typescript

I did npm i immer and used immer in the code:

import produce from 'immer';

Then when I ran it, I got:

Unhandled Runtime Error
Uncaught TypeError: Failed to resolve module specifier "immer". Relative references must start with either "/", "./", or "../".

in the browser that popped up.

[FredKSchott]

Hmm, any error logs in the dev console? It sounds like there's an issue installing the package, and the browser is showing an error caused by that larger issue

[grassick]

This is truly bizarre... Here's the code that fails with the error:

[snowpack] ! clearing cache...
[snowpack] ! /home/clayton/dev/scratch/notelet3/src/App.tsx
[snowpack] Parse error @:2:43

Fails:

import React from 'react';

function handleRun() {
  const func: any = () => {}
  const requireFunc = new Function("pkg", "return import('https://cdn.skypack.dev/' + pkg)")
}

function App() {
  return <div></div>
}

export default App;

Works:

import React from 'react';

function handleRun() {
  const func: any = () => {}
  const requireFunc = new Function("pkg", "return import('https://cdn.skypack.dev/' + pkg)")
}

function App() {
  return <div/>
}

export default App;

Note that the only changes was <div></div> to <div/>. Removing the handleRun function also makes it work. I'm clearing the cache each time, as if I don't, it will suddenly start working and then not fail again.

Thanks!

[FredKSchott]

Oh interesting. I wonder if the "return import('https://cdn.skypack.dev/' + pkg)" is being picked up incorrectly by any part of our import resolver. It shouldn't be, but that does look suspicious.

[grassick]

Aha, yes, that's the reason. It is pretty bizarre code, I'll admit and I can work around it. But, get this, if you change the <div/>, it then works. Must be a strange corner case with detecting import statements.

Thanks for your work on this!

[FredKSchott]

Hmm, I tried quickly fiddling with esbuild & es-module-lexer directly, and couldn't reproduce / your "failed" code worked successfully.

Question to help us pinpoint this: are you using Babel to build your app? If you're using a CSA template, you can tell if you have a babel.config.json file in your top-level project dir.

[grassick]

notelet3.zip
Here's exactly how to reproduce (sorry for dumping code here!):

Unzip the above to a new folder. Run npm ci. Run npx snowpack dev --reload. Crash!

[FredKSchott]

great, will take a look when I can. Thanks again!

[Sixstar0606]

i have same error .

Uncaught TypeError: Failed to resolve module specifier "immer". Relative references must start with either "/", "./", or "../".

but i can't fix that.

please help me.

I run with "npm run build" and i got that error.
but if i run with "parcel alpha.html" , i have no error and works well.

i need to run with "npm run build"

thank you