Unable to resolve path to module 'webpack-hot-middleware'

sage
4

:thinking: The issue must be in the ESLint config additions. I have no issues using yarn start or yarn build with an minimal Sage + React setup:

$ yarn add react react-dom
$ yarn add --dev eslint-plugin-react
resources/assets/scripts/routes/common.js 
import React from 'react';
import ReactDOM from 'react-dom';

export default {
  init() {
    ReactDOM.render(
      <h1>Testing</h1>,
      document.getElementById('root')
    );
  },
};
.eslintrc.js 
diff --git a/.eslintrc.js b/.eslintrc.js
index 603b73d..af1c61e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,6 +1,9 @@
 module.exports = {
   'root': true,
-  'extends': 'eslint:recommended',
+  'extends': [
+    'eslint:recommended',
+    'plugin:react/recommended',
+  ],
   'globals': {
     'wp': true,
   },
@@ -17,6 +20,7 @@ module.exports = {
       'generators': false,
       'objectLiteralDuplicateProperties': false,
       'experimentalObjectRestSpread': true,
+      'jsx': true,
     },
     'ecmaVersion': 2017,
     'sourceType': 'module',
1 Like