🔧 remove react-hot-loader

- fix todo en utilisant react-hot-loader V4 gaearon/react-hot-loader#905 (comment) - utilisation du plugin webpack déjà installé
pass-culture · Aug 27, 2018 · 530f5e2 · 530f5e2
1 parent 73eadca
commit 530f5e2
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 161 deletions.
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
@@ -1,14 +1,14 @@
-const autoprefixer = require('autoprefixer')
+// const autoprefixer = require('autoprefixer')
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 const eslintFormatter = require('react-dev-utils/eslintFormatter')
-const getClientEnvironment = require('./env')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
+// const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
 const path = require('path')
-const paths = require('./paths')
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin')
 const webpack = require('webpack')
+const paths = require('./paths')
+const getClientEnvironment = require('./env')
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // In development, we always serve from the root. This makes config easier.
@@ -31,7 +31,6 @@ module.exports = {
   // This means they will be the "root" imports that are included in JS bundle.
   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
   entry: [
-    'react-hot-loader/patch',
     // We ship a few polyfills by default:
     require.resolve('./polyfills'),
     // Include an alternative client for WebpackDevServer. A client's job is to
@@ -51,53 +50,7 @@ module.exports = {
     // initialization, it doesn't blow up the WebpackDevServer client, and
     // changing JS code would still trigger a refresh.
   ],
-  output: {
-    // Add /* filename */ comments to generated require()s in the output.
-    pathinfo: true,
-    // This does not produce a real file. It's just the virtual path that is
-    // served by WebpackDevServer in development. This is the JS bundle
-    // containing code from all our entry points, and the Webpack runtime.
-    filename: 'static/js/[name].bundle.js',
-    // There are also additional JS chunk files if you use code splitting.
-    chunkFilename: 'static/js/[name].chunk.js',
-    // This is the URL that app is served from. We use "/" in development.
-    publicPath: publicPath,
-    // Point sourcemap entries to original disk location (format as URL on Windows)
-    devtoolModuleFilenameTemplate: info =>
-      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
-  },
-  resolve: {
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We placed these paths second because we want `node_modules` to "win"
-    // if there are any conflicts. This matches Node resolution mechanism.
-    // https://github.com/facebookincubator/create-react-app/issues/253
-    modules: ['node_modules', paths.appNodeModules].concat(
-      // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
-    // These are the reasonable defaults supported by the Node ecosystem.
-    // We also include JSX as a common component filename extension to support
-    // some tools, although we do not recommend using it, see:
-    // https://github.com/facebookincubator/create-react-app/issues/290
-    // `web` extension prefixes have been added for better support
-    // for React Native Web.
-    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
-    alias: {
-      // Support React Native Web
-      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web',
-    },
-    plugins: [
-      // Prevents users from importing files from outside of src/ (or node_modules/).
-      // This often causes confusion because we only process files within src/ with babel.
-      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-      // please link the files into your node_modules/ and let module-resolution kick in.
-      // Make sure your source files are compiled, as they will not be processed in any way.
-      //new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-    ],
-  },
   module: {
-    strictExportPresence: true,
     rules: [
       // TODO: Disable require.ensure as it's not a standard language feature.
       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
@@ -106,18 +59,18 @@ module.exports = {
       // First, run the linter.
       // It's important to do this before Babel processes the JS.
       {
-        test: /\.(js|jsx|mjs)$/,
         enforce: 'pre',
+        include: paths.appSrc,
+        test: /\.(js|jsx|mjs)$/,
         use: [
           {
+            loader: require.resolve('eslint-loader'),
             options: {
-              formatter: eslintFormatter,
               eslintPath: require.resolve('eslint'),
+              formatter: eslintFormatter,
             },
-            loader: require.resolve('eslint-loader'),
           },
         ],
-        include: paths.appSrc,
       },
       {
         // "oneOf" will traverse all following loaders until one will
@@ -128,16 +81,15 @@ module.exports = {
           // smaller than specified limit in bytes as data URLs to avoid requests.
           // A missing `test` is equivalent to a match.
           {
-            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.ttf$/],
             loader: require.resolve('url-loader'),
             options: {
               limit: 10000,
               name: 'static/media/[name].[hash:8].[ext]',
             },
+            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.ttf$/],
           },
           // Process JS with Babel.
           {
-            test: /\.(js|jsx|mjs)$/,
             include: paths.appSrc,
             loader: require.resolve('babel-loader'),
             options: {
@@ -146,15 +98,16 @@ module.exports = {
               // directory for faster rebuilds.
               cacheDirectory: true,
             },
+            test: /\.(js|jsx|mjs)$/,
           },
           // "sassloader" loader resolves scss to css
           // "css" loader resolves paths in CSS and adds assets as dependencies.
           // "style" loader turns CSS into JS modules that inject <style> tags.
           // In production, we use a plugin to extract that CSS to a file, but
           // in development "style" loader enables hot editing of CSS.
           {
-            test: /\.s?css$/,
             exclude: /node_modules/,
+            test: /\.s?css$/,
             use: [
               require.resolve('style-loader'),
               {
@@ -188,6 +141,37 @@ module.exports = {
         ]),
       },
     ],
+    strictExportPresence: true,
+  },
+  // Some libraries import Node modules but don't use them in the browser.
+  // Tell Webpack to provide empty mocks for them so importing them works.
+  node: {
+    child_process: 'empty',
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+  },
+  output: {
+    // There are also additional JS chunk files if you use code splitting.
+    chunkFilename: 'static/js/[name].chunk.js',
+    // Point sourcemap entries to original disk location (format as URL on Windows)
+    devtoolModuleFilenameTemplate: info =>
+      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
+    // This does not produce a real file. It's just the virtual path that is
+    // served by WebpackDevServer in development. This is the JS bundle
+    // containing code from all our entry points, and the Webpack runtime.
+    filename: 'static/js/[name].bundle.js',
+    // Add /* filename */ comments to generated require()s in the output.
+    pathinfo: true,
+    // This is the URL that app is served from. We use "/" in development.
+    publicPath,
+  },
+  // Turn off performance hints during development because we don't do any
+  // splitting or minification in interest of speed. These warnings become
+  // cumbersome.
+  performance: {
+    hints: false,
   },
   plugins: [
     // Makes some environment variables available in index.html.
@@ -223,19 +207,35 @@ module.exports = {
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
   ],
-  // Some libraries import Node modules but don't use them in the browser.
-  // Tell Webpack to provide empty mocks for them so importing them works.
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty',
-  },
-  // Turn off performance hints during development because we don't do any
-  // splitting or minification in interest of speed. These warnings become
-  // cumbersome.
-  performance: {
-    hints: false,
+
+  resolve: {
+    alias: {
+      // Support React Native Web
+      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+      'react-native': 'react-native-web',
+    },
+    // These are the reasonable defaults supported by the Node ecosystem.
+    // We also include JSX as a common component filename extension to support
+    // some tools, although we do not recommend using it, see:
+    // https://github.com/facebookincubator/create-react-app/issues/290
+    // `web` extension prefixes have been added for better support
+    // for React Native Web.
+    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
+    // This allows you to set a fallback for where Webpack should look for modules.
+    // We placed these paths second because we want `node_modules` to "win"
+    // if there are any conflicts. This matches Node resolution mechanism.
+    // https://github.com/facebookincubator/create-react-app/issues/253
+    modules: ['node_modules', paths.appNodeModules].concat(
+      // It is guaranteed to exist because we tweak it in `env.js`
+      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
+    ),
+    plugins: [
+      // Prevents users from importing files from outside of src/ (or node_modules/).
+      // This often causes confusion because we only process files within src/ with babel.
+      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+      // please link the files into your node_modules/ and let module-resolution kick in.
+      // Make sure your source files are compiled, as they will not be processed in any way.
+      // new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
+    ],
   },
 }
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "lodash.flatten": "^4.4.0",
     "lodash.get": "^4.4.2",
     "lodash.groupby": "^4.6.0",
+    "lodash.has": "^4.5.2",
     "lodash.pick": "^4.4.0",
     "lodash.uniq": "^4.5.0",
     "lodash.uniqby": "^4.7.0",
@@ -62,7 +63,6 @@
     "react-draggable": "augnustin/react-draggable#pass-culture",
     "react-final-form": "^3.6.5",
     "react-helmet": "^5.2.0",
-    "react-hot-loader": "^3.1.3",
     "react-icons": "^2.2.7",
     "react-markdown": "^3.4.1",
     "react-moment-proptypes": "^1.6.0",
@@ -162,13 +162,5 @@
       "node"
     ]
   },
-  "babel": {
-    "plugins": [
-      "react-hot-loader/babel"
-    ],
-    "presets": [
-      "react-app"
-    ]
-  },
   "homepage": "."
 }
diff --git a/src/Root.js b/src/Root.js
@@ -1,5 +1,6 @@
 import Raven from 'raven-js'
 import React from 'react'
+import has from 'lodash.has'
 import { Provider } from 'react-redux'
 import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import { PersistGate } from 'redux-persist/integration/react'
@@ -9,14 +10,13 @@ import persistor from './utils/persistor'
 import routes from './utils/routes'
 import store from './utils/store'
 import { API_URL, IS_DEV } from './utils/config'
-import { ownProperty } from './helpers'
 import { version } from '../package.json'
 import NotMatch from './components/pages/NotMatch'
 
 const buildRoute = route => {
   // lodash.get retourne 'null' pour une valeur 'null'
-  const hasexact = ownProperty(route, 'exact')
-  const isexact = hasexact ? route.exact : true
+  const hasExact = has(route, 'exact')
+  const isexact = hasExact ? route.exact : true
   // first props, last overrides
   return <Route {...route} key={route.path} exact={isexact} />
 }

diff --git a/src/index.js b/src/index.js
@@ -1,30 +1,17 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { AppContainer } from 'react-hot-loader'
 
 import './utils/install'
 import Root from './Root'
 import registerCacheWorker from './workers/cache'
 
-const NextRoot = require('./Root').default
-
-const initApp = () => {
+const renderApp = () => {
   ReactDOM.render(<Root />, document.getElementById('root'))
-  if (module.hot) {
-    module.hot.accept('./Root', () => {
-      ReactDOM.render(
-        <AppContainer>
-          <NextRoot />
-        </AppContainer>,
-        document.getElementById('root')
-      )
-    })
-  }
   registerCacheWorker()
 }
 
 if (window.cordova) {
-  document.addEventListener('deviceready', initApp, false)
+  document.addEventListener('deviceready', renderApp, false)
 } else {
-  initApp()
+  renderApp()
 }