These are chat archives for jescalan/roots

4th
Nov 2015
Jeff Escalante
@jescalan
Nov 04 2015 04:40
@javiercf welcome, and glad you are excited! :wave:
hmm im not sure, not familiar with that webinar actually. maybe @joshrowley could help?
Josh Rowley
@joshrowley
Nov 04 2015 06:39
@jenius @javiercf talking about this webinar about setting up contentful with roots
Benjamin Gandhi-Shepard
@gandhiShepard
Nov 04 2015 13:47
Ok. I bailed on using the Webinar and used the Netlify/Roots blog post to get the deploy working. make deploy still doesn't work for me, but I guess it doesn't matter when I can just push to GitHub and Netlify can watch it an run roots compile. Unstuck now. Moving forward again.
Rubén Sospedra
@sospedra
Nov 04 2015 16:42
Hi guys, could you help me wit this issue?
It's becoming more and more anoying over the time.
jenius/roots#674
tl;dr => When compiling roots if there's any kind of error in the javascript it doesn't compile, but don't output any log neither, nor stop "waiting to finish compiling"
I've checked what can be wrong but I cannot solve the problem. I've tried:
  1. change node version
  2. Downgrade roots to 0.3.1
  3. compile and watch
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 16:44
can you paste your app.coffee?
Rubén Sospedra
@sospedra
Nov 04 2015 16:44
axis         = require 'axis'
rupture      = require 'rupture'
autoprefixer = require 'autoprefixer-stylus'
browserify   = require 'roots-browserify'
css_pipeline = require 'css-pipeline'


