How to correctly import libaries src-min and lib/ace?

[Shane Dev]

Hello,

I managed to successfully import [src-min-noconflict](https://github.com/ajaxorg/ace-builds/tree/master/src-min-noconflict), see [code](https://github.com/shanemcandrewai/smdb-ace/blob/ace-builds/src-min-noconflict/ace/docs/scripts/main.js) and resulting [web app](https://shanemcandrewai.github.io/smdb-ace/) works.

However, when I try similar code for [src-min](https://github.com/ajaxorg/ace-builds/tree/master/src-min) see [code](https://github.com/shanemcandrewai/smdb-ace/blob/ace-builds/src-min/ace/docs/scripts/main.js), the web app works sometimes and other times fails with error  "Uncaught (in promise) ReferenceError: ace is not defined"

When I try similar code for [ ace/lib/ace/ace ](https://github.com/ajaxorg/ace/tree/v1.4.12/lib/ace) see [code](https://github.com/shanemcandrewai/smdb-ace/blob/ace/lib/ace/ace/docs/scripts/main.js), the web app fails with error  "Uncaught (in promise) ReferenceError: ace is not defined"

How can I correctly import these libaries src-min and lib/ace into my data-main Entry Point?

[Harutyun Amirjanyan]

Hi

if you are using webpack, the best solution is to use src-noconflict or webpack-resolver similar to https://github.com/ajaxorg/ace/blob/master/demo/webpack/demo.js#L12 

[Shane Dev]

Hi,

I tried adapting the ace webpack demo to ace/lib/ace/ace, see my code but the resulting web app fails with error -

Uncaught ReferenceError: ace is not defined

    <anonymous> webpack:///./scripts/ace-builds/webpack-resolver.js?:2

    js https://shanemcandrewai.github.io/smdb-ace/dist/bundle.js:18

    __webpack_require__ https://shanemcandrewai.github.io/smdb-ace/dist/bundle.js:3243

    <anonymous> webpack:///../src/demo.js?:6

    js https://shanemcandrewai.github.io/smdb-ace/dist/bundle.js:3219

    __webpack_require__ https://shanemcandrewai.github.io/smdb-ace/dist/bundle.js:3243

    <anonymous> https://shanemcandrewai.github.io/smdb-ace/dist/bundle.js:3346

    <anonymous> https://shanemcandrewai.github.io/smdb-ace/dist/bundle.js:3348

Any ideas what went wrong?

[Harutyun Amirjanyan]

ace-builds and ace/lib cannot work together, it will work if you import everything from ace-builds

[Shane Dev]

You're right webpack-resolver.js is only for  ace-builds. I have created a new branch which attempts to configure lib/ace  and disables  webpack-resolver.js When I build it with npx webpack, I receive 11 similar warnings such as

WARNING in ./src/ace/lib/ace/ace.js 67:18-25
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./src/index.js 4:0-36 6:0-55 19:13-21 27:30-35

When I browse the resulting web app, I see two errors -

Uncaught (in promise) Error: Cannot find module './theme/textmate'
Uncaught (in promise) Error: Cannot find module 'ace/mode/json'

and I notice the syntax highlighting and theme don't work.

Do you how I can make them work with webpack and lib/ace?

[Harutyun Amirjanyan]

lib/ace has some old code that will prevent it from working with webpack and other modern bundlers.

Why do you want to use lib/ace instead of ace-builds?  We are planning to remove that code soon, but it will take some time to be tested and released as a new npm package.

[Shane Dev]

Hi Harutyun, thanks for the quick response! The ace.js files in ace-builds are quite large and the download time is noticeable. I was going to investigate whether any of the dependencies of ace/lib/ace/ace.js could be removed, tree-shaken or some other webpack optimisation technique in order to improve the user experience.

Is this feasible?

How do you plan to replace old code in ace/lib/ace/ to enable direct building with webpack?

[Harutyun Amirjanyan]

The plan is to convert to either commonjs modules like in this branch https://github.com/ajaxorg/ace/blob/cjs/src/ace.js or to mjs files with es6 modules.

But the ace.js file in ace-builds is only 362kb when minified, i doubt that it is possible to reduce it by much by treeshaking. Are you looking to reduce its size or were you including other files in your build?

[Shane Dev]

Hi Harutyun,

To answer your question - I plan to add other libraries besides ace to my web app and hopefully maintain an acceptable user experience. Hence I am investigating how to build optimised bundle(s).

I am still working on bundling ace/lib/ace/ directly with webpack. I think my issue is webpack related so I posted a question on SO.

Some questions for you -

1. It seems ace/lib/ace was modularised using the AMD Simplified CommonJS wrapping technique. What would be the benefit of converting the library CommonJS (as you suggested) which has an synchronous API?

2. You suggest using webpack to create the bundle from src-min-noconflict but most of the core code is already bundled in src-min-noconflict/ace.js so how would rebundling with webpack be a benefit?

3. What is the purpose of statements such as exports.require = require; in the library?