Bundle cannot load mode-json.js - SyntaxError: Unexpected token '<'

[DPleckauskas]

Problem

I am using React-Ace with webpack for building. Localhost the functionality works fine, the issue only occurs when building. I've tried to import webpack resolver however, when I add this I get 400+ errors so can not use it. What is the solution to this? I need the syntax checker for my application and this is preventing it from working.

Sample code to reproduce your issue

import ace from "ace-builds";
ace.config.set("basePath", "../../../node_modules/ace-builds/src-noconflict");
import AceEditor from "react-ace";

[DPleckauskas]

I've now installed file-loader via npm i --save-dev file-loader

And updated my imports to:

import ace from "ace-builds";
import "ace-builds/webpack-resolver";
import AceEditor from "react-ace";

Although using webpack to build produces 413 files + bundle.js, index and license. This is very large amount, is there anyway to avoid this?

[Narek20]

The issue can be related to mode disparity, When you use the package you should import corresponding modes For javascript you should add this line

import 'ace-builds/src-noconflict/mode-javascript'

And you should specify the correct mode for the component when you use it in your code like this.

 <AceEditor
        mode="javascript"
        theme="monokai"
        onChange={onChange}
        editorProps={{ $blockScrolling: true }}
      />

If the imported mode and the mode name specified in the props unmatch, the same error will be caused.

[carlomorelli]

In a similar situation, although for me is 'json' mode. My imports:

import ace from 'ace-builds/src-noconflict/ace';
import 'ace-builds/css/ace.css';
import 'ace-builds/css/theme/cloud_editor.css';
import 'ace-builds/css/theme/cloud_editor_dark.css';
import 'ace-builds/src-noconflict/mode-json';

i see the Code editor component loaded with syntax highlighting and theme, but errors in Json are not detected (red X on the line numbers). On the console I can see these messages:

Uncaught SyntaxError: Unexpected token '<' (at ext-language_tools.js:1:1)
Refused to execute script from 'https://xxxxx/static/js/worker-json.js' because its MIME type ('text/html') is not executable.
Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://xxxxx/static/js/worker-json.js' failed to load.

I've also tried to import explicitly ace-builds/src-noconflict/ext-language-tools but nothing changes. Any hint on what should I change?

[nightwing]

@carlomorelli here is an example of using react-ace with ace-linters, which is the official replacement for workers https://github.com/ajaxorg/ace-samples/tree/master/samples/react-ace-example