module.exports =
  ignores: ['readme.md', '**/layout.*', '**/_*', '.gitignore', 'ship.*conf', '.bin', 'blog/**/*']

  extensions: [
    browserify
      files: 'assets/scripts/main.js'
      out: 'js/build.js'
      minify: false
    css_pipeline
      files: [
        'assets/styles/vendor/*.*',
        'assets/styles/master.styl'
      ]
      out: 'css/bundle.css'
      minify: false
  ]

  stylus:
    use: [axis(), rupture(), autoprefixer()]
    sourcemap: false

  'coffee-script':
    sourcemap: true

  jade:
    pretty: true
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 16:45
does it always just sit there?
have you ever waitied a few minutes?
Rubén Sospedra
@sospedra
Nov 04 2015 16:46
I've waited for about 10 minutes max
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 16:46
I know there’s a small issue with browserify + roots
where compiling can take few moments
Rubén Sospedra
@sospedra
Nov 04 2015 16:46
should we wait more than 10 minutes?
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 16:46
what does your main.js look like?
nah 10 minutes doesn’t seem right :worried:
Rubén Sospedra
@sospedra
Nov 04 2015 16:47
the main.js just require our modules and init'em
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 16:48
are you using a lot of third party modules?
Rubén Sospedra
@sospedra
Nov 04 2015 16:48
"dependencies": {
    "buffer64": "^0.11.2",
    "handlebars": "^3.0.3",
    "jquery": "^2.1.4",
    "react": "^0.13.3",
    "react-select": "^0.6.4",
    "react-tooltip": "^0.3.8",
    "superagent": "^1.3.0"
  },
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 16:51
so you’re getting a JS error?
you just don’t know what the error is?
Rubén Sospedra
@sospedra
Nov 04 2015 16:51
nope
Six
@ohNegative
Nov 04 2015 16:51
@edravis have you used the dev tools in either Chrome or FF to see what console errors you're getting?
Rubén Sospedra
@sospedra
Nov 04 2015 16:51
'cause the trace error isn't outputed by roots
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 16:51
have you tried manually transpiling with browserify?
Rubén Sospedra
@sospedra
Nov 04 2015 16:51
nope
that's a good idea
give me a sec
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 16:52
@ohNegative it’s not even compiling aparently
so he can’t check the browser yet
unless I’ve misunderstood
Rubén Sospedra
@sospedra
Nov 04 2015 16:52
i cannot check the console
but I can
browserify
and then roots compile the bundle
without roots-browserify
no?
Six
@ohNegative
Nov 04 2015 16:54
or try using the js pipeline instead of browserify? Then you can tell if Browserify is the cause or something else?
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 16:54
if he’s using modules, that won’t work
but yes, @edravis
try that
Rubén Sospedra
@sospedra
Nov 04 2015 16:54
we've something
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 16:54
or just run python -m SimpleHTTPServer in public
Rubén Sospedra
@sospedra
Nov 04 2015 16:54
if I try to browserify I got the error trace
so I can debug now!!
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 16:54
nice
might want to transfer that issue over to roots-browserify
seems to be isolated to that
Rubén Sospedra
@sospedra
Nov 04 2015 16:55
u're right
I'm gonna suggest also to close the one in the roots repo
I'm gonna work on this tonight, I'll return to you when I got more info
;)
thanks a lot guys!
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 16:56
you can close that one if you opened it ;)
let us know how it works out :thumbsup:
Rubén Sospedra
@sospedra
Nov 04 2015 16:57
If you think is ok I'll, I don't use to close it becuase sometime the mantainers has special flows for the tasks or whatever
keep in touch
Tyler Thrailkill
@snowe2010
Nov 04 2015 20:58
I'm having trouble figuring out how to get jquery included into my roots project. Do I actually need the jquery file downloaded and saved into my js folder or can I just use $ = require 'jquery'? I've only tried the second thing, because it is going to be easier to keep up to date.
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 20:58
are you using browserify?
or webpack?
that’s the only way you can require anything
Tyler Thrailkill
@snowe2010
Nov 04 2015 20:59
no, i'm just using the default build of roots new, so it looks like it's js_pipeline
oh...
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 20:59
yeah then you would need to add your js file to the manifest file
otherwise, use the browserify or web pack extensions
Tyler Thrailkill
@snowe2010
Nov 04 2015 20:59
which would you suggest?
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:00
and you can require and use modules
i personally like modular applications
much more managable and easier to architect
oh
out of browserify or webpack?
was that the question?
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:00
yeah
or just a manifest.
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:00
webpack is pretty flexible
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:01
I'm looking at browserify. kinda confused on how it works.
same with webpack. so I require the extension browserify = require ('browserify') but then how do I make browserify/webpack use jquery?
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:03
well
you need to require the extension that you’re going to use in your app.coffee file
then add it to the extensions object
and configure it further there
but to require jquery
you would npm i —save jquery
and when you do $ = require 'jquery’, it will check the node_modules directory for the jquery module
i’ve never used the webpack extension with roots… but I know the browserify extension can get a little slow when compiling lots of third party extensions
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:07
hmm... I had everything you said done except the extension part. I tried adding webpack to the extensions array, with the options shown on the github page and I got a massive error
EXTENSION ERROR!

It looks like there was a Malformed Extension Error.
Check out http://roots.cx/errors#125 for more help

Reason: Extension must return a function/class
but of course that link is dead...
$            = require 'jquery'
axis         = require 'axis'
rupture      = require 'rupture'
autoprefixer = require 'autoprefixer-stylus'
js_pipeline  = require 'js-pipeline'
css_pipeline = require 'css-pipeline'
accord       = require 'accord'
postcss      = accord.load 'postcss'
lost         = require 'lost'
nestedprops  = require 'postcss-nested-props'
webpack      = require 'webpack'

module.exports =
  ignores: ['readme.md', '**/layout.*', '**/_*', '.gitignore', 'ship.*conf']

  extensions: [
    webpack(entry: './index', output: { filename: 'bundle.js' })
    # js_pipeline(files: 'assets/js/*.coffee'),
    css_pipeline(files: 'assets/css/*.styl')
  ]

  stylus:
    use: [axis(), rupture(), autoprefixer()]
    sourcemap: true

  'coffee-script':
    sourcemap: true

  jade:
    pretty: true

  postcss:
    use: [lost(), nestedprops]
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:21
yep, I'm an idiot. npm installed webpack, not roots-webpack.
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:29
any help on another error I'm getting regarding how to format webpack?
                     ^
