Webpacker: javascript_pack_tag will not add the 'packs' folder in generated path

[ghn]

Hello,

Just noticed that helper javascript_pack_tag from current version on master branch does not generate path with 'packs'. Example:

app/javascript/packs/application.js

javascript_pack_tag creates this:

<script src="http://localhost:3000/application.js"></script>

expected:

<script src="http://localhost:3000/packs/application.js"></script>

[ghn]

Hello @aganov
yes just tested now with master branch (note that tag 1.0.0 works). No time to dig further.

thing is: path is wrong, it should contain folder 'packs'

[gauravtiwari]

@ghn - Did you re-run the installer - bundle exec rails webpacker:install? A lot has changed now

[wppurking]

@gauravtiwari
I found the manifest.json output is wrong when enable devServer.

// Common configuration for webpacker loaded from config/webpack/paths.yml

const { join, resolve } = require('path')
const { env } = require('process')
const { safeLoad } = require('js-yaml')
const { readFileSync } = require('fs')

const configPath = resolve('config', 'webpack')
const loadersDir = join(__dirname, 'loaders')
const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))
const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))

/*
 * may be this is wrong.  even not in "production" and enable devServer should include paths.entry
const publicPath = env.NODE_ENV !== 'production' && devServer.enabled ?
  `http://${devServer.host}:${devServer.port}/` : `/${paths.entry}/`
*/
const publicPath = (env.NODE_ENV !== 'production' && devServer.enabled ?
 `http://${devServer.host}:${devServer.port}` : '') + `/${paths.entry}/`

module.exports = {
  devServer,
  env,
  paths,
  loadersDir,
  publicPath
}

[gauravtiwari]

@wppurking That's not needed since webpack-dev-server serves from memory instead of disk so, path is irrelevant. Are you getting any errors?

[wppurking]

@gauravtiwari
Sorry I am not Familiar with webpack, but i will explain the issue i found and how i sovled.

On rails side

1. In rails app/views/layouts/application.html.erb when use <%= javascript_pack_tag 'application' %> it will invoke javascript_pack_tag helper method
2. javascript_pack_tag help method will ask Webpacker::Manifest to generate the correct path.
3. And Webpacker::Manifest will load Webpacker::Configuration. manifest_path which default is public/packs/manifest.json
4. The manifest.json look like (run with ./bin/webpack-watcher)

{
  "application.js": "http://localhost:8080/application.js"
}

That means rails will depending on the webpack output manifest.json file to generate the correct javascript and stylesheet file path in rails helper method.

On webpack side

There is all about configuration - -||

1. In path.yml set the entry path and else.
2. configuration.js will use entry to calculate the correct publicPath which is ManifestPlugin need.
3. In shared.js use ManifestPlugin to generate the manifest.json to pass information to rails.

The problem is when in development mode the publicPath is wrong so the path in manifest.json is wrong then the rails helper use the wrong manifest.json info to generate the wrong assets url.

Fix it

Found the issue then i just fix the configuration.js:L12 from

const publicPath = env.NODE_ENV !== 'production' && devServer.enabled ?
  `http://${devServer.host}:${devServer.port}/` : `/${paths.entry}/`

to

const publicPathPrefix = env.NODE_ENV !== 'production' && devServer.enabled ?
  `http://${devServer.host}:${devServer.port}` :  ''
const publicPath = publicPathPrefix  + `/${paths.entry}/`

then the new manifest.json looks like below and rails helper is working correct

{
  "application.js": "http://localhost:8080/packs/application.js"
}

[ghn]

@gauravtiwari yes I basically followed the installation guide of the Readme file. @wppurking I came up with the same fix :)

[gauravtiwari]

@wppurking @ghn Strange, because it works for me - http://localhost:8080/application.js

So, I am unsure this is a bug. Could you try running webpack-dev-server on a different port without the prefix?

[wppurking]

@gauravtiwari @ghn
May be it`s not a bug is a upgrade issue.

I am upgrade webpacker from 0.2 to 1.0 then to 1.1

I reset all webpakcer configuration to webpacker 1.1 and all go`s to work.

Before i use webpack-watcher, now i use webpack-dev-server i dont know why its works but i am sure they are webpack configuration`s issue, i drop all old configuration reset it to webpacker 1.1 default and then add new configuration one by one.

[gauravtiwari]

@wppurking Yes, that's it. A lot has changed between 0.2 to 1.1 so, please upgrade using - bundle exec rails webpacker:install and bundle exec rails webpacker:install:react etc. if you have added other third party integrations.

Basically, webpack-watcher is just webpack bin running in watch mode and in this mode the Rails app will use public/{entry} directory to server assets. However, the dev-server compiles and serves assets from memory so, path doesn't really matter.

The Readme is up-to-date so, please check it out too.

[gauravtiwari]

Check this section - https://github.com/rails/webpacker#advanced-configuration

[wppurking]

@gauravtiwari Thanks ~

[gauravtiwari]

@ghn Could you please close this issue if it's fixed for you? As described by @wppurking it's likely a configuration issue. Please upgrade and see if the issue persists.

[gauravtiwari]

@dhh I think we can close this one. Seems like this is a non-issue now