FIXED: Error "ReferenceError: ace is not defined" in React ACE editor sample on the KVision docs

[tfonrouge]

After importing the dependencies on the build.gradle.kts file and following the indication on the docs:

class App : Application() {
    init {
        require("ace-builds/webpack-resolver") // required since webpack 5
    }
    // ...
}

I was getting the error "ReferenceError: ace is not defined" on the console. After a little search for the error on the github's package for a solution the following fixed the issue on KVision (https://github.com/securingsincity/react-ace/issues/1233):

class App : Application() {
    init {
        require("ace-builds/src-noconflict/ace") // required to fix "ReferenceError: ace is not defined" error
        require("ace-builds/webpack-resolver") // required since webpack 5
    }
    // ...
}

Maybe the KVision docs need to be updated.

[rjaros]

I've re-checked all the react code in the guide and fixed some incompatibilities with the current kotlin-react. But I couldn't reproduce your issue with ace reference. My example project works fine without any additional require calls. Perhaps you have more complex project setup or some other conflicting dependencies.

[tfonrouge]

I'll try to write a small, concise sample, may be I've something conflicting in my dependencies.

[tfonrouge]

Hello, I've build with the current KVision plugin a small project showing the problem that I see in my configuration (IntelliJ Idea on Linux), don't know what can be the problem. But if I declare the 'require("ace-builds/src-noconflict/ace")' it runs ok

The project is at: https://github.com/tfonrouge/KVision-react-test.git

Thanks in advance for your support !

[rjaros]

It's a problem with initialization and imports order. To fix your case you can just remove require calls in the Application init block (even require("ace-builds/webpack-resolver") line, as it doesn't seem to be required any more). You can even remove ace-builds dependency from your project. In case you need ace-builds for other reasons, just add require("react-ace") as the first line to fix the order of imports.

[rjaros]

This is probably what you need for your configuration of Ace editor:

    init {
        require("react-ace")
        require("ace-builds/src-noconflict/mode-html")
        require("ace-builds/src-noconflict/theme-tomorrow")
        require("ace-builds/src-noconflict/ext-language_tools")
        require("ace-builds/webpack-resolver")
    }

[tfonrouge]

Yes, seems like a problem with the order of the imports, the require("ace-builds/webpack-resolver") needs to be just after the require("react-ace").

After removing the 'setOptions' and his related require's , the ace-editor works just with this:

val AceEditor: ComponentClass<ReactAceProps>
    get() {
        val result = require("react-ace").default
        require("ace-builds/webpack-resolver")
        return result
    }

I'll close the issue with this.

Thank you for your support !

Teo