Error: Entry module not found: Error: Cannot resolve 'file' or 'directory' ./assets/js in C:\Users\project
resolve file
  C:\Users\project\assets\js is not a file
  C:\Users\project\assets\js.web.js doesn't exist
  C:\Users\project\assets\js.webpack.js doesn't exist
  C:\Users\project\assets\js.js doesn't exist
  C:\Users\project\assets\js.json doesn't exist
resolve directory
  C:\Users\project\assets\js\package.json doesn't exist (directory description file)
  directory default file index
    resolve file index in C:\Users\project\assets\js
      C:\Users\project\assets\js\index doesn't exist
      C:\Users\project\assets\js\index.webpack.js doesn't exist
      C:\Users\project\assets\js\index.js doesn't exist
      C:\Users\project\assets\js\index.web.js doesn't exist
      C:\Users\project\assets\js\index.json doesn't exist
I see what it's looking for, but I don't understand how I'm supposed to get it to pick up my .coffee files.
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:31
oh
you’re using coffeescript
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:31
I tried using it in conjunction with js_pipeline and having js_pipeline build a .js file.
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:31
nah don’t do that
might get a race condition
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:31
yeah I'm using most of the defaults of roots.
oh ok.
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:32
if you’re using coffee you’ll need to find a webpack loader for it
and change .js
to .coffee
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:36
sheesh this is hard. ok. got coffee-loader installed. changed my app.coffee to look like this.
$            = require 'jquery'
axis         = require 'axis'
rupture      = require 'rupture'
autoprefixer = require 'autoprefixer-stylus'
js_pipeline  = require 'js-pipeline'
css_pipeline = require 'css-pipeline'
accord       = require 'accord'
postcss      = accord.load 'postcss'
lost         = require 'lost'
nestedprops  = require 'postcss-nested-props'
webpack      = require 'roots-webpack'
coffeeloader = require 'coffee-loader'

module.exports =
  ignores: ['readme.md', '**/layout.*', '**/_*', '.gitignore', 'ship.*conf']

  extensions: [
    # js_pipeline(files: 'assets/js/*.coffee', out: 'js/build.js'),
    webpack(entry: './assets/js', output: { filename: 'bundle.js' },
      module.loaders: [
          { test: /\.coffee$/, loader: "coffee-loader"}
        ]),
    css_pipeline(files: 'assets/css/*.styl')
  ]

  stylus:
    use: [axis(), rupture(), autoprefixer()]
    sourcemap: true

  'coffee-script':
    sourcemap: true

  jade:
    pretty: true

  postcss:
    use: [lost(), nestedprops]
but i'm still getting errors. though they're way different this time.
{ [SyntaxError: unexpected :]
  location:
   { first_line: 19,
     first_column: 20,
     last_line: 19,
     last_column: 20 },
  toString: [Function],
which indicates that it's around the entry: './assets/js bit
agh. this is so frustrating.
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:40
your entry needs to be a file
plus
the example on roots-webpack seems to load relatively
in this example
entry: './index'
the entry file is
index.js
with modular javascript
you tend to have one entry file
that loads and inits the main aspects of your project
and from there each file cascades down to load other subsequent modules that are needed
so you’ll wan’t to make a main entry file
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:42
gotcha. switching to this
    webpack(entry: './assets/js/main.coffee', output: { filename: 'bundle.js' },
      module: {
        loaders: [
          { test: /\.coffee$/, loader: "coffee-loader"}
        ]
      }),
give me this error
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:43
I still don’t know if ./assets/js is required
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:43
Error: ./assets/js/main.coffee
Module parse failed: C:\Users\project\assets\js\main.coffee Line 1: Unexpected string
You may need an appropriate loader to handle this file type.
| console.log 'hello there!'
|
| $("#button").on "click", ->
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:43
you can drop that
oh
well that seemed to work somewhat
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:43
yeah I'm getting a better more understandable error
at least for me.
but I don't see why it's not picking up the loader
/configuration
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:44
yeah seems that it’s not
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:45
I think I need ./assets/js because if I remove it I get this
Error: Entry module not found: Error: Cannot resolve 'file' or 'directory' ./main in C:\Users\project
resolve file
  C:\Users\project\main doesn't exist
  C:\Users\project\main.webpack.js doesn't exist
  C:\Users\project\main.web.js doesn't exist
  C:\Users\project\main.js doesn't exist
  C:\Users\project\main.json doesn't exist
resolve directory
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:46
sure
cross check this though
it’s the fixture in the extension’s tests
so at least you know that’s working and will give you some guidance
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:48
didn't even think to check the test folder.
ha! nice! Removing the brackets and stuff got me to a new error :D
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:50
:thumbsup:
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:50
compiling... [Error: TypeError: C:\Users\project\views\layout.jade:19
    17|       block content
    18|
  > 19|     != js()
    20|

undefined is not a function]

Potentially unhandled rejection [5] TypeError: C:\Users\project\views\layout.jade:19
    17|       block content
    18|
  > 19|     != js()
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:51
ah yes
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:51
so this is because js_pipeline is what creates the js() function right
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:51
yeah
you’re not longer using it
:x:
also remove that comment ;)
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:51
so delete it and then do I need to add something so that webpack will include the js itself?
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:51
yeah
script tag
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:55
AGH! it still didn't include jquery.. wtf am I doing wrong.
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:55
what does your entry file look like?
main.coffee
Tyler Thrailkill
@snowe2010
Nov 04 2015 21:56

