Failed to compile :(

[j2l]

What a wonderful editor and library to build it! Congrats Jinho (and your team I guess) :)

I was curious to build the master version on my Ubuntu 19.10 and at build time, I got:

npm WARN npm npm does not support Node.js v10.15.2
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8, 9.
npm WARN npm You can find the latest version at https://nodejs.org/

> @easylogic/editor@0.9.45 dev /media/Data/editor
> webpack-dev-server --config=webpack.dev.config.js --progress --open

10% building 1/1 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:8081/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /media/Data/editor
12% building 22/28 modules 6 active /media/Data/editor/node_modules/events/events.jsℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: Hash: f92d05deb5947faf1fdf
Version: webpack 4.43.0
Time: 32285ms
Built at: 05/29/2020 2:39:22 PM
                               Asset      Size  Chunks             Chunk Names
                        ./index.html  1.85 KiB          [emitted]  
3a8ca398e6a5c3b83f4de7c60843a9a0.png   4.7 KiB          [emitted]  
                          bundle.css   603 KiB    main  [emitted]  main
                             main.js  4.34 MiB    main  [emitted]  main
Entrypoint main = bundle.css main.js
[0] multi (webpack)-dev-server/client?http://localhost:8081 ./src/index.js 40 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8081] (webpack)-dev-server/client?http://localhost:8081 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/colorpicker/index.js] 1.31 KiB {main} [built]
[./src/csseditor/index.js] 1.91 KiB {main} [built]
[./src/index.js] 1.65 KiB {main} [built]
[./src/scss/index.scss] 39 bytes {main} [built]
[./src/util/index.js] 398 bytes {main} [built]
    + 691 hidden modules

ERROR in ./src/util/App.js
Module not found: Error: Can't resolve '../editor/Editor' in '/media/Data/editor/src/util'
 @ ./src/util/App.js 29:0-42 56:27-33
 @ ./src/util/index.js
 @ ./src/index.js

ERROR in ./src/csseditor/ui/control/LayerTab.js
Module not found: Error: Can't resolve './ComponentItems' in '/media/Data/editor/src/csseditor/ui/control'
 @ ./src/csseditor/ui/control/LayerTab.js 29:0-46 61:24-38
 @ ./src/csseditor/ui/control/ObjectList.js
 @ ./src/csseditor/editor/index.js
 @ ./src/csseditor/index.js
 @ ./src/index.js

ERROR in ./src/csseditor/ui/property/index.js
Module not found: Error: Can't resolve './KeyframeProperty' in '/media/Data/editor/src/csseditor/ui/property'
 @ ./src/csseditor/ui/property/index.js 17:0-50 96:20-36
 @ ./src/csseditor/ui/control/Inspector.js
 @ ./src/csseditor/editor/index.js
 @ ./src/csseditor/index.js
 @ ./src/index.js
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 1.8 KiB {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--6-3!src/scss/index.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js?!./src/scss/index.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./src/scss/index.scss 623 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.35 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/url-escape.js] 460 bytes {mini-css-extract-plugin} [built]
    [./src/scss/images/icon128.png] 82 bytes {mini-css-extract-plugin} [built]
ℹ ｢wdm｣: Failed to compile.

localhost:8080 is used by a running container so 8081 is legit. BTW, I noted it opens a browser page which calls scripts d-collect.jennifersoft.com and googletagmanager. Is it really needed to run it locally?

Thank you very much again for this wonderful project :) Have a great day, from France.

[easylogic]

hi @j2l

Thanks for your reporting.

I will try to test it.

[easylogic]

@j2l Could you test master branch ?

I modify webpack-dev-server's default port to 8081.

npm install 
npm run dev 

[j2l]

Oh, I didn't know the port was hard coded somewhere, maybe this is it. Thank you Jinho!

I tested the master branch actually.

[j2l]

Same error unfortunately :cry: Looking closer I see that:

ERROR in ./src/util/App.js
Module not found: Error: Can't resolve '../editor/Editor' in '/media/Data/editor/src/util'

Is it missing? Or renamed?

[j2l]

I also tried node main.js and it raised an error about electron. I expected to run in the browser. BTW, thank you for helping me now. I guess it's 11:45pm for you right?

[easylogic]

Did you execute command npm run dev in 'editor' directory ?

[j2l]

yes

[easylogic]

i found a problem.

[j2l]

I wrote another bug report for animation. Hope you don't mind.

Please don't feel pushed. I'm just reporting when I find a bug, and I don't expect everything to be fixed right now :smiley_cat:

[easylogic]

Thank you. I ran it only on mac, but when running on linux it found a problem. I'll let you know if it is modified one by one.

[j2l]

Thank you very much. I'll wait. No problem. I'm really enjoying the quality of your work.

[easylogic]

I fixed this issue at master branch.

[j2l]

Wow ! You fixed all issues so fast! Thank you so much!

May I ask for something I think is missing?

[easylogic]

@j2l
Yes, you can ask anything.

[j2l]

Thank you! I think your tool would greatly help animators to draw characters above movement video, then morph (track point position) of the drawn path layer. To do this, I wonder if it would be possible to add the video layer and play/sync it with your timeline "play" button? This might be tricky to sync. I think video.js has a function to get the play head position.

If it's too hard, don't hesitate to let me know.

[easylogic]

I think that video can be added similarly to the image form. Let's also implement js properties that can be controlled in relation to video.

[j2l]

That would be fantastic!

[j2l]

If it helps, I offer you to translate the docs in french. Let me know

[easylogic]

If it helps, I offer you to translate the docs in french. Let me know

wow, very nice.

Currently, a lot of features have been added to the existing manual, and a new manual is being prepared. May I request you when the English translation is complete?

[j2l]

Sure!

[j2l]

I'd love to help you on the code too, but I'm not that great at coding :smile:

[easylogic]

It is quite good just to have interest in this tool. Since I am a developer, this is my first time making a tool in the design domain.

[j2l]

I was looking for a project like this. I started with grapesJS and hurt the timeline problem.

You've gone far beyond expectations with this tool. What a potential! The interface of the SVG filters also blew my minds.

[j2l]

I'll try to take time to learn sapa. Do you have docs about it?

[easylogic]

Thank you for the good words. I started the project because I wanted to maximize the expressive power of the web.

sapa is here. https://github.com/easylogic/sapa

The official site of sapa is also being prepared.

[j2l]

Yes, you're definitely achieving the goal of encouraging the expressive power of the web!

I understand sapa has a huge potential too. I'm not coder enough to evaluate it so far, but the result with studio expresses it in details I can understand. It really seems easy for you to build this.

Is there the possibility of a "dev mode" in studio that reveals name of functions, filename, etc, to learn sapa through studio? A little bit like Blender does when you hover on a menu or check the python console.

[easylogic]

As I am writing a studio, I am refining the internal structure of sapa and making it into a complete library. I think it will take more time than you think to prepare for features like dev mode.

[j2l]

It makes sense. Sorry, my designer's eye is not used to evaluate the difficulties of the code, :smiley_cat: It' better to focus on your plan.

[j2l]

Hello @easylogic , Yesterday and the day before were special. Please let me know when video layer is working :smile:

[easylogic]

hi @j2l

i am making VideoLayer .

it is in feature/video branch.

i am testing to play video in timeline ui.

[j2l]

Yes! Got it! I can add a video. Great! Can't wait to be able to play it in the timeline and export synced SVG. :smile:

[easylogic]

@j2l It is not easy to control the video itself. It may take more longer time to put it in the timeline.

[j2l]

I understand. Thank you for your honesty. I can wait a little more, no problem :smile_cat: