Enable dynamic loading of modes

[arunkumar413]

Enable dynamic loading of modes

I'm seeing these error messages in the console

index.js:1 Unable to infer path to ace from script src, use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes or with webpack use ace/webpack-resolver
console.<computed> @ index.js:1
arunkumar413-fantastic-waddle-r5wj74vvvp25j46-3000.preview.app.github.dev/:1 Refused to execute script from 'https://arunkumar413-fantastic-waddle-r5wj74vvvp25j46-3000.preview.app.github.dev/mode-html.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
arunkumar413-fantastic-waddle-r5wj74vvvp25j46-3000.preview.app.github.dev/:1 Refused to execute script from 'https://arunkumar413-fantastic-waddle-r5wj74vvvp25j46-3000.preview.app.github.dev/mode-css.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
arunkumar413-fantastic-waddle-r5wj74vvvp25j46-3000.preview.app.github.dev/:1 Refused to execute script from 'https://arunkumar413-fantastic-waddle-r5wj74vvvp25j46-3000.preview.app.github.dev/snippets/javascript.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Sample code to reproduce your issue

      <AceEditor
        mode="html"
        theme="github"
        onChange={handleChange}
        name="html-editor"
        editorProps={{ $blockScrolling: true }}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: true,
        }}
      />

References

Progress on: #

[jmc420]

If you add the import of your theme, this error goes away:

import "ace-builds/src-min-noconflict/mode-html";

I'm using rollup to build my react app rather than webpack.

I also did the ace.config.set('basePath', 'path') so that it loaded the search box code.

This can be done by doing this:

1. Import ace config

import config from "ace-builds/src-min-noconflict/ace";

2. set basePath using this code

const [initialised, setInitialised] = useState<boolean>(false);

useEffect(() => {
        if (!initialised) {
            const location = window.location;
            const url = location.protocol + "//" + location.hostname + ":" + location.port + "/ace/";

            config.config.set("basePath", url);
            setInitialised(true);
        }
    }, [])

3. In your server set up /ace to server the code from node_modules.

In Express add this code:

app.use('/ace', express.static('node_modules/ace-builds/src-min-noconflict/'))