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

aarongerig · 2021-02-24T14:58:10Z

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!

The text was updated successfully, but these errors were encountered:

weaverryan · 2021-02-25T01:49:41Z

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 · 2021-02-25T08:04:34Z

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 · 2021-02-25T09:53:18Z

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 · 2021-02-25T13:37:40Z

I can confirm the following behaviour :

Starting a dev-server without any option : yarn encore dev-server = starts on port 8080 and all works fine.
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 · 2021-02-25T14:26:18Z

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 · 2021-02-25T15:28:33Z

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 · 2021-03-01T01:04:51Z

Hi everyone!

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

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...
@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?

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 · 2021-03-01T01:20:22Z

@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 · 2021-03-01T02:00:54Z

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.
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 · 2021-03-01T09:49:32Z

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 · 2021-03-15T19:07:07Z

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 · 2021-03-16T10:38:23Z

Hi @cedricgeffroy

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

Hope this helps – cheers!

cedricgeffroy · 2021-03-16T15:54:38Z

Thank you very much @aarongerig
Unfortunately it didn't help :-/
so I created a new issue #948

…ryan) This PR was merged into the main branch. Discussion ---------- Do not allow webpack-dev-server to find an open port Addresses on issue on #941 This disallows the "find an open port" feature in webpack-dev-server. This is unfortunate, as this is a nice feature of webpack-dev-server where if port 8080 is open, it will try 8081, etc. However, because we need to build a manifest.json file, we need to know what the port is for sure at Webpack config build time. Even going through the same async process of using the "find-port" package isn't really doable... as it would make the entire config generation async (this may be possible, but would change a ton of things in Encore & in userland `webpack.config.js` files). Cheers! Commits ------- da17b90 Do not allow webpack-dev-server to find an open port

weaverryan mentioned this issue Mar 1, 2021

Do not allow webpack-dev-server to find an open port #943

Merged

cedricgeffroy mentioned this issue Mar 15, 2021

Run Encore dev-server from a docker container #821

Closed

aarongerig closed this as completed Mar 16, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

aarongerig commented Feb 24, 2021 •

edited

Loading

weaverryan commented Feb 25, 2021

aarongerig commented Feb 25, 2021

minimit commented Feb 25, 2021 •

edited

Loading

iammichiel commented Feb 25, 2021 •

edited

Loading

stof commented Feb 25, 2021

minimit commented Feb 25, 2021

weaverryan commented Mar 1, 2021

minimit commented Mar 1, 2021

weaverryan commented Mar 1, 2021

aarongerig commented Mar 1, 2021

cedricgeffroy commented Mar 15, 2021

aarongerig commented Mar 16, 2021

cedricgeffroy commented Mar 16, 2021

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

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

Comments

aarongerig commented Feb 24, 2021 • edited Loading

weaverryan commented Feb 25, 2021

aarongerig commented Feb 25, 2021

minimit commented Feb 25, 2021 • edited Loading

iammichiel commented Feb 25, 2021 • edited Loading

stof commented Feb 25, 2021

minimit commented Feb 25, 2021

weaverryan commented Mar 1, 2021

minimit commented Mar 1, 2021

weaverryan commented Mar 1, 2021

aarongerig commented Mar 1, 2021

cedricgeffroy commented Mar 15, 2021

aarongerig commented Mar 16, 2021

cedricgeffroy commented Mar 16, 2021

aarongerig commented Feb 24, 2021 •

edited

Loading

minimit commented Feb 25, 2021 •

edited

Loading

iammichiel commented Feb 25, 2021 •

edited

Loading