search

paperjs / paper.js

The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey
http://paperjs.org
Other
14.42k stars 1.22k forks source link

Using paper.js in Electron Renderer #1377

Open sqwk opened 7 years ago

sqwk commented 7 years ago

I am slightly confused by the the different paper.js versions. What are they and I why do I need them?

I am compiling an Electron app and would like to use paper.js in the renderer, which should behave just like a browser context.

However, webpack fails with the following error:

Module not found: Error: Can't resolve 'jsdom/lib/jsdom/living/generated/utils' in 'foo/node_modules/paper/dist/node'

Is there a way to prevent paper looking for these node dependencies? Installing paper-jsdom or paper-jsdom-canvas works, but produces a lot of warnings instead. Do these versions simply shim native browser methods?—Do they get ignored when running inside the browser or do they effectively make paper run slower when not needed?

lehni commented 7 years ago

Could you share a sample project for me to reproduce these problems with Electron, perhaps has a Github project? I need to look into it in order to be able to say more.

sqwk commented 7 years ago

The issue happens as soon as the webpack config uses: target: 'electron-renderer'instead of the default target: 'web'.

Unfortunately, the electron-renderer target has both node and browser characteristics, making paper think that it is running inside node. It then tries to load jsdom, which it doesn't really need.

lehni commented 6 years ago

I'm still hoping for a sample project for simple reproduction, as outlined above. Could you provide one? If not then I will have to close this issue...

lehni commented 6 years ago

@sqwk see here for a reason why I need this, or will have to close the issue otherwise:

https://github.com/paperjs/paper.js/issues/1381#issuecomment-335145678

That's why I need your actual configuration for reproduction of the bug. That's how all bug reports work. A lot has been written about how to correctly and effectively submit bugs to open-source projects. How to Report Bugs Effectively for example is still a good read.

If you like to get bugs in open-source projects fixed by people who volunteer and put their own spare time in, then the least you can do is help out as much as you can to smooth the path to the reproduction and understanding of the error.

If I have to go digging for it, then it's quite simple: I won't, and will close this bug unresolved instead.

So please provide a reproducible test-case, e.g. as a git repo with a package.json and all the files required for this to occur. It will take you 5 minutes of your time, and will guarantee that I can see what you see go wrong. Thanks.

sqwk commented 6 years ago

@lehni Try this one: https://github.com/sqwk/paper-electron-test-case

Compile with npm run build:watch or npm run build:dev Then run npm run electron in a second Terminal/CMD window. (It will fail during the inital build). As soon as you install paper-jsdom, it will work, but with a lot of warnings.

Again, does installing paper-jsdom or paper-jsdom-canvas simply shim native browser methods?—Do they get ignored when running inside the browser or do they effectively make paper run slower when not needed?

psychobolt commented 6 years ago

Are you using pure JavaScript or with Acorn? In my case, JavaScript only, I am able to import from 'paper/dist/paper-core' without any errors. However, I am getting warnings because of setting webpack's target to 'electron-renderer':

WARNING in ./node_modules/jsdom/lib/jsdom/utils.js 216:21-40 Critical dependency: the request of a dependency is an expression @ ./node_modules/jsdom/lib/jsdom/utils.js @ ./node_modules/jsdom/lib/jsdom.js @ ./node_modules/paper/dist/node/self.js @ ./node_modules/paper/dist/paper-core.js @ ./node_modules/@psychobolt/react-paperjs/dist/index.dev.js @ ./node_modules/@psychobolt/react-paperjs/dist/index.js @ ./src/App/Editor/Canvas/Paper/Paper.component.js @ ./src/App/Editor/Canvas/Paper/index.js @ ./src/App/Editor/Canvas/Canvas.component.js @ ./src/App/Editor/Canvas/index.js @ ./src/App/Editor/Editor.component.js @ ./src/App/Editor/index.js @ ./src/App/App.component.js @ ./src/App/index.js @ ./src/index.js @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server react-hot-loader/patch ./src/index.js

WARNING in ./node_modules/paper/dist/node/extend.js 48:32-39 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted @ ./node_modules/paper/dist/node/extend.js @ ./node_modules/paper/dist/paper-core.js @ ./node_modules/@psychobolt/react-paperjs/dist/index.dev.js @ ./node_modules/@psychobolt/react-paperjs/dist/index.js @ ./src/App/Editor/Canvas/Paper/Paper.component.js @ ./src/App/Editor/Canvas/Paper/index.js @ ./src/App/Editor/Canvas/Canvas.component.js @ ./src/App/Editor/Canvas/index.js @ ./src/App/Editor/Editor.component.js @ ./src/App/Editor/index.js @ ./src/App/App.component.js @ ./src/App/index.js @ ./src/index.js @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server react-hot-loader/patch ./src/index.js

WARNING in ./node_modules/paper/dist/node/canvas.js Module not found: Error: Can't resolve 'canvas' in 'D:\psychobolt-github\ProtoAtelier\node_modules\paper\dist\node' @ ./node_modules/paper/dist/node/canvas.js 21:17-34 @ ./node_modules/paper/dist/node/self.js @ ./node_modules/paper/dist/paper-core.js @ ./node_modules/@psychobolt/react-paperjs/dist/index.dev.js @ ./node_modules/@psychobolt/react-paperjs/dist/index.js @ ./src/App/Editor/Canvas/Paper/Paper.component.js @ ./src/App/Editor/Canvas/Paper/index.js @ ./src/App/Editor/Canvas/Canvas.component.js @ ./src/App/Editor/Canvas/index.js @ ./src/App/Editor/Editor.component.js @ ./src/App/Editor/index.js @ ./src/App/App.component.js @ ./src/App/index.js @ ./src/index.js @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server react-hot-loader/patch ./src/index.js

WARNING in ./node_modules/paper/dist/node/extend.js require.extensions is not supported by webpack. Use a loader instead. @ ./node_modules/paper/dist/paper-core.js 14786:1-28 @ ./node_modules/@psychobolt/react-paperjs/dist/index.dev.js @ ./node_modules/@psychobolt/react-paperjs/dist/index.js @ ./src/App/Editor/Canvas/Paper/Paper.component.js @ ./src/App/Editor/Canvas/Paper/index.js @ ./src/App/Editor/Canvas/Canvas.component.js @ ./src/App/Editor/Canvas/index.js @ ./src/App/Editor/Editor.component.js @ ./src/App/Editor/index.js @ ./src/App/App.component.js @ ./src/App/index.js @ ./src/index.js

So far the canvas rendering seems fine with the library, but I'd like the warnings to go away and handle any future compatibility cases. Possibly a workaround is to create a separate entry and use the web targeted bundle, with exception of node environments e.g. (Jest).

sqwk commented 6 years ago

Regarding the Acorn question: No, actually I am using Typescript, but those warnings look fairly familiar, so I guess the problem is the same.