jsonMode.js:7 Uncaught ReferenceError: exports is not defined

[saravanakumargn]

Describe the bug
Console error for only json, html and css languages. For other languages it's working fine.

jsonMode.js:7 Uncaught ReferenceError: exports is not defined
    at jsonMode.js:7
    at jsonMode.js:7
    at t._createAndEvalScript (loader.js:794)
    at loader.js:776
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:61)
(anonymous) @ jsonMode.js:7
(anonymous) @ jsonMode.js:7
t._createAndEvalScript @ loader.js:794
(anonymous) @ loader.js:739
readFileAfterClose @ internal/fs/read_file_context.js:61
htmlMode.js:7 Uncaught ReferenceError: exports is not defined
    at htmlMode.js:7
    at htmlMode.js:7
    at t._createAndEvalScript (loader.js:794)
    at loader.js:776
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:61)
(anonymous) @ htmlMode.js:7
(anonymous) @ htmlMode.js:7
t._createAndEvalScript @ loader.js:794
(anonymous) @ loader.js:739
readFileAfterClose @ internal/fs/read_file_context.js:61
cssMode.js:7 Uncaught ReferenceError: exports is not defined
    at cssMode.js:7
    at cssMode.js:7
    at t._createAndEvalScript (loader.js:794)
    at loader.js:776
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:61)

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Or, please add a minimal code snippet to reproduce the issue, for example in codesandbox.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help to explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[suren-atoyan]

Hello @saravanakumargn.
We have never faced such kind of problem. Could you please provide your browser/os version and also, if it's possible, please make reproducible snippet in codesandbox

[saravanakumargn]

@suren-atoyan Thanks for your response.

I am facing this issue with ElectronJS. When I am trying to use JSON or HTML (loading from min/vs/language/json/ and min/vs/language/html/ getting this issue. But it's working fine with Javascript and other languages.

This is my Index.js config to load Monaco Editor.

const path = require('path');

function uriFromPath(_path) {
  let pathName = path.resolve(_path).replace(/\\/g, '/');
  if (pathName.length > 0 && pathName.charAt(0) !== '/') {
    pathName = `/${pathName}`;
  }
  return encodeURI(`file://${pathName}`);
}

monaco.config({
  paths: {
    vs: uriFromPath(
      path.join(process.cwd(), './node_modules/monaco-editor/min/vs')
    ),
  },
});

Error only HTML and JSON

file:///Users/saravanakumar/My/Projects/bitbucket/devbuddy/node_modules/monaco-editor/min/vs/language/json/jsonMode.js

jsonMode.js:7 Uncaught ReferenceError: exports is not defined
    at jsonMode.js:7
    at jsonMode.js:7
    at t._createAndEvalScript (loader.js:794)
    at loader.js:776
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:61)


file:///Users/saravanakumar/My/Projects/bitbucket/devbuddy/node_modules/monaco-editor/min/vs/language/html/htmlMode.js

htmlMode.js:7 Uncaught ReferenceError: exports is not defined
    at htmlMode.js:7
    at htmlMode.js:7
    at t._createAndEvalScript (loader.js:794)
    at loader.js:776
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:61)

As this is ElectronJS app I couldn't generate codesandbox script. Kindly let me know if you need any additional details.

[suren-atoyan]

Hello @saravanakumargn. I'll try to reproduce your case in my local machine to be able to debug it. Please, also provide me the electron configuration file content or the template/boilerplate in case if you used one to generate your project.

[saravanakumargn]

@suren-atoyan Appreciate your response.

I am using https://github.com/electron-react-boilerplate/electron-react-boilerplate for my project.

You can reproduce in this way.

1. npm i @monaco-editor/react
2. app/index.tsx

const path = require('path');

function uriFromPath(_path) {
  let pathName = path.resolve(_path).replace(/\\/g, '/');
  if (pathName.length > 0 && pathName.charAt(0) !== '/') {
    pathName = `/${pathName}`;
  }
  return encodeURI(`file://${pathName}`);
}

monaco.config({
  paths: {
    vs: uriFromPath(
      path.join(process.cwd(), './node_modules/monaco-editor/min/vs')
    ),
  },
});

import Editor from '@monaco-editor/react';
<Editor />

Note: I noticed when I am running npm run dev I am facing this issue and when running Production build or npm start its working fine.

[suren-atoyan]

Hello @saravanakumargn. I managed to reproduce your case and I saw the error. I think it's related to the boilerplate configuration you've used. I didn't notice it when we use monaco in electron applications.

So, I am sorry, but I don't see anything from the point of view of the wrapper.

[lucahost]

hey @saravanakumargn were you able to resolve this issue in your dev environment?
I'm using the same configuration and this error is happing for json aswell.

[vicke4]

Unfortunately, this is the only reason stopping me from using this awesome lib. I can't figure out a fix for this, and the issue happens on production build also in my case.

@suren-atoyan, I'm not using the template OP is using. Is there anything else I have to check? Other languages work just fine. Only json causes issues.

[Nick-Lucas]

I did some head banging on this and managed to come with a solution for Electron based on a slightly buried vanilla electron sample from Microsoft:

https://github.com/microsoft/monaco-editor-samples/blob/b9969d41cba002c7e6b9faca33e7b452a49d4545/electron-amd-nodeIntegration/electron-index.html#L36

basically do this:

import { loader } from '@monaco-editor/react'

self.module = undefined

// if your typescript complains then just silence it:
self.module = undefined as unknown as NodeModule

// set up loader as normal

I've tested it out in a dev and production build (electron-builder here) and nothing is functionally broken, though self.module seems to be a copy of global.module and it's not just electron modules in there, so I'm unsure of the ramifications of this monkey patching with regards to other libraries.

[Nauss]

Hi, @Nick-Lucas, I've tried your solution and it kinda works.
I get different editors working in my Electron app BUT I also get an error in the dev build.
The error is:

It occurs in the last line of the webpacked renderer.dev.js which is:

module.exports = __webpack_exports__;

The application seems to work fine after and the problem does not exists in prod.

I'm guessing there should be a webpack way of solving this ?