Webpacker: Getting 'Cannot GET /' on a fresh project

[JiProchazka]

Hi,

I'm starting a new rails app (5.1.4) like this:

rails new test_app --webpack=vue

After I'm forced to run:

yarn add webpack-cli

and downgrade webpack-dev-server beacuse of #1303 :

yarn upgrade webpack-dev-server@^2.11.1

And finally when I run:

rails s
bin/webpack-dev-server

I get an empty page with simple text:

Cannot GET /

And the error in chrome console is:

Refused to load the image 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKwWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarZZ3UJPZGsbf7/vSSKElhCIl9CZIJ4D0GkBBOtgICZBACCEFAbuyqOBaUBEBdUVXRBRcCyBrQUSxItj7giwqyrqoiw2V+wdLuHfuvX/cmfvOnJnfPHPOc973nH8eAOpjrkQiQtUBcsRyaUxoACspOYVFfAoI6AMZqMDm8mQS/+joSPjPhQB8uAsIAMAtO65EIoL/rTT46TIeABINAGl8GS8HADkOgHTwJFI5AFYAAKaL5BI5AFYDAAxpUnIKAHYEABiZE9wJAIy0Cb4PAAxpXEwgADYMQKJyudJMAMonAGDl8zLlAFQdAHAQ84ViAGoYAPjwBFw+AHUtAEzPycnlA1CPA4BV2j/5ZP6LZ5rSk8vNVPLELAAAQ...5eiVOB/6fEQwCTMFJltVplpVIJS+LLmh1nYcC3Wi0KISiEYKPRCEuiiQOTcCn4drtNIcSf80IINpvNMASuAOD2UMdOpyMNvylRLBaDFrgFgJtDHS3L4nK5lIYnydlsxmQyGbTADQBcuulcKpW4WCyk4VOpVBiv0CUAvAJw5+aCbDbLer3OWq3GWCwWNfwdgJdOKj2TvVFE8ATwdvdjdn5C8B/2/U54kpjP50rBe5bYHdgqwEtJ2LZNkpxOp1vwpmkynU4fHV56TGy2QqFA27Zp2zbz+fzR4X1JOPBO+JSQhpeSyGQyW/CbEqZpBg5/sMhH8jOA925tV6sVNO3v0pumadB1TzXFjwA+BbkyJ52dbNv2+iPn+7XZtzbqWiKXy7Hf73MwGNCyrGjg96xOnyO8qWKw8GGl2KjhNyVEAOACwLuoykxv1isEfqaEr1XYavAMwHMAD1z2/wXgx7qC72+vxP/dKhHH7wEASvaA8SqpSrsAAAAASUVORK5CYII=' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

Will be glad to help.

Thanks

[ytbryan]

--webpack=vue works for me

Try the following:

At your terminal:

rails new app --webpack=vue
rails g scaffold pages
rails db:migrate

At app/views/pages/index.html.erb

<%= javascript_pack_tag 'hello_vue' %>

run rails server and visit http://localhost:3000/pages

[JiProchazka]

It's working, I'm getting Hello Vue! at the bottom.

Now I don't understand. I don't need to run bin/webpack-dev-server?

What is wrong with my procedure?

[ytbryan]

maybe ./bin/webpack-dev-server? with the missing ./?

Read https://github.com/rails/webpacker#development

rails server is sufficient for hello vue example. Use ./bin/webpack-dev-server if you find on-demand compilation too slow.

[gauravtiwari]

@JiProchazka Webpack dev server looks for a root index.html file and hence the error but that's not a problem since you are using packs inside rails views. Are you loading localhost:3035 in browser instead of rails server at localhost:3000?

[JiProchazka]

@gauravtiwari sure, localhost:3035

[JiProchazka]

@ytbryan ./ is working as same as without it. Same error

[jcxswc]

Same issue. When trying to run the webpack dev server -- just displays "Cannot GET /". Running a rails server works just fine, but without hot reloading.

[gauravtiwari]

@jcxswc Yes, that's fine since there is no index.html at the root of public/packs.

For hot reloading, please make sure hot option is true in config/webpacker.yml and this is added in packs/{name}.js:

const renderComponent = Component =>
  render(
    <Component />,
    document.getElementById('root')
  )

renderComponent(App)

// Hot reload API
if (module.hot) {
  module.hot.accept('../app', () => {
    const NextApp = require('../app').default
    renderComponent(NextApp)
  })
}

[gauravtiwari]

Here is more documentation on this: https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr

[ForkInSpace]

Any updates on the cannot get / error?

[fakefarm]

I encountered this (cannot get /) today after running ./bin/webpack-dev-server. But then I went back to localhost:3000 and noticed that _that_ port now hot reloads, which made me think that we don't use 3035 but rather that simply watches and hot reloads 3000? 🤷‍♂️

[gauravtiwari]

@fakefarm Exactly so, please don't worry about webpack dev server URL and use Rails server URL instead. Everything is proxied from Rails to Webpack under the hood and everything should work as expected.

[OmriSama]

@gauravtiwari Wonderful advice here! Thanks for that.
I made a script that starts both the dev server and rails (by default in dev mode) for development:

// package.json
{
  "scripts": {
    "start": "npm run start:webpacker & npm run start:rails",
    "start:webpacker": "./bin/webpack-dev-server --hot",
    "start:rails": "rails s"
}

---

I wanted to know: Does the advice for HMR that you mentioned still apply? Is anything major happening in Webpacker 4? (I'm on 3.5 as per dev recs)

[jakeNiemiec]

@OmriSama Both Webpack 4 and Webpack 5 only list HMR bug fixes so far. The only breaking change that I could find added a "this.hot flag to the loader context".

Gaurav's advice still probably applies, you just need the right loaders. For the case above, you would need to set up vue-loader with hot reloading.