Open DPleckauskas opened 2 years ago
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?
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.
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?
@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
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