Exports is not defined

[rohmanhm]

monaco-editor version: 0.8.3 Browser: Chrome Version 57.0.2987.133 (64-bit) OS: macOS Sierra

I'm using monaco-editor with react and next.js Here's my code

import { Component } from 'react'
import Router from 'next/router'
import styled from 'styled-components'
import { PrimaryButton, Button } from 'office-ui-fabric-react/lib/Button'
import { Label } from 'office-ui-fabric-react/lib/Label'
import MonacoEditor from 'react-monaco-editor'

import CreatePage from '../CreatePage'
import { createPlayground } from '@/actions/ProjectAction'
import Overlay from '@/components/Overlay'
import defaultContainer from '@/components/Container'
import Img from '@/components/Img'

const Container = styled(defaultContainer)`
  padding-bottom: 50px;
`

class UserPage extends Component {
  constructor (props) {
    super(props)
  }

  render () {
    const { users, username, url } = this.props
    const { displayName, _json: detail } = users

    const defaultImgSrc = 'https://s3.amazonaws.com/wll-community-production/images/no-avatar.png'

    let createButton = <div>Have a nice day</div>

    const requireConfig = {
      url: 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js',
      paths: {
        'vs': 'https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs'
      }
    }

    return <Container>
      <Img circle src={ detail && detail.avatar_url || defaultImgSrc } alt={ detail && detail.bio || 'This is user' } center/>
      <MonacoEditor
        width="800"
        height="600"
        language="javascript"
        value="// type your code..."
        requireConfig={ requireConfig }
      />
    </Container>
  }
}

export default UserPage

I got error in my browser

fake:1 Uncaught ReferenceError: exports is not defined at fake:1 at fake:1 (anonymous) @ fake:1 (anonymous) @ fake:1

Am I make a wrong?

[expobrain]

I cannot see anything wrong in your code, but reading the error message you reported I recon the issue is in the Balel/Webpack stage

[mk010101]

I get the same error although using a different approach:

` let req = global["require"];

    let monScr = document.createElement("script");
    monScr.src = "../node_modules/monaco-editor/min/vs/loader.js";

    monScr.addEventListener("load", ()=> {

        let amdRequire = global["require"];
        global["require"] = req;

        amdRequire.config({
            baseUrl: Model.getInstance().appPath + '/node_modules/monaco-editor/min'
        });

        amdRequire(['vs/editor/editor.main'], function() {
            console.log(111)
            let editor = monaco.editor.create(this._html.querySelector(".module-content_raw"), {
                value: [
                    'function x() {',
                    '\tconsole.log("Hello world!");',
                    '}'
                ].join('\n'),
                language: 'javascript'
            });
        });

    });

    document.head.appendChild(monScr);`

[domoritz]

It sounds like your module bundler is importing jsnext:main from https://github.com/superRaytin/react-monaco-editor/blob/master/package.json#L9. You need to run babel over the libraries you use as well then.

Since this is an issue with your module bundler, I'm closing it here. Please reopen if you disagree.