Roots Discourse

Compilation error with npm run start

Hello :slight_smile:

My first post, been reading a lot of topic here from month.

I’m really new to all this stuff (1 year xp junior front end dev), so be nice with me :smiling_face_with_three_hearts:

First thanks a lot, you guys saved my life and enormous debugging time(I especially thanks the guy with avatar of a big beard and square glasses, sorry I don’t remember your name but 1000 thanks to you).

But today, I can’t find answer to my problem, so there it is :

When I npm run start, I got a blank page who’s loading infinitely.
When I inspect this page, I got only the <head> (who is correct: good links, scripts, titles, meta etc…) but no <body>.

When I change something in a files nothing happens.

What I got in my terminal:

Summary
webpack is watching the files…

(node:40683) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead


 DONE  Compiled successfully in 923ms     

ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.
    at Compiler.watch (/Users/user009/project/portail-project/web/app/themes/project/node_modules/webpack/lib/Compiler.js:237:36)
    at Object.startWatch (/Users/user009/project/portail-project/web/app/themes/project/node_modules/browsersync-webpack-plugin/node_modules/webpack-dev-middleware/lib/Shared.js:176:29)
    at Shared (/Users/user009/project/portail-project/web/app/themes/project/node_modules/browsersync-webpack-plugin/node_modules/webpack-dev-middleware/lib/Shared.js:238:8)
    at module.exports (/Users/user009/project/portail-project/web/app/themes/project/node_modules/browsersync-webpack-plugin/node_modules/webpack-dev-middleware/middleware.js:22:15)
    at BrowserSyncWebpackPlugin.setupWebpackDevMiddleware (/Users/user009/project/portail-project/web/app/themes/project/node_modules/browsersync-webpack-plugin/index.js:162:34)
    at BrowserSyncWebpackPlugin.setup (/Users/user009/project/portail-project/web/app/themes/project/node_modules/browsersync-webpack-plugin/index.js:151:12)
    at BrowserSyncWebpackPlugin.start (/Users/user009/project/portail-project/web/app/themes/project/node_modules/browsersync-webpack-plugin/index.js:130:11)
    at Object.onceWrapper (events.js:288:20)
    at BrowserSyncWebpackPlugin.emit (events.js:200:13)
    at AsyncSeriesHook.eval (eval at create (/Users/user009/project/portail-project/web/app/themes/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:18:1)
    at AsyncSeriesHook.lazyCompileHook [as callAsync] (/Users/user009/project/portail-project/web/app/themes/project/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._done (/Users/user009/project/portail-project/web/app/themes/project/node_modules/webpack/lib/Watching.js:98:28)
    at /Users/user009/project/portail-project/web/app/themes/project/node_modules/webpack/lib/Watching.js:73:19
    at Compiler.emitRecords (/Users/user009/project/portail-project/web/app/themes/project/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/user009/project/portail-project/web/app/themes/project/node_modules/webpack/lib/Watching.js:54:20
    at /Users/user009/project/portail-project/web/app/themes/project/node_modules/webpack/lib/Compiler.js:485:14
    at eval (eval at create (/Users/user009/project/portail-project/web/app/themes/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:21:1)
    at callback (/Users/user009/project/portail-project/web/app/themes/project/node_modules/stylelint-webpack-plugin/lib/run-compilation.js:57:5)
    at _next0 (eval at create (/Users/user009/project/portail-project/web/app/themes/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:17:1)
    at eval (eval at create (/Users/user009/project/portail-project/web/app/themes/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:31:1)
    at module.exports.afterEmitHandler (/Users/user009/project/portail-project/web/app/themes/project/node_modules/copy-globs-webpack-plugin/index.js:209:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user009/project/portail-project/web/app/themes/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/user009/project/portail-project/web/app/themes/project/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/user009/project/portail-project/web/app/themes/project/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/user009/project/portail-project/web/app/themes/project/node_modules/neo-async/async.js:2818:7
    at done (/Users/user009/project/portail-project/web/app/themes/project/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user009/project/portail-project/web/app/themes/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /Users/user009/project/portail-project/web/app/themes/project/node_modules/webpack/lib/Compiler.js:464:33
    at /Users/user009/project/portail-project/web/app/themes/project/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (fs.js:153:23)
[HTML Injector] Running...
[Browsersync] Proxying: http://project.test
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.10:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Watching files...

I’m on it since monday, do a lot of research about that, and I have no clue what’s happening here.

My package.json :

Summary
{
  "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 --mode=development --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",
    "test:jest": "jest"
  },
  "engines": {
    "node": ">= 8.0.0"
  },
  "devDependencies": {
    "autoprefixer": "~8.2.0",
    "browser-sync": "^2.26.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.3.0",
    "css-loader": "^0.28.9",
    "cssnano": "~4.0.5",
    "eslint": "~4.19.1",
    "eslint-loader": "~1.9",
    "eslint-plugin-import": "~2.14.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.6",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "imagemin-mozjpeg": "~7.0.0",
    "imagemin-webpack-plugin": "^2.4.2",
    "import-glob": "~1.5",
    "postcss-loader": "~2.1.0",
    "postcss-safe-parser": "~3.0",
    "resolve-url-loader": "^2.3.2",
    "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": "^4.43.0",
    "webpack-assets-manifest": "^1.0.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-middleware": "~2.0.4",
    "webpack-hot-middleware": "~2.22.3",
    "webpack-merge": "~4.1.4",
    "yargs": "~11.0.0"
  },
  "dependencies": {
    "animate.css": "^4.1.1",
    "bootstrap": "v4.3.1",
    "jquery": "^3.5.1",
    "lottie-web": "^5.7.3",
    "node-sass": "^4.14.1",
    "popper.js": "^1.16.1",
    "slick-carousel": "^1.8.1",
    "yarn": "^1.22.4"
  }
}

Webpack config files, config.json(with the good devUrl) and composer.json are the same as what you can found in https://github.com/roots/sage/tree/9.0.9

Node version is v12.4.0

My problem is the same on 4 differents computers (one windows and 3 differents macs)

Thanks for your helps, excuse my poor english :fr:

Please check this PR for sage 9.x: https://github.com/roots/sage/pull/2603