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

sage
1

I’m trying my best to troubleshoot this. I’ve checked github and eslint docs.

I’m working with a fresh Sage install. I’ve added a few ReactJs related npm packages.

When running yarn start the new browser window will pop open with no styles applied. The browser console shows the expected 404 main.css error that was mentioned in the sage docs. In my terminal console I get the following eslint error:

Module build failed: Module failed because of a eslint error.

/Users/spicuzza/Development/biolayne.com/site/web/app/themes/biolayne3/resources/assets/build/helpers/hmr-client.js
  1:37  error  Unable to resolve path to module 'webpack-hot-middleware/client?noInfo=true&timeout=20000&reload=true'  import/no-unresolved

✖ 1 problem (1 error, 0 warnings)


 @ multi ./resources/assets/build/util/../helpers/hmr-client.js ./scripts/main.js ./styles/main.scss

Is this expected behavior? Should I not see any styling?

2

If the build is failing, then the everything else isn’t going to work (including styles).

Try rerunning yarn to ensure all the Node modules are installed. webpack-hot-middleware is included in Sage 9’s package.json as a development dependency, unless it was removed, it should be installed. Double check the node_modules directory to confirm.

With your addition of a few React packages, did you happen to change the version requirements for any of Sage’s out-of-the-box dependencies? Particularly webpack? (Sage 9 uses webpack 3 exclusively.)

If you share your package.json, that’d be helpful for debugging.

3

Thanks for responding! I did try removing the node_modules folder and reinstalling all the npm packages. Production builds (yarn build) are working fine, it’s yarn start that is causing the current issues described above.

package.json

{
  "name": "sage",
  "version": "9.0.9",
  "author": "Roots <team@roots.io>",
  "homepage": "https://roots.io/sage/",
  "private": true,
  "repository": {
    "type": "git",
    "url": "git://github.com/roots/sage.git"
  },
  "bugs": {
    "url": "https://github.com/roots/sage/issues"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "http://opensource.org/licenses/MIT"
    }
  ],
  "browserslist": [
    "last 2 versions",
    "android 4",
    "opera 12"
  ],
  "scripts": {
    "build": "webpack --progress --config resources/assets/build/webpack.config.js",
    "build:production": "webpack --env.production --progress --config resources/assets/build/webpack.config.js",
    "build:profile": "webpack --progress --profile --json --config resources/assets/build/webpack.config.js",
    "start": "webpack --hide-modules --watch --config resources/assets/build/webpack.config.js",
    "rmdist": "rimraf dist",
    "lint": "npm run -s lint:scripts && npm run -s lint:styles",
    "lint:scripts": "eslint resources/assets/scripts resources/assets/build",
    "lint:styles": "stylelint \"resources/assets/styles/**/*.{css,sass,scss,sss,less}\"",
    "test": "npm run -s lint"
  },
  "engines": {
    "node": ">= 8.0.0"
  },
  "devDependencies": {
    "autoprefixer": "~8.2.0",
    "browser-sync": "~2.24.7",
    "browsersync-webpack-plugin": "^0.6.0",
    "bs-html-injector": "~3.0",
    "buble-loader": "^0.4.1",
    "cache-loader": "~1.2.5",
    "clean-webpack-plugin": "^0.1.18",
    "copy-globs-webpack-plugin": "^0.2.0",
    "css-loader": "^0.28.9",
    "cssnano": "~4.0.5",
    "eslint": "~4.19.1",
    "eslint-loader": "~1.9",
    "eslint-plugin-import": "^2.17.3",
    "extract-text-webpack-plugin": "~3.0.2",
    "file-loader": "^1.1.6",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "imagemin-mozjpeg": "~7.0.0",
    "imagemin-webpack-plugin": "~2.2.0",
    "import-glob": "~1.5",
    "node-sass": "~4.9.4",
    "postcss-loader": "~2.1.0",
    "postcss-safe-parser": "~3.0",
    "resolve-url-loader": "~2.3.1",
    "rimraf": "~2.6",
    "sass-loader": "~6.0",
    "style-loader": "^0.22.1",
    "stylelint": "^8.4.0",
    "stylelint-config-standard": "~18.2.0",
    "stylelint-webpack-plugin": "^0.10.5",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "url-loader": "^0.6.2",
    "webpack": "~3.10.0",
    "webpack-assets-manifest": "^1.0.0",
    "webpack-dev-middleware": "~2.0.4",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-merge": "~4.1.4",
    "yargs": "~11.0.0"
  },
  "dependencies": {
    "bootstrap": "v4.3.1",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^5.0.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.14.0",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.7",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "styled-components": "^4.3.2"
  }
}

eslintrc.js

module.exports = {
  root: true,
  extends: ['airbnb', 'prettier', 'prettier/react'],
  globals: {
    wp: true,
    it: false,
    expect: false,
    describe: false,
    navigator: false,
  },
  env: {
    node: true,
    es6: true,
    amd: true,
    browser: true,
    jquery: true,
  },
  parserOptions: {
    ecmaFeatures: {
      globalReturn: true,
      generators: false,
      objectLiteralDuplicateProperties: false,
      experimentalObjectRestSpread: true,
    },
    ecmaVersion: 2017,
    sourceType: 'module',
  },
  plugins: ['import', 'react', 'jsx-a11y'],
  settings: {
    'import/core-modules': [],
    'import/ignore': [
      'node_modules',
      '\\.(coffee|scss|css|less|hbs|svg|json)$',
    ],
  },
  rules: {
    'no-console': 0,
    quotes: ['error', 'single'],
    'comma-dangle': [
      'error',
      {
        arrays: 'always-multiline',
        objects: 'always-multiline',
        imports: 'always-multiline',
        exports: 'always-multiline',
        functions: 'ignore',
      },
    ],
    'react/prop-types': [0],
    'react/destructuring-assignment': [0],
    'no-use-before-define': [0],
    'import/prefer-default-export': [0],
    'react/jsx-filename-extension': ['off'],
    'linebreak-style': ['off'],
    'no-undef': ['error'],
    'react/sort-comp': ['off'],
    'react/prefer-stateless-function': ['off'],
  },
}
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
5

Good call. After removing items from the eslintrc I discovered that the airbnb extend was the culprit.

6

Awesome. If you do reimplement the airbnb eslint plugin, I suspect this could be where it might be conflicting:

1 Like
7

Just add like this in hmr-client.js

/* eslint-disable-next-line */
const hotMiddlewareScript = require('webpack-hot-middleware/client?noInfo=true&timeout=20000&reload=true');```