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

47 views
Skip to first unread message

Shane Dev

unread,
Aug 27, 2021, 10:28:40 AMAug 27
to Ajax.org Cloud9 Editor (Ace)
Hello,


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

unread,
Aug 27, 2021, 2:33:05 PMAug 27
to ace-d...@googlegroups.com
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

unread,
Aug 28, 2021, 12:27:58 AMAug 28
to Ajax.org Cloud9 Editor (Ace)
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
    <anonymous> webpack:///../src/demo.js?:6

Any ideas what went wrong?

Harutyun Amirjanyan

unread,
Aug 29, 2021, 9:48:29 AMAug 29
to ace-d...@googlegroups.com
ace-builds and ace/lib cannot work together, it will work if you import everything from ace-builds

Shane Dev

unread,
Aug 30, 2021, 3:46:07 PMAug 30
to Ajax.org Cloud9 Editor (Ace)
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

unread,
Aug 30, 2021, 4:03:45 PMAug 30
to ace-d...@googlegroups.com
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

unread,
Aug 30, 2021, 5:41:50 PMAug 30
to Ajax.org Cloud9 Editor (Ace)
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

unread,
Aug 30, 2021, 6:00:04 PMAug 30
to ace-d...@googlegroups.com
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

unread,
Sep 5, 2021, 9:35:37 AMSep 5
to Ajax.org Cloud9 Editor (Ace)
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?
Reply all
Reply to author
Forward
0 new messages