choojs / bankai

:station: - friendly web compiler
Apache License 2.0
1.09k stars 102 forks source link

Error: choo.mount: could not query selector #524

Closed anonimusprogramus closed 4 years ago

anonimusprogramus commented 5 years ago

Choose one: 🐛

Expected Behavior

Retyping choo handboox example on local server generated with create-choo-app.

Any change on source code should be shown on browser, with Reload/Refresh/F5.

Current Behavior

On certain steps, what's shown on browser doesn't reflect the changes of source.

Stopped and re-run npx bankai start index.js didn't work.

Error on console like: Error: choo.mount: could not query selector: #app

While nothing changed on mount point inside index.html

Typing this issue took more than 15 minutes, re-run bankai and voila.. run normally!

Code Sample

index.js

var choo = require('choo')
var app = choo()

if (process.env.NODE_ENV !== 'production') {
  app.use(require('choo-devtools')())
} else {
  app.use(require('choo-service-worker')())
}

var main = require('./views/main.js')

app.route('/', main)
module.exports = app.mount('#app')

/views/main.js

var html = require('choo/html')

module.exports = function() {
  return html`
    <div class="container">
      <div class="grass">
        <img src="/assets/bg.gif" />
      </div>
    </div>
  `
}

Your Environment

Arch Linux x64 node 10.15.1 choo 6.13.3 bankai 9.15

blahah commented 5 years ago

@anonimusprogramus you have changed the mount selector (app.mount('#app')) from the example in the handbook (app.mount('div')). Your selector in the code above looks for an element with the ID app, but there isn't any such element. If you use the original selector, choo mounts the app at the first div element in the DOM tree.