Malformed JSON source map in `../../node_modules/ace-builds/src-noconflict/worker-coffee.js`

[dennisat]

Description:

I am getting the following warning when I build my React application:

WARNING in ../../node_modules/ace-builds/src-noconflict/worker-coffee.js (../../node_modules/file-loader/dist/cjs.js?esModule=false!../../node_modules/ace-builds/src-noconflict/worker-coffee.js)
Module Warning (from ../../node_modules/react-scripts/node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'data:application/json;base64,': SyntaxError: Unexpected end of JSON input
 @ ../../node_modules/ace-builds/webpack-resolver.js 259:50-121
 @ ../ui-components/dist/MarkdownEditor/index.js 11740:25-63
 @ ./src/core/dyna-cms/components/block-editors/EditorMarkdown/EditorMarkdown.tsx 7:0-67 102:41-55 137:37-51
 @ ./src/core/dyna-cms/components/block-editors/EditorMarkdown/index.tsx 7:43-69
 @ ./src/core/dyna-cms/components/block-editors/index.ts 5:0-50 24:32-46
...

The warning is saying that the source map for the file ../../node_modules/ace-builds/src-noconflict/worker-coffee.js could not be parsed because it is in a malformed JSON format.

I believe this is a bug in the ace-builds package. Can you please investigate this issue?

Reproducing steps:

1. Install the ace-builds package "ace-builds": "^1.24.1".
2. Create a React application using Create React App.
3. Add the following code to your application:

import AceEditor from 'ace-builds/src-noconflict/ace';

const editor = new AceEditor();

4. Build your application.
5. You should see the warning message mentioned above.

I hope this helps! Let me know if you have any other questions.

[koiker]

I have the same issue. Updated to 1.28.0 don't solve the issue.

[marinsokol5]

Hey, do you need to use ace-builds for a specific reason? Because there is a package with just the source code of Ace, https://www.npmjs.com/package/ace-code, which would be better suited for a usage inside of a solution like Create React App.

[cjayyy]

Hey, do you need to use ace-builds for a specific reason? Because there is a package with just the source code of Ace, https://www.npmjs.com/package/ace-code, which would be better suited for a usage inside of a solution like Create React App.

A bit unrelated to OG; When using react-ace ace-builds are recommended and included. I believe adding ace-code next to it would unnecessarily enlarge the bundle (please correct me if I am wrong). Also I can't come up with a way how to use react-ace and ace-code together as those react components don't accept instances as props (mode and theme for example) but only strings. It seems incompatible, or am I missing something?