React-ace: Could not load worker TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

[dynastywind]

Problem

I'm using react-ace in my project but encounter a problem:

Could not load worker TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
    at new WorkerClient (index.js:16800)
    at Mode.createWorker (javascript.js:1029)
    at EditSession.$startWorker (index.js:9120)
    at EditSession.$onChangeMode (index.js:9076)
    at EditSession.<anonymous> (index.js:9057)
    at AppConfig.exports.loadModule (index.js:3684)
    at EditSession.setMode (index.js:9046)
    at ReactAce.componentDidMount (ace.js:93)
    at ReactCompositeComponent.js:264
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)

This problem only occur when I use modes that is related to javascript (javascript, coffee, etc.)

Sample code

import AceEditor from "react-ace";
import 'brace';
import 'brace/mode/javascript';
import 'brace/theme/github';

class Test extends React.Component<any, any> {
    render() {
        <AceEditor mode="javascript" theme="github" name="name" />
    }
}

I've tried everything I can come up with. Is there anyone who can help to solve this problem? Thanks!

[dynastywind]

I solved this problem which is caused by a configuration in webpack.config.js.

[securingsincity]

@dynastywind do you mind adding what you changed in case others run into this issue?

[dynastywind]

@securingsincity Sure.

I have below settings before with "mainFields" set to solve the commented problem. Actually it's copied from somewhere on Internet. This field breaks the working logic of react-ace's javascript-related modes. After I removed this field, my program is back to normal.

resolve: {
    extensions: ['.js', '.ts', '.tsx'],
    // Fix webpack's default behavior to not load packages with jsnext:main module
    // https://github.com/Microsoft/TypeScript/issues/11677
    mainFields: ['main']
}

[krutilin]

@securingsincity I faced the same issue. Is it possible to overcome it without modifying webpack.config? Because I have the project created using create-react-app and need to "eject" it to access webpack.config.
( the same issue is in the brace repo https://github.com/thlorenz/brace/issues/54, but brace author said "needs to be fixed in Ace")

[hans-permana]

I observed the same warning message on my console, but did not encounter any actual issues when using react-ace editor. It may be that I have not used it rigorously enough to notice anything. Can anybody tell me if there is a noticeable issue that comes with this warning message?

[dynastywind]

@hans-permana Can you still use syntax check in the editor after you find this warning? I remember that there was no error sign popping up if I type something illegal in a JS file.

[ShawnLin013]

Just found a workaround by adding following snippet to webpack config from https://github.com/thlorenz/brace/issues/97

resolve: {
    mainFields: ["browser", "module", "main"]
},

[intrepidOlivia]

Does anyone know if this was ever filed as an issue with Ace?

I'm running into this problem, but it's occurring during Mocha testing instead of normal rendering, and fiddling with the webpack doesn't fix it. :(

[joshyudeep]

I'm running into this problem, but it's occurring during Mocha testing instead of normal rendering, and fiddling with the webpack doesn't fix it. :(

bump. running into the same issue w/ jest and testing-library/react :(