[Dev Server] CSS and JS files are not found anymore

[aarongerig]

I recently switched to @symfony/webpack-encore:^1.0. Unfortunately my webpack-dev-server functionality isn't working as expected anymore. Maybe it's due to wrong configuration, although I didn't change it (it worked in previous versions, e.g. v0.33).

Here's my current configuration:

const { resolve } = require('path');
const Encore = require('@symfony/webpack-encore');
const StyleLintPlugin = require('stylelint-webpack-plugin');

const paths = {
  output: resolve(__dirname, './web/build/'),
  pattern: /\.(jpe?g|png|gif|svg|webp)$/i,
  public: 'build',
  source: resolve(__dirname, './assets'),
  vendor: resolve(__dirname, './node_modules'),
};

Encore
  // Set output and public paths
  .setOutputPath(`${paths.output}/`)
  .setPublicPath(`/${paths.public}`)

  // Clean output before build
  .cleanupOutputBeforeBuild()

  // JavaScript
  .addEntry('js/app', `${paths.source}/js/app.js`)
  .enableSingleRuntimeChunk()
  .enableEslintLoader()
  .splitEntryChunks()
  .configureBabel(() => {}, {
    useBuiltIns: 'usage',
    corejs: 3,
  })

  // CSS
  .addStyleEntry('css/global', `${paths.source}/scss/global.scss`)
  .addStyleEntry('css/email', `${paths.source}/scss/email.scss`)
  .addStyleEntry('css/editmode', `${paths.source}/scss/editmode.scss`)
  .enableSassLoader(() => {}, { resolveUrlLoader: false })
  .enablePostCssLoader()
  .addPlugin(new StyleLintPlugin())

  // Copy images
  .copyFiles({
    from: `${paths.source}/images`,
    pattern: paths.pattern,
    to: 'images/[path][name].[hash:8].[ext]',
  })

  // Source maps and cache buster
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())

  // Advanced config options
  .configureWatchOptions((options) => {
    options.poll = true;
    options.ignored = `${paths.vendor}/`;
  })
  .configureLoaderRule('images', (rule) => {
    rule.exclude = [
      `${paths.source}/custom/icons`,
    ];
  })
  .addRule({
    test: /\.svg$/,
    include: [
      `${paths.source}/custom/icons`,
    ],
    loader: 'raw-loader',
  });

// Advanced webpack config
const config = Encore.getWebpackConfig();
config.optimization.concatenateModules = true;

module.exports = config;

Very important to notice: With the .bin/encore dev command it works properly (I'm loading my files via the Webpack Encore Bundle => Symfony). With the .bin/encore dev-server --host localhost --port 2000 I get following errors in my console:

Is there anything I'm missing or doing wrong? Thanks for any feedback!

[weaverryan]

Hey @aarongerig!

If you look at these 404's, are they going to the correct hostname? Are they going to localhost:2000 or somewhere else? If you go directly to http://localhost:2000/ what do you see?

I'm not aware of an issue exactly like this... and your config looks pretty boring (in a good way - I don't see any problems).

Cheers!

[aarongerig]

Hi @weaverryan!

Thanks for looking into it. Yes, they are going to the correct hostname. If I open http://localhost:2000 I can see the website I'm currently working on. So the paths in the manifest.json seem to be correct (same behavior as with .bin/encore dev). The only difference is that files are not found (404's) with the dev-server.

By the way, I'm running my local website on a couple of docker containers (PHP, MariaDB, etc.), but I don't think that's the issue. If you ask me, it has something to do with the updated webpack-dev-server and/or webpack versions.

[minimit]

I've the same problem, but devserver opens :8081 but css and js are linked to :8080

If I use encore dev-server --open --port 8080 the css is loaded but the javascript gives this error:

