{"action":"created","issue":{"url":"https://api.github.com/repos/shellscape/webpack-plugin-serve/issues/117","repository_url":"https://api.github.com/repos/shellscape/webpack-plugin-serve","labels_url":"https://api.github.com/repos/shellscape/webpack-plugin-serve/issues/117/labels{/name}","comments_url":"https://api.github.com/repos/shellscape/webpack-plugin-serve/issues/117/comments","events_url":"https://api.github.com/repos/shellscape/webpack-plugin-serve/issues/117/events","html_url":"https://github.com/shellscape/webpack-plugin-serve/issues/117","id":423974815,"node_id":"MDU6SXNzdWU0MjM5NzQ4MTU=","number":117,"title":"Migration from create-react-app","user":{"login":"aaronjensen","id":8588,"node_id":"MDQ6VXNlcjg1ODg=","avatar_url":"https://avatars3.githubusercontent.com/u/8588?v=4","gravatar_id":"","url":"https://api.github.com/users/aaronjensen","html_url":"https://github.com/aaronjensen","followers_url":"https://api.github.com/users/aaronjensen/followers","following_url":"https://api.github.com/users/aaronjensen/following{/other_user}","gists_url":"https://api.github.com/users/aaronjensen/gists{/gist_id}","starred_url":"https://api.github.com/users/aaronjensen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aaronjensen/subscriptions","organizations_url":"https://api.github.com/users/aaronjensen/orgs","repos_url":"https://api.github.com/users/aaronjensen/repos","events_url":"https://api.github.com/users/aaronjensen/events{/privacy}","received_events_url":"https://api.github.com/users/aaronjensen/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2019-03-21T22:48:15Z","updated_at":"2019-03-21T22:56:46Z","closed_at":null,"author_association":"NONE","body":"<!--\r\n  ⚡️ katchow! We 💛 issues.\r\n\r\n  Please - do not - remove this template.\r\n  Please - do not - skip or remove parts of this template.\r\n  Or your issue may be closed.\r\n\r\n  👉🏽 Need help or support? Open a SUPPORT issue instead.\r\n-->\r\n\r\nDocumentation Is:\r\n\r\n<!-- Please place an x (no spaces!) in all [ ] that apply -->\r\n\r\n- [ ] Missing\r\n- [x] Needed\r\n- [ ] Confusing\r\n- [ ] Not Sure?\r\n\r\n### Please Explain in Detail...\r\n\r\nHi there, I'm trying to swap out the create-react-app server for webpack-plugin-serve and hit the 404 issue: `https://github.com/shellscape/webpack-plugin-serve/blob/master/.github/FAQ.md#what-does-the-not-found--404-error-mean`. I was able to get around that, but now I'm hitting another issue:\r\n\r\n```\r\nreact-dom.development.js:2490 Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined\r\n    at react-dom.development.js:2490\r\n    at Object.../node_modules/react-dom/cjs/react-dom.development.js (react-dom.development.js:22346)\r\n    at __webpack_require__ (bootstrap:781)\r\n    at fn (bootstrap:149)\r\n    at Object.../node_modules/react-dom/index.js (index.js:36)\r\n    at __webpack_require__ (bootstrap:781)\r\n    at fn (bootstrap:149)\r\n    at Object.../node_modules/react-hot-loader/dist/react-hot-loader.development.js (react-hot-loader.development.js:17)\r\n    at __webpack_require__ (bootstrap:781)\r\n    at fn (bootstrap:149)\r\n```\r\n\r\nI'll probably be able to sort through it all, but having a step-by-step guide of porting from create-react-app would be really helpful to me and probably others. It may even lead to further adoption!\r\n\r\n### Your Proposal for Changes\r\n\r\nAdd a guide for adding webpack-plugin-serve to an ejected create-react-app"},"comment":{"url":"https://api.github.com/repos/shellscape/webpack-plugin-serve/issues/comments/475433742","html_url":"https://github.com/shellscape/webpack-plugin-serve/issues/117#issuecomment-475433742","issue_url":"https://api.github.com/repos/shellscape/webpack-plugin-serve/issues/117","id":475433742,"node_id":"MDEyOklzc3VlQ29tbWVudDQ3NTQzMzc0Mg==","user":{"login":"aaronjensen","id":8588,"node_id":"MDQ6VXNlcjg1ODg=","avatar_url":"https://avatars3.githubusercontent.com/u/8588?v=4","gravatar_id":"","url":"https://api.github.com/users/aaronjensen","html_url":"https://github.com/aaronjensen","followers_url":"https://api.github.com/users/aaronjensen/followers","following_url":"https://api.github.com/users/aaronjensen/following{/other_user}","gists_url":"https://api.github.com/users/aaronjensen/gists{/gist_id}","starred_url":"https://api.github.com/users/aaronjensen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aaronjensen/subscriptions","organizations_url":"https://api.github.com/users/aaronjensen/orgs","repos_url":"https://api.github.com/users/aaronjensen/repos","events_url":"https://api.github.com/users/aaronjensen/events{/privacy}","received_events_url":"https://api.github.com/users/aaronjensen/received_events","type":"User","site_admin":false},"created_at":"2019-03-21T22:56:46Z","updated_at":"2019-03-21T22:56:46Z","author_association":"NONE","body":"Sure:\r\n\r\n<details>\r\n<summary>webpack.config.js diff</summary>\r\n\r\n```diff\r\ndiff --git a/client/config/webpack.config.js b/client/config/webpack.config.js\r\nindex 426617a..0f57934 100644\r\n--- a/client/config/webpack.config.js\r\n+++ b/client/config/webpack.config.js\r\n@@ -19,10 +19,28 @@ const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeM\r\n const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')\r\n const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')\r\n const paths = require('./paths')\r\n-const getClientEnvironment = require('./env')\r\n const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin')\r\n const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin')\r\n const typescriptFormatter = require('react-dev-utils/typescriptFormatter')\r\n+const { WebpackPluginServe: Serve } = require('webpack-plugin-serve')\r\n+const argv = require('webpack-nano/argv')\r\n+\r\n+const watch = !!argv.watch\r\n+\r\n+if (watch) {\r\n+  // Do this as the first thing so that any code reading it knows the right env.\r\n+  process.env.BABEL_ENV = 'development'\r\n+  process.env.NODE_ENV = 'development'\r\n+\r\n+  // Makes the script crash on unhandled rejections instead of silently\r\n+  // ignoring them. In the future, promise rejections that are not handled will\r\n+  // terminate the Node.js process with a non-zero exit code.\r\n+  process.on('unhandledRejection', err => {\r\n+    throw err\r\n+  })\r\n+}\r\n+\r\n+const getClientEnvironment = require('./env')\r\n \r\n // Source maps are resource heavy and can cause out of memory issue for large source files.\r\n const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'\r\n@@ -42,7 +60,8 @@ const sassModuleRegex = /\\.module\\.(scss|sass)$/\r\n // This is the production and development configuration.\r\n // It is focused on developer experience, fast rebuilds, and a minimal bundle.\r\n module.exports = function(webpackEnv) {\r\n-  const isEnvDevelopment = webpackEnv === 'development'\r\n+  const isEnvDevelopment =\r\n+    webpackEnv === 'development' || process.env.NODE_ENV === 'development'\r\n   const isEnvProduction = webpackEnv === 'production'\r\n \r\n   // Webpack uses `publicPath` to determine where the app is being served from.\r\n@@ -124,23 +143,9 @@ module.exports = function(webpackEnv) {\r\n     // These are the \"entry points\" to our application.\r\n     // This means they will be the \"root\" imports that are included in JS bundle.\r\n     entry: [\r\n-      // Include an alternative client for WebpackDevServer. A client's job is to\r\n-      // connect to WebpackDevServer by a socket and get notified about changes.\r\n-      // When you save a file, the client will either apply hot updates (in case\r\n-      // of CSS changes), or refresh the page (in case of JS changes). When you\r\n-      // make a syntax error, this client will display a syntax error overlay.\r\n-      // Note: instead of the default WebpackDevServer client, we use a custom one\r\n-      // to bring better experience for Create React App users. You can replace\r\n-      // the line below with these two lines if you prefer the stock client:\r\n-      // require.resolve('webpack-dev-server/client') + '?/',\r\n-      // require.resolve('webpack/hot/dev-server'),\r\n-      isEnvDevelopment &&\r\n-        require.resolve('react-dev-utils/webpackHotDevClient'),\r\n       // Finally, this is your app's code:\r\n       paths.appIndexJs,\r\n-      // We include the app code last so that if there is a runtime error during\r\n-      // initialization, it doesn't blow up the WebpackDevServer client, and\r\n-      // changing JS code would still trigger a refresh.\r\n+      isEnvDevelopment && 'webpack-plugin-serve/client',\r\n     ].filter(Boolean),\r\n     output: {\r\n       // The build folder.\r\n@@ -509,8 +514,6 @@ module.exports = function(webpackEnv) {\r\n       // during a production build.\r\n       // Otherwise React will be compiled in the very slow development mode.\r\n       new webpack.DefinePlugin(env.stringified),\r\n-      // This is necessary to emit hot updates (currently CSS only):\r\n-      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),\r\n       // Watcher doesn't work well if you mistype casing in a path so we use\r\n       // a plugin that prints an error when you attempt to do this.\r\n       // See https://github.com/facebook/create-react-app/issues/240\r\n@@ -565,7 +568,7 @@ module.exports = function(webpackEnv) {\r\n           }),\r\n           async: isEnvDevelopment,\r\n           useTypescriptIncrementalApi: true,\r\n-          checkSyntacticErrors: true,\r\n+          checkSyntacticErrors: false,\r\n           tsconfig: paths.appTsConfig,\r\n           reportFiles: [\r\n             '**',\r\n@@ -576,10 +579,16 @@ module.exports = function(webpackEnv) {\r\n             '!**/src/setupTests.*',\r\n           ],\r\n           watch: paths.appSrc,\r\n-          silent: true,\r\n+          silent: false,\r\n           // The formatter is invoked directly in WebpackDevServerUtils during development\r\n           formatter: isEnvProduction ? typescriptFormatter : undefined,\r\n         }),\r\n+      isEnvDevelopment &&\r\n+        new Serve({\r\n+          historyFallback: true,\r\n+          static: paths.appBuild,\r\n+          port: 3000,\r\n+        }),\r\n     ].filter(Boolean),\r\n     // Some libraries import Node modules but don't use them in the browser.\r\n     // Tell Webpack to provide empty mocks for them so importing them works.\r\n@@ -595,5 +604,6 @@ module.exports = function(webpackEnv) {\r\n     // Turn off performance processing because we utilize\r\n     // our own hints via the FileSizeReporter\r\n     performance: false,\r\n+    watch,\r\n   }\r\n }\r\n```\r\n</details>"}}
{"actor":{"display_login":"aaronjensen"}}