Tui.editor: Fail to build project following README

[kelvinkoko]

Summary

Failed to build project while follow the master branch readme

Version

latest master

Additional context

I follow the readme:

$ git clone https://github.com/{your-personal-repo}/tui.editor.git
$ npm install
$ cd apps/editor
$ npm install

But when i run
npm run serve
i have the following error:

    ERROR in ./src/js/convertor.js
    Module not found: Error: Can't resolve '@toast-ui/to-mark' in '/xxxx/tui.editor/apps/editor/src/js'
     @ ./src/js/convertor.js 5:0-39 164:19-25
     @ ./src/js/editor.js
     @ ./src/js/index.js

    ERROR in ./src/js/toMarkRenderer.js
    Module not found: Error: Can't resolve '@toast-ui/to-mark' in '/xxxx/tui.editor/apps/editor/src/js'
     @ ./src/js/toMarkRenderer.js 1:0-39 42:15-21 42:39-45
     @ ./src/js/editor.js
     @ ./src/js/index.js

    ERROR in ./src/js/editor.js
    Module not found: Error: Can't resolve '@toast-ui/toastmark' in '/xxxx/tui.editor/apps/editor/src/js'
     @ ./src/js/editor.js 75:0-48 182:25-34
     @ ./src/js/index.js

    ERROR in ./src/js/markdownToHTML.js
    Module not found: Error: Can't resolve '@toast-ui/toastmark' in '/xxxx/tui.editor/apps/editor/src/js'
     @ ./src/js/markdownToHTML.js 1:0-63 6:19-25 10:19-35
     @ ./src/js/editor.js
     @ ./src/js/index.js

    ERROR in ./src/js/mdPreview.js
    Module not found: Error: Can't resolve '@toast-ui/toastmark' in '/xxxx/tui.editor/apps/editor/src/js'
     @ ./src/js/mdPreview.js 11:0-55 40:23-39
     @ ./src/js/editor.js
     @ ./src/js/index.js

    ERROR in ./src/js/convertor.js
    Module not found: Error: Can't resolve '@toast-ui/toastmark' in '/xxxx/tui.editor/apps/editor/src/js'
     @ ./src/js/convertor.js 6:0-63 36:24-30 40:22-38
     @ ./src/js/editor.js
     @ ./src/js/index.js

(xxxx is my local folder path)
Any extra step needed to build the project?

[seonim-ryu]

@kelvinkoko This error is because the bundle files of the libraries used in the editor are not created. So you have to install npm on each library, run the build, and build the Editor. Let me explain the process in more detail.

First, you need to go to each library folder in the Editor's root(tui.editorfolder). In the example, take toastmark as an example.

- tui.editor/
  - libs/
    - squire/ ...
    - to-mark/ ...
    - toastmark/ ...

```sh
$ cd libs/toastmark && npm install

You need to build the bundle file after installing npm. Each library has a different build script, so in this case you need to run the script in [`package.json` at the root](https://github.com/nhn/tui.editor/blob/b5236451ca54bf8d7e60327b08131c3189321c40/package.json#L11-L24).

```sh
$ cd ../../ && npm run build:toastmark

This will create toastmark's build file and do the same for squire and to-mark.

I couldn't consider missing this process. This should be added to the documentation. And now I think it would be convenient to combine npm install script with the build script. I'll improve this later. 🤔

Thanks for reporting!

[kelvinkoko]

@seonim-ryu Got it, thank you for your detail instruction!~ I will try it.
Yes, it will be great if having a single build command :)

[danieldjewell]

I too found that the instructions in README.md were not working ...

• First, NPM complained that package.json (in the repo root) was invalid because it didn't have a version number...

https://github.com/nhn/tui.editor/blob/dba0438df7bb82265591fee3c317625198ee7daa/package.json#L1-L4

• I added a version number (e.g. "version": "0.1.0",) and NPM was still having issues ... so I tried yarn and had some more success.

  • Running yarn/npm run test in the apps.editor directory resulted in an error from karma that ChromeHeadless was unavailable.

At this point, I'm not sure what's going on - but I'm thinking there are issues with the layout of the project... specifically, some things to consider:

• Many of the dependencies in the project are old.... and have many vulnerabilities
  
  
  
  • Running npm audit resulted in many vulnerabilities:
    
    > libs/squire
    
    >> added 229 packages from 221 contributors and audited 229 packages in 6.542s found 15 vulnerabilities (7 low, 4 moderate, 2 high, 2 critical)
    
    > libs/toastmark
    
    >> added 1009 packages from 1510 contributors and audited 1080 packages in 30.005s found 38363 vulnerabilities (38362 low, 1 high)
    
    > libs/to-mark
    
    >> added 1419 packages from 1267 contributors and audited 1490 packages in 43.311s found 121 vulnerabilities (56 low, 25 moderate, 37 high, 3 critical)
    
    > apps/editor
    
    >>added 4690 packages from 2607 contributors and audited 2039 packages in 148.597s found 62 vulnerabilities (11 low, 25 moderate, 24 high, 2 critical)
  
  

Now, I have not looked at the particular vulnerabilities and their impacts (the impact may very well be zero) -- and it's highly likely that, due to the way node/npm dependencies work, the vulnerabilities are somewhere way deep in the dependency graph/tree. Still, however, it's a concern.

Also, unless I'm misreading something, the dependencies seem WAY out of date: try running an npm outdated --depth=1 in the apps/editor folder... It gets even more interesting at depth levels 2, 3, and 4.

@seonim-ryu I would suggest:

• Consider setting up some form of CI (Travis/pick one.) ... This will, among other things:

  1. Force any "hidden" dependencies out of the shadows by always starting a build and test from a 100% clean/neutral environment - e.g. there might be programs/libraries installed on your dev system that aren't in the docs (It happens - I try to avoid it, I still do it. The NPM/Yarn architecture -in theory- is supposed to help avoid that but it can still happen - especially if things get installed globally)
  2. Give you great insight on commits - it also helps preserve the idea that the master branch should be 100% working 100% of the time. (e.g. if a proposed commit to master doesn't build/work/past tests, it doesn't break the codebase.)
  • I see that your most recent commit dba0438 is working on Github Workflows -- I'm not quite sure what's going on with the cron job. Check out https://github.com/actions/starter-workflows/blob/master/ci/node.js.yml for an example for a generic Node project. The major idea is that it should trigger on every push to master and every pull request to master...
  • Also, because you have to essentially write all the commands to set the package up, it makes writing install documentation really easy :grin:
  • Don't forget to test on multiple platforms ;) (certanly a few big variants of linux would be good - debian/ubuntu... etc. Node generally doesn't have cross-arch issues ... e.g. arm/aarch64/mips)

• Really consider some of the dependencies and the structure... The whole NPM/Yarn ecosystem revolves around the idea of being able to download a repo, run npm/yarn install and then go... From the project root.

• Double check the use of Bower in some of the dependencies - I'm 99% sure it's considered EOL.

Just some thoughts :)