react-monaco-editor: Unexpected token { (import)

with Nextjs 7

nextjs.config.js


webpack(config, options) {
         config.plugins.push(
              new MonacoWebpackPlugin({
                languages: ['json']
              })
            );
          return config;
}

node_modules/monaco-editor/esm/vs/editor/editor.api.js:5
import { PolyfillPromise } from '../base/common/winjs.polyfill.promise.js';
       ^

SyntaxError: Unexpected token {
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:656:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (node_modules/react-monaco-editor/lib/editor.js:11:15)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)

/Users/alexkotlar/Dropbox/projects/hail-akotlar/haas/packages/public/node_modules/monaco-editor/esm/vs/editor/editor.api.js:5
import { PolyfillPromise } from '../base/common/winjs.polyfill.promise.js';
       ^

SyntaxError: Unexpected token {
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:656:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (node_modules/react-monaco-editor/lib/editor.js:11:15)

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 14
Comments: 19 (6 by maintainers)

Commits related to this issue

chore: esm => pre-es6 (fixes #172) — committed to aladdin-add/react-monaco-editor by aladdin-add 5 years ago

Most upvoted comments

I’m getting this error as well, running create react app jest tests. The project is pretty bare bones minus the react-monaco-editor package. Repro:

Create app using create react app
Add react-monaco-editor
Run jest tests

bsell93 on Jan 22, 2019

Followup as i found that i was still hitting the issues with storybook.

I believe the issue is due to how imports are working for this project, as the imports are pointing to the uncompiled, es6 code, which is causing the crash to happen in jest.

I’ve updated the react-monaco-editor mock to look like this

import * as React from 'react';

function MonacoEditor() {
    return (<div />);
}

module.exports.default = MonacoEditor;

and this is now no longer crashing the unit tests.

I think the solution though would be for this project to point to the lib section instead of the src, and that should fix this.

sumboxcar182 on Feb 5, 2019

any news or workaround here?

@domoritz why is this issue closed? it is still not working?!?

The only working workaround for me was a minor adaption of @sumboxcar182 suggestions.

In folder __mocks__ create file react-monaco-editor.js with content:

import * as React from 'react';

export default function MonacoEditor() {
  return <div />;
}

zerocewl on May 7, 2020

monaco failaco

x5engine on Jan 31, 2019

If someone could update the build process to spit out multiple bundles, that would be sweet.

domoritz on Feb 8, 2019

I found a workaround for now that allowed me to at least mock out the code editor.

I used this https://jestjs.io/docs/en/manual-mocks.html but i found that all i had to do was create a new folder __mocks__ at the same directory as my node modules. Then in that folder i placed a file called react-monaco-editor.js which just had the line use strict. You probably don’t need that line, but at least as of now i’m able to run unit tests.

I hope this helps just getting unit tests up and running again.

sumboxcar182 on Feb 4, 2019