.split not a function warning

[sinwailam193]

Problem

Currently after downloading the newly released of react-ace v8.0.0, there is an error in the console that renders this:

It seems to be caused by react-ace when it tries to load brace if ace is not already imported.

Sample code to reproduce your issue

<AceEditor
                ref={this.aceEditor}
                focus
                showPrintMargin
                showGutter
                highlightActiveLine
                wrapEnabled
                mode="javascript"
                theme="cobalt"
                name="editor"
                width={editorWidth}
                height={editorHeight}
                onChange={this.onChange}
                fontSize={16}
                value={code}
                editorProps={{
                    $blockScrolling: true
                }}
                setOptions={{
                    useWorker: false,
                    scrollPastEnd: true
                }}
                commands={[{
                    name: "Run Snippet",
                    bindKey: { win: "Ctrl-Enter", mac: "Command-Enter" },
                    exec: this.handleConsole
                },
                {
                    name: "Submit Snippet",
                    bindKey: { win: "Ctrl-Shift-Enter", mac: "Command-Shift-Enter" },
                    exec: this.onHandleSubmit
                }]}
            />

References

https://github.com/ajaxorg/ace/pull/4090

Progress on: #

[rohitcoder]

Does someone have a good solution for this?

[lastnameswayne]

I am having this problem also, it breaks my typescript app. I am using dynamic imports with next.js

const Ace = dynamic( async () => { const ace = await import('react-ace'); require('ace-builds') require('ace-builds/src-noconflict/mode-javascript'); require('ace-builds/src-noconflict/mode-python'); require('ace-builds/src-noconflict/mode-java'); require('ace-builds/src-noconflict/theme-xcode'); require('ace-builds/src-noconflict/theme-dracula.js'); return ace; }, { loading: () => ( <Spinner></Spinner> ), ssr: false, })

I am trying to set the mode with an using useState-hook in React. I think the fact that it updates the state is what casues the problem:

mode= {language ? language : 'python'}

Is it possible to fork this and change the types of split? or instead add a @ts-ignore?