{"action":"created","issue":{"url":"https://api.github.com/repos/webpack/webpack-dev-server/issues/1455","repository_url":"https://api.github.com/repos/webpack/webpack-dev-server","labels_url":"https://api.github.com/repos/webpack/webpack-dev-server/issues/1455/labels{/name}","comments_url":"https://api.github.com/repos/webpack/webpack-dev-server/issues/1455/comments","events_url":"https://api.github.com/repos/webpack/webpack-dev-server/issues/1455/events","html_url":"https://github.com/webpack/webpack-dev-server/issues/1455","id":348714998,"node_id":"MDU6SXNzdWUzNDg3MTQ5OTg=","number":1455,"title":"\"Error occured while trying to proxy\" with server-side rendering","user":{"login":"pybuche","id":7555711,"node_id":"MDQ6VXNlcjc1NTU3MTE=","avatar_url":"https://avatars0.githubusercontent.com/u/7555711?v=4","gravatar_id":"","url":"https://api.github.com/users/pybuche","html_url":"https://github.com/pybuche","followers_url":"https://api.github.com/users/pybuche/followers","following_url":"https://api.github.com/users/pybuche/following{/other_user}","gists_url":"https://api.github.com/users/pybuche/gists{/gist_id}","starred_url":"https://api.github.com/users/pybuche/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pybuche/subscriptions","organizations_url":"https://api.github.com/users/pybuche/orgs","repos_url":"https://api.github.com/users/pybuche/repos","events_url":"https://api.github.com/users/pybuche/events{/privacy}","received_events_url":"https://api.github.com/users/pybuche/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-08-08T12:59:25Z","updated_at":"2018-10-23T11:28:39Z","closed_at":"2018-10-23T11:28:39Z","author_association":"NONE","body":"<!--\r\n  Please note that this template is not optional.\r\n  Please fill out _ALL_ fields, or your issue may be closed as \"invalid.\"\r\n  Please do not delete this template.\r\n  Please ask questions on StackOverflow or Gitter (https://gitter.im/webpack/webpack).\r\n  General questions, how-to questions, and support requests will be closed.\r\n-->\r\n\r\n* Operating System: OSX 10\r\n* Node Version: 9.11.2\r\n* NPM Version: 5.6.0\r\n* webpack Version: 4.16.3\r\n* webpack-dev-server Version: 3.1.5 \r\n\r\n<!--\r\n  Please place an x, no spaces, in all [ ] that apply\r\n  Please note that we are NOT accepting FEATURE requests at this time.\r\n-->\r\n\r\n- [x] This is a **bug**\r\n- [ ] This is a **modification** request\r\n\r\n### Code\r\n\r\n<!--\r\n  If you have a large amount of code to share which demonstrates the problem\r\n  you're experiencing, or your webpack config is very large, please provide a link\r\n  to your repository rather than pasting code. We'd also encourage you to use a\r\n  Github Gist link instead of pasting code. Otherwise, please paste relevant\r\n  short snippets below.\r\n\r\n  For bugs, please do consider providing a link to a stripped-down, bare-bones\r\n  repo that can reproduce the problem you're experiencing. Many times, bugs\r\n  aren't actual bugs, but rather specific issues with loaders, plugins, or\r\n  an environment/OS. Problems with complicated or large applications will almost\r\n  always require this to be triaged.\r\n-->\r\n\r\n```js\r\n  // webpack.config.js\r\nconst path = require('path');\r\nconst webpack = require('webpack');\r\nconst nodeExternals = require('webpack-node-externals');\r\nconst UglifyJsPlugin = require('uglifyjs-webpack-plugin');\r\nconst ErrorOverlayPlugin = require('error-overlay-webpack-plugin');\r\n\r\n\r\nconst isProd = process.argv.slice(-1)[0] === 'production';\r\n\r\nconst outPath = path.resolve(__dirname, 'public/dist');\r\nconst publicPath = '/public/dist/';\r\n\r\nconst common = {\r\n    module: {\r\n        rules: [\r\n            {\r\n                test: /\\.js$/,\r\n                exclude: /node_modules/,\r\n                use: {\r\n                    loader: 'babel-loader'\r\n                }\r\n            },\r\n            {\r\n                test: /\\.woff2?$/,\r\n                loader: 'url-loader',\r\n                options: {\r\n                    name: 'fonts/[name].[ext]',\r\n                    limit: 1000,\r\n                },\r\n            },\r\n        ],\r\n    },\r\n\r\n    resolve: {\r\n        alias: {\r\n            app: path.resolve(__dirname, 'app'),\r\n            test: path.resolve(__dirname, 'test'),\r\n        },\r\n    },\r\n\r\n    optimization: {\r\n        minimizer: [\r\n            new UglifyJsPlugin({\r\n                cache: true,\r\n                parallel: true,\r\n                sourceMap: true,\r\n            }),\r\n        ],\r\n    },\r\n};\r\n\r\nconst configs = {\r\n    client: {\r\n        entry: [\r\n            'babel-polyfill',\r\n            'react-hot-loader/patch',\r\n            'webpack-dev-server/client?http://localhost:8080',\r\n            'webpack/hot/only-dev-server',\r\n            './app/components'\r\n        ],\r\n        output: {\r\n            publicPath,\r\n            path: outPath,\r\n            filename: 'client.js',\r\n        },\r\n        devtool: isProd ? 'source-map' : 'eval-source-map',\r\n        devServer: {\r\n            publicPath,\r\n            contentBase: outPath,\r\n            proxy: {\r\n                '*': {\r\n                    target: 'http://localhost:8000',\r\n                    secure: false,\r\n                },\r\n            },\r\n        },\r\n        plugins: isProd ? [] : [\r\n            new ErrorOverlayPlugin(),\r\n            new webpack.HotModuleReplacementPlugin(),\r\n        ]\r\n    },\r\n\r\n    server: {\r\n        target: 'node',\r\n        entry: ['babel-polyfill', './app/server'],\r\n        output: {\r\n            path: outPath,\r\n            publicPath,\r\n            filename: 'server.js',\r\n            libraryTarget: 'commonjs2'\r\n        },\r\n        devtool: false,\r\n        node: { __dirname: true },\r\n        externals: [ nodeExternals() ],\r\n    },\r\n};\r\n\r\nmodule.exports = [\r\n    Object.assign({}, common, configs.client),\r\n    Object.assign({}, common, configs.server),\r\n];\r\n```\r\n\r\n```js\r\n  // app/server/app.js\r\nimport express from 'express';\r\nimport cookieParser from 'cookie-parser';\r\n\r\nimport config from './config';\r\nimport { handleRender } from './render';\r\n\r\n\r\nconst app = express();\r\n\r\nconst publicDir = config.get('server.publicPath');\r\n\r\napp.use('/public', express.static(publicDir));\r\n\r\napp.use(cookieParser());\r\napp.use(handleRender);\r\n\r\nexport default app;\r\n```\r\n\r\n```js\r\n// app/components/index.js\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { BrowserRouter } from 'react-router-dom';\r\nimport { Provider } from 'react-redux';\r\n\r\nimport store from 'app/redux/store';\r\n\r\nimport App from './App';\r\n\r\nconst html = (\r\n    <Provider store={store}>\r\n        <BrowserRouter>\r\n            <App />\r\n        </BrowserRouter>\r\n    </Provider>\r\n);\r\n\r\nif (window.ssr) {\r\n    ReactDOM.hydrate(html, document.getElementById('root'));\r\n} else {\r\n    ReactDOM.render(html, document.getElementById('root'));\r\n}\r\n```\r\n\r\n```js\r\n// app/components/App.js\r\nimport _ from 'lodash';\r\nimport React from 'react';\r\nimport { Route, Switch } from 'react-router-dom';\r\nimport { hot } from 'react-hot-loader'\r\nimport { ThemeProvider } from 'styled-components';\r\n\r\nimport theme from 'app/assets/style/theme';\r\nimport Head from 'app/components/html/Head';\r\n\r\nconst App = () => (\r\n    <ThemeProvider theme={theme}>\r\n        <React.Fragment>\r\n            <Head />\r\n            <Switch>\r\n                {* my routes... *}\r\n            </Switch>\r\n        </React.Fragment>\r\n    </ThemeProvider>\r\n);\r\n\r\nexport default hot(module)(App);\r\n```\r\n\r\n### Expected Behavior\r\nI tried to integrate dev server & hot reloading for my server-side rendering React app.\r\nThe expected behavior would be to have the HMR working on every file change, when running these commands to launch the dev app:\r\n\r\n```shell\r\n// Webpack client & server\r\nTARGET=client webpack-dev-server --mode development & TARGET=server webpack --mode development --watch\r\n// Launch express server\r\nnodemon ./public/dist/server.js\r\n```\r\n\r\n### Actual Behavior\r\nCurrently, it doesn't reload at all. I tried so many combinations, I faced two quite similar behaviors, when a file is updated:\r\n\r\n1. The HMR module is triggered and I got a white screen with the following error:\r\n```\r\nError occured while trying to proxy to: localhost:8080/\r\n```\r\n2. The HMR module is triggered, updates the view, but I have the same error as above in my Chrome console. After that, any file update does nothing. \r\n\r\n### For Bugs; How can we reproduce the behavior?\r\nWith the above code snippets, you should be able to reproduce.\r\nI've found a lot of thread about this subject, telling to change the proxy wildcard to a double one or other similar ideas, but none of them ever worked...\r\n\r\nThanks!"},"comment":{"url":"https://api.github.com/repos/webpack/webpack-dev-server/issues/comments/432208608","html_url":"https://github.com/webpack/webpack-dev-server/issues/1455#issuecomment-432208608","issue_url":"https://api.github.com/repos/webpack/webpack-dev-server/issues/1455","id":432208608,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMjIwODYwOA==","user":{"login":"evilebottnawi","id":4567934,"node_id":"MDQ6VXNlcjQ1Njc5MzQ=","avatar_url":"https://avatars3.githubusercontent.com/u/4567934?v=4","gravatar_id":"","url":"https://api.github.com/users/evilebottnawi","html_url":"https://github.com/evilebottnawi","followers_url":"https://api.github.com/users/evilebottnawi/followers","following_url":"https://api.github.com/users/evilebottnawi/following{/other_user}","gists_url":"https://api.github.com/users/evilebottnawi/gists{/gist_id}","starred_url":"https://api.github.com/users/evilebottnawi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/evilebottnawi/subscriptions","organizations_url":"https://api.github.com/users/evilebottnawi/orgs","repos_url":"https://api.github.com/users/evilebottnawi/repos","events_url":"https://api.github.com/users/evilebottnawi/events{/privacy}","received_events_url":"https://api.github.com/users/evilebottnawi/received_events","type":"User","site_admin":false},"created_at":"2018-10-23T11:28:39Z","updated_at":"2018-10-23T11:28:39Z","author_association":"MEMBER","body":"@pybuche you `webpack` configuration is insane, please read documentation before setup webpack or ask other peoples on `gitter` or `stackoverflow` how do this in right way. \r\n\r\nProblems:\r\n1. `[HPM] Error occurred while trying to proxy request / from localhost:8080 to http://localhost:8000 (ECONNREFUSED)` is not related to `HMR`. This error means backend server can't response your request - he is not starting/working or already stopped due errors in `backend` server. In your case `webpack-dev-server` is async and when you run `nodemon` `server.js` script not yet created.\r\n2. First you should build `server` (`server` name configuration) when run `server` when run `client`. You need custom start script for this. Running `webpack-dev-server` start `client` and `server`. `nodemon` run server again. I.e. you have 2 server and one client.\r\n3. Don't add `webpack-dev-server/client?http://localhost:8080`. `webpack-dev-server` do this https://github.com/webpack/webpack-dev-server/blob/master/lib/utils/addEntries.js#L23. Now you have two client scripts, it is invalid.\r\n4. Don't mess `webpack-dev-server --mode development & webpack --mode development --watch`, why your start `webpack-dev-server` and `watch` together :confused: Just run `webpack-dev-server --mode development`.\r\n5. Don't run `babel-node` in `nodemon` (see `package.json`), you already using `babel-loader` for `server` entry. Otherwise you run your code throw `babel` twice.\r\n\r\nNote:\r\n1. Don't find anything in docs what says you need include `react-hot-loader/patch` in entry.\r\n2. Update `webpack-cli` and `babel` (a lot of big bugs were fixed).\r\n3. Add `target: 'web'` to client to avoid misleading.\r\n\r\nExample of same configuration https://github.com/kriasoft/react-starter-kit. You can investigate how it is work and rework you code base, sorry we can't do this for you.\r\n\r\nI close this issue, because your problems not related to `webpack-dev-server`, you have invalid configuration and script order."}}
{"actor":{"display_login":"evilebottnawi"}}