console.log 'hello there!'

$("#button").on "click", ->
$(this).toggleClass("hamburger-open")

console.log 'hello there!'

$("#button").on "click", ->
  $(this).toggleClass("hamburger-open")
it can't find $ still
$            = require 'jquery'
axis         = require 'axis'
rupture      = require 'rupture'
autoprefixer = require 'autoprefixer-stylus'
js_pipeline  = require 'js-pipeline'
css_pipeline = require 'css-pipeline'
accord       = require 'accord'
postcss      = accord.load 'postcss'
lost         = require 'lost'
nestedprops  = require 'postcss-nested-props'
webpack      = require 'roots-webpack'
coffeeloader = require 'coffee-loader'

module.exports =
  ignores: ['readme.md', '**/layout.*', '**/_*', '.gitignore', 'ship.*conf']

  extensions: [
    # js_pipeline(files: 'assets/js/*.coffee', out: 'js/build.js'),
    webpack(
      entry: './assets/js/main.coffee'
      output:
        filename: 'js/bundle.js'
      module:
        loaders: [
          { test: /\.coffee$/, loader: "coffee-loader"}
        ]
      ),
    css_pipeline(files: 'assets/css/*.styl')
  ]
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 21:59
so
you remeber how we were talking about the module pattern?
now that you’re using webpack
you’ll require your npm modules
since jquery is on npm
and it’s wrapped in a umd
you have do to this $ = require ‘jquery'
same thing with all your local modules. If you make a module for an accordion, you’ll need to export it from a file and require it in the file you want to initialze or instantiate it in
Tyler Thrailkill
@snowe2010
Nov 04 2015 22:14
yeah I did that on the first line of the coffeescript file.
app.coffeee
app.coffee*
is that how it's supposed to be?
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 22:15
yeah
Tyler Thrailkill
@snowe2010
Nov 04 2015 22:15
well it's still not working :/
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 22:28
are you getting any console errors?
check the bundled file
check if jquery is referenced in it
also did you npm i jquery?
Tyler Thrailkill
@snowe2010
Nov 04 2015 22:29
I am not getting any console errors besides ReferenceError: $ is not defined in the dev tools
no mention of jquery in the bundle.js
and yes I did npm i --save jquery
```
  "dependencies": {
    "accord": "^0.20.3",
    "autoprefixer-stylus": "0.8.x",
    "axis": "0.5.x",
    "coffee-loader": "^0.7.2",
    "coffee-script": "^1.0.0",
    "css-pipeline": "0.3.x",
    "jade": "^1.0.0",
    "jquery": "^2.1.4",
    "js-pipeline": "0.2.x",
    "jstransformer-marked": "^1.0.0",
    "lost": "^6.6.2",
    "marked": "0.3.x",
    "postcss": "^5.0.10",
    "postcss-nested-props": "^1.0.0",
    "poststylus": "^0.2.1",
    "roots-webpack": "0.0.1",
    "rupture": "0.6.x",
    "stylus": "0.52.x"
  }
/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};

/******/     // The require function
/******/     function __webpack_require__(moduleId) {

/******/         // Check if module is in cache
/******/         if(installedModules[moduleId])
/******/             return installedModules[moduleId].exports;

/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             exports: {},
/******/             id: moduleId,
/******/             loaded: false
/******/         };

/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/         // Flag the module as loaded
/******/         module.loaded = true;

/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }


/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;

/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;

/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";

/******/     // Load entry module and return exports
/******/     return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {

    console.log('hello there!');

    $("#button").on("click", function() {
      return $(this).toggleClass("hamburger-open");
    });


/***/ }
/******/ ]);
there is my package.json and my bundle.js
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 22:32
don’t use webpack a lot, so I could be wrong, but the last part of the compiled js doesn’t look like it’s requiring jquery
or referencing it
for that matter
Tyler Thrailkill
@snowe2010
Nov 04 2015 22:32
yeah, I don't understand webpack so I'm getting confused on how it's supposed to be requiring it. do I need to manually require it in my coffescript file?
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 22:33
yeah
you have to explicity do $ = require(‘jquery')
or it won’t load jquery
it will set $ to jQuery similar to (function($) { // something})(jQuery);
Tyler Thrailkill
@snowe2010
Nov 04 2015 22:34
ah ok, I thought it had to be called in the app.coffee file.
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 22:34
nah
Tyler Thrailkill
@snowe2010
Nov 04 2015 22:34
sweet. well that worked.
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 22:34
the file you’re using it
:thumbsup:
Tyler Thrailkill
@snowe2010
Nov 04 2015 22:34
thank you very much.
I'm getting it now.
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 22:34
no problem
that’s the spirit
Tyler Thrailkill
@snowe2010
Nov 04 2015 22:36
now at least I can actually develop stuff haha.
Tyler Thrailkill
@snowe2010
Nov 04 2015 22:58
so the script loaded into the browser correctly, but none of the click handlers are firing.
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 22:59
how did you verify that it was loaded?
Tyler Thrailkill
@snowe2010
Nov 04 2015 22:59
well no errors are thrown when the js file is loaded with the $ sign
and I can call $('#button') and it works.
buttttttt
when I call $('#button').addClass or really any function I get the error TypeError: $(...).addClass is not a function
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 23:00
well
chrome proxies $() to document.QuerySelectorAll
so $ will always work
$.version
Tyler Thrailkill
@snowe2010
Nov 04 2015 23:01
I'm actually using firefox dev edition.
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 23:01
or $.someMethodYou’reFamiliar with will verify if jQuery is loaded
Tyler Thrailkill
@snowe2010
Nov 04 2015 23:01
so $.version gives me undefined
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 23:01
well maybe they do it as well
actually I lied $.version isn’t a think
but try looking for $.ajax
or something
see if it’s in fact jQuery
$ is used for a lot of other things
Tyler Thrailkill
@snowe2010
Nov 04 2015 23:02
hm. ok well it looks like it's not actually loaded then.
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 23:04
my first guess would be that that you’re not wrapping your entry file’s jquery related content in $(function() {})
Tyler Thrailkill
@snowe2010
Nov 04 2015 23:05
I'm confused. (this is my first time using coffeescript and I've only used javascript very rarely).
this is my main.coffee file
$ = require 'jquery'
$j = jQuery.noConflict()

console.log 'hello there!'

$('#button').click -> $(this).addClass 'hamburger-open'
Seth Krasnianski
@sethkrasnianski
Nov 04 2015 23:06
lets take this to a PM so we don’t pollute the roots channel
Tyler Thrailkill
@snowe2010
Nov 04 2015 23:06
the $j = jQuery.noConflict() line i just added gives me the error ReferenceError: jQuery is not defined
ok