WebsocketClient.js:42 Uncaught DOMException: Failed to construct 'WebSocket': The URL 'ws://[[::]]:8080/ws' is invalid.
    at new WebsocketClient (http://localhost:8080/vendors-node_modules_webpack-dev-server_client_default_index_js_http_0_0_0_0_port_8080-node_m-bce09b.js:2745:20)
    at initSocket (http://localhost:8080/vendors-node_modules_webpack-dev-server_client_default_index_js_http_0_0_0_0_port_8080-node_m-bce09b.js:3129:12)
    at Object../node_modules/webpack-dev-server/client/default/index.js?http://0.0.0.0&port=8080 (http://localhost:8080/vendors-node_modules_webpack-dev-server_client_default_index_js_http_0_0_0_0_port_8080-node_m-bce09b.js:2970:1)
    at __webpack_require__ (http://localhost:8080/runtime.js:25:32)
    at checkDeferredModulesImpl (http://localhost:8080/runtime.js:1168:24)
    at webpackJsonpCallback (http://localhost:8080/runtime.js:1150:20)
    at http://localhost:8080/app.js:1:83

I'm using HtmlWebpackPlugin

  .addPlugin(
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src/index.ejs'),
      title: 'Webpack Encore Boilerplate',
    })
  )

[iammichiel]

I can confirm the following behaviour :

1. Starting a dev-server without any option : yarn encore dev-server = starts on port 8080 and all works fine.
2. Starting a second dev-server on another project. CLI indicates that it starts on port 8081. The entrypoints.json file however still has the 8080 port in the urls.

Workaround :
When setting a port explicitly, the endrypoints has the correct port :

yarn encore dev-server -- -port 8888 --hot

[stof]

Does webpack-dev-server define a dynamic default for the port, finding an available port ? If yes, that might be the cause of the issue if encore is not aware of the actual port

[minimit]

Oh yes with --port settings it works, the javascript problem is when you use --open because it opens the browser to http://[::]:8080/ instead of http://localhost:8080/

[weaverryan]

Hi everyone!

Ok! It looks like possibly a few things are going on:

1. As @stof correctly figured out, Encore is incorrectly "guessing" the port when you do NOT pass --port and 8080 isn't available (so it tries 8081, for example). In that case, Encore still thinks 8080 was the port that was used. Definitely a bug - I'll need to see if we can hook in and figure out the real port somehow...

2. @minimit you mentioned:

javascript problem is when you use --open because it opens the browser to http://[::]:8080/ instead of http://localhost:8080/

Can you elaborate? Which KavaScript problem?

3. I think the original problem by @aarongerig is actually still something different. In his case, he IS passing --port=2000 and the manifest.json paths ARE correct... and yet, the assets aren't available.

@aarongerig I actually DO think this is related to your Docker setup (it may still be a bug in Encore, I'm no sure yet, but I think it's your Docker setup that is making you have the error and not others). When you go directly to http://localhost:2000 in your browser (where your dev-server is running) you should NOT see your site. You should see something like:

And then if you access a real file:

In other words, it should not point to your actual app. Is it possible that localhost:2000 is pointing to your application Docker container instead of to whatever container is exposing the dev-server on port 2000?

Cheers!

[minimit]

2. @minimit you mentioned:

javascript problem is when you use --open because it opens the browser to http://[::]:8080/ instead of http://localhost:8080/

Can you elaborate? Which KavaScript problem?

With the option --open opens the browser to http://[::]:8080/ instead of http://localhost:8080/ and the console gives this error.

WebsocketClient.js:42 Uncaught DOMException: Failed to construct 'WebSocket': The URL 'ws://[[::]]:8080/ws' is invalid.
    at new WebsocketClient (http://localhost:8080/vendors-node_modules_webpack-dev-server_client_default_index_js_http_0_0_0_0_port_8080-node_m-bce09b.js:2745:20)
    at initSocket (http://localhost:8080/vendors-node_modules_webpack-dev-server_client_default_index_js_http_0_0_0_0_port_8080-node_m-bce09b.js:3129:12)
    at Object../node_modules/webpack-dev-server/client/default/index.js?http://0.0.0.0&port=8080 (http://localhost:8080/vendors-node_modules_webpack-dev-server_client_default_index_js_http_0_0_0_0_port_8080-node_m-bce09b.js:2970:1)
    at __webpack_require__ (http://localhost:8080/runtime.js:25:32)
    at checkDeferredModulesImpl (http://localhost:8080/runtime.js:1168:24)
    at webpackJsonpCallback (http://localhost:8080/runtime.js:1150:20)
    at http://localhost:8080/app.js:1:83

[weaverryan]

1. About the 8081 problem - that's fixed in Do not allow webpack-dev-server to find an open port #943 - the fix is, unfortunately, just to not allow webpack-dev-server to "find" an open port. This means if you run multiple on port 8080, you'll get a clear error and can pass the --port= option. Not ideal, but because our manifest.json file needs to know the port at "webpack config build" time... and the port is determined later when webpack-dev-server is loading, I don't think we have another option.

2. Thanks @minimit - I understand now. The fix in webpack-dev-server has already been merged for this - Remove double brackets from the ws url when using raw IPv6 address webpack/webpack-dev-server#2951 - but not tagged. Until then, passing --host= is the work around.

[aarongerig]

Hi @weaverryan !

Yes, you are right. My problem is somewhat different.

I've been trying out some things and this is the solution I came up with. I ended up NOT defining the port and therefore the webpack-dev-server started on http://[::]:8080/. With that configuration I am able to get my CSS and JS files, even though my website (PHP docker container) runs on port 2000 (e.g. http://localhost:2000/. I'm not sure though if the setup is correct like that, but at least it works. 😀

[cedricgeffroy]

hi @aarongerig :)
I have the same issue.
Spent days trying to figure it out.

Would you please share your final configuration?

• docker-compose.yml configuration file
• webpack.config.js configuration file
• encore dev-server command

For me encore dev-server runs and compiles but I can't access the files. Here is what the console says:

GET http://localhost:8080/build/app.css net::ERR_EMPTY_RESPONSE
GET http://localhost:8080/build/app.js net::ERR_EMPTY_RESPONSE

Symfony is accessible from
http://localhost:81/

[aarongerig]

Hi @cedricgeffroy

Sure, here's my final configuration: https://gist.github.com/aarongerig/caad0ef67e498f2cb8e8cc1f35ca1754

Hope this helps – cheers!