# How to install p5.play JS library **URL:** https://discourse.roots.io/t/how-to-install-p5-play-js-library/12514 **Category:** sage **Tags:** sage9 **Created:** 2018-05-21T16:07:35Z **Posts:** 11 ## Post 1 by @aitor — 2018-05-21T16:07:35Z Sorry for the very begginer question. How should I install p5.play libray in Sage 9? I tried `yarn add p5.play` > **[molleindustria/p5.play](https://github.com/molleindustria/p5.play)** > > p5.play - A p5.js library for games and playthings But it isn’t in the NPM registry. Thanks! --- ## Post 2 by @alwaysblank — 2018-05-21T16:56:01Z Yarn supports adding packages from arbitrary locations (i.e. Github repos): [https://yarnpkg.com/lang/en/docs/cli/add/](https://yarnpkg.com/lang/en/docs/cli/add/). All you should need to do is run: ``` yarn add git@github.com:molleindustria/p5.play.git ``` --- ## Post 3 by @aitor — 2018-05-21T17:56:49Z I’ve read yarn docs and the command seems to be OK but extrange things happen: ``` $ yarn add git@github.com:molleindustria/p5.play.git yarn add v1.6.0 [1/5] 🔍 Validating package.json... [2/5] 🔍 Resolving packages... Couldn't find any versions for "git" that matches "github.com:molleindustria/p5.play.git" ? Please choose a version of "git" from this list: (Use arrow keys) ❯ 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0 [3/5] 🚚 Fetching packages... [4/5] 🔗 Linking dependencies... warning "p5 > grunt-mocha@1.0.4" has unmet peer dependency "grunt@>=0.4.0". warning " > stylelint-webpack-plugin@0.10.4" has incorrect peer dependency "webpack@^1.13.2 || ^2.7.0 || ^3.11.0 || ^4.4.0". [5/5] 📃 Building fresh packages... success Saved 1 new dependency. info Direct dependencies └─ git@0.1.5 info All dependencies └─ git@0.1.5 ✨ Done in 250.32s. ``` Yarn seems to be installing git as a node module. If I try with the https way, p5.play folder is installed in the `node_modules` directory but there is no in the `package.json` dependencies. Also, It throws several errors: ``` $ yarn add https://github.com/molleindustria/p5.play.git yarn add v1.6.0 [1/5] 🔍 Validating package.json... [2/5] 🔍 Resolving packages... [3/5] 🚚 Fetching packages... [4/5] 🔗 Linking dependencies... warning "p5 > grunt-mocha@1.0.4" has unmet peer dependency "grunt@>=0.4.0". warning " > stylelint-webpack-plugin@0.10.4" has incorrect peer dependency "webpack@^1.13.2 || ^2.7.0 || ^3.11.0 || ^4.4.0". [5/5] 📃 Building fresh packages... [10/11] ⠐ node-sass: Downloading binary from https://github.com/sass/node-sass/releases/download/v4.8.3/darwin-x64-57_binding.node [11/11] ⠐ p5.play: This is probably not a problem with npm. There is likely additional logging output above. [3/11] ⠐ uws [9/11] ⠐ pngquant-bin error /Volumes/B/Documentos/trellis3/telmo/web/app/themes/tlm/node_modules/p5.play: Command failed. Exit code: 1 Command: npm run copy:p5 && npm run docs Arguments: Directory: /Volumes/B/Documentos/trellis3/telmo/web/app/themes/tlm/node_modules/p5.play Output: > p5.play@1.0.0 copy:p5 /Volumes/B/Documentos/trellis3/telmo/web/app/themes/tlm/node_modules/p5.play > cp -f `npm root`/p5/lib/p5.js examples/lib/p5.js cp: /Volumes/B/Documentos/trellis3/telmo/web/app/themes/tlm/node_modules/p5.play/node_modules/p5/lib/p5.js: No such file or directory npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! p5.play@1.0.0 copy:p5: `cp -f `npm root`/p5/lib/p5.js examples/lib/p5.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the p5.play@1.0.0 copy:p5 script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install? ``` Should I install this library manually in the `assets/scripts` directory? --- ## Post 4 by @aitor — 2018-05-22T20:12:24Z I still trying to get p5.js library working. In this case, I want to install the library by hand instead yarn procedure. 1. First, I’ve checked the library (`p5.min.js`) in a simple HTML file, importing it in the `` with ``. It works perfectly outside Sage! 2. Then, I put `p5.min.js` inside `resources/assets/scripts/`. 3. I create `.eslintignore` file to avoid linting of `p5.min.js` with this content: `resources/assets/scripts/p5.min.js`. 4. I add the arrays to `entry` in `resources/assets/config.json` as follows: ``` "p5.min": [ "./scripts/p5.min.js" ], "p5.dom.min": [ "./scripts/p5.dom.min.js" ] ``` 1. I’ve `enqueued script at app/setup.php` as follows: ``` wp_enqueue_script('sage/p5.min.js', asset_path('scripts/p5.min.js'), [], null, true); ``` 1. After `yarn build`, all files seems to be in their place: Webpack have created its file `p5.js.min` at `dist/scripts/` and the script is enqueued at the end of the body: ``` ``` ## Problem When I init the library using routing, for example, at `script/routes/commons.js` (with instantiation mode to avoid scope problems): ``` var sketch = function(p) { p.setup = function () { p.createCanvas(500, 500); p.background(200); }; }; new p5(sketch); ``` I get an eslint error: **error ‘p5’ is not defined no-undef**. I’ve checked it for hours and I can’t detect the cause. What is wrong in these steps? is a specific problem with this library? Any help appreciated! --- ## Post 6 by @mmirus — 2018-05-22T22:58:28Z Hey @aitor - going back to your previous post where you tried installing p5.play from Github using yarn: I tested it and got the same error as you, but nonetheless it did create the folder in `node_modules`. The error stems from this npm script that p5.play tries to run (see `package.json` for p5.play): ``` "scripts": { ... "copy:p5": "cp -f `npm root`/p5/lib/p5.js examples/lib/p5.js", ... "postinstall": "npm run copy:p5 && npm run docs", .... }, ``` The error is that `examples/lib/p5.js’ is not recognized as a valid location to copy the file. Not sure I have the insight to troubleshoot much beyond that point. Running this command did successfully copy the file for me: ``` cp -f "`npm root`/p5/lib/p5.js" "`npm root`/p5.play/examples/lib/" ``` But I’m unsure of what reasonable options (if any) would be available to you to resolve installing p5.play in this way. * * * As for p5 itself (as opposed to p5.play), that _is_ available as a Yarn package: ``` yarn add p5 ``` So, if that’s what you need (not p5.play), then you should be good to go. Once you do that you’d most likely just need to import it into your `common.js` file or wherever else you need it and then proceed as the p5 docs describe. * * * Replying to your most recent post (adding p5 manually and the no-undef error): what happens when you type `p5` into you browser’s dev console while viewing your dev site and hit enter? Does it say `undefined`, or something else? If it doesn’t say undefined, then to fix things from where you’re currently at, you may just need to add `p5` to the list of globals in your `.eslintrc.js` file to prevent the error. Normally, you would be importing p5 into your `common.js` file (and I would still recommend doing it that way–see the previous section), and so eslint would know that p5 is defined from your `import` line. Presumably in this case, because you have p5 enqueued as a separate script file (and it’s presumably defining a globally scoped `p5` variable), eslint doesn’t know that exists and is throwing the no-undef error. --- ## Post 7 by @aitor — 2018-05-23T06:50:47Z Thank you very much for the help! I tried to install p5.js with yarn but eslint still trhrowing the same error. This is what I did: 1. `yarn add p5`. Then, p5 directory went to `node_modules` succesfully. 2. Import p5 to `resources/assets/scripts/main.js`: ``` // import external dependencies import 'jquery'; import 'p5/lib/p5.js'; ``` 1. After yarn build I get **error ‘p5’ is not defined no-undef** Exactly the same as in the manual installation. Typing “p5” in the console retuns `Uncaught ReferenceError: p5 is not defined`. 2. To add “p5” to globals in `eslintrc.js` removes the eslint error but I get the same in the console: `Uncaught ReferenceError: p5 is not defined`: ``` "globals": { "wp": true, "p5": true } ``` --- ## Post 8 by @mmirus — 2018-05-23T14:56:04Z Hey @aitor - once you install p5 with yarn, you can do this to import it: ``` import p5 from "p5"; ``` But this is a huge import (check the output from `yarn build`, so this might be better: ``` import p5 from "p5/lib/p5.min"; ``` You will still see ‘Uncaught ReferenceError: p5 is not defined.’ if you enter p5 in the console, because when you import it this way it’s not placed in the global scope. If you put `console.log(p5)` after your import, you should see a better result. TBH from my research/testing on this it seemed like p5 may not be set up the best for importing (and it’s not something they document anywhere that I can find). Although that’s normally the method I would recommend, if you run into much more trouble going about it this way it may be best to switch to the “manual” method you were also trying. That said, if you Google there are some examples of people loading it this way, and you may be able to learn from them. For example: [https://github.com/vilvadot/p5-tests](https://github.com/vilvadot/p5-tests) PS - when you’re importing a js file you don’t have to add the .js at the end. --- ## Post 9 by @aitor — 2018-05-24T10:17:19Z Thank you so much for your time, research and explanations! It works :smile: :+1:t3: --- ## Post 10 by @mmirus — 2018-05-24T14:06:17Z @aitor Awesome! Would you mind sharing what you ended up doing? An example would help anyone else interested in this. --- ## Post 11 by @aitor — 2018-05-24T14:13:46Z Of course. As soon as I have the full implementation I will come back here to leave my conclusions.