yarn dev fails after @zeit/next-sass plugin added

[ahmedmusawir]

Node v8.12
MacOSX HighSierra

1st crashes with the following:

`
Mooses-High-Sierra:next-boilerplate-1 moose$ yarn dev
yarn run v1.10.1
$ node server
/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/5-phase-next-js/next-boilerplate-1/node_modules/mini-css-extract-plugin/dist/index.js:20
util: { createHash }
^

TypeError: Cannot destructure property createHash of 'undefined' or 'null'.
at Object. (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/5-phase-next-js/next-boilerplate-1/node_modules/mini-css-extract-plugin/dist/index.js:21:5)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object. (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/5-phase-next-js/next-boilerplate-1/node_modules/mini-css-extract-plugin/dist/cjs.js:3:18)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
`
Turns out mini-css-extract-plugin required webpack 4. And when I upgrade webpack to 4, this happens"

Mooses-High-Sierra:redux-next-styled-2 moose$ yarn dev yarn run v1.10.1 $ node server UPDATE AVAILABLE The latest version ofnextis 7.0.2 (node:14871) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'thisCompilation' of undefined at definitions.keys.reduce (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/5-phase-next-js/redux-next-styled-2/node_modules/webpack/lib/EnvironmentPlugin.js:50:20) at Array.reduce (<anonymous>) at EnvironmentPlugin.apply (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/5-phase-next-js/redux-next-styled-2/node_modules/webpack/lib/EnvironmentPlugin.js:36:33) at Compiler.apply (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/5-phase-next-js/redux-next-styled-2/node_modules/tapable/lib/Tapable.js:375:16) at webpack (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/5-phase-next-js/redux-next-styled-2/node_modules/next/node_modules/webpack/lib/webpack.js:33:19) at options.map.options (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/5-phase-next-js/redux-next-styled-2/node_modules/next/node_modules/webpack/lib/webpack.js:23:55) at Array.map (<anonymous>) at webpack (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/5-phase-next-js/redux-next-styled-2/node_modules/next/node_modules/webpack/lib/webpack.js:23:40) at HotReloader._callee3$ (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/5-phase-next-js/redux-next-styled-2/node_modules/next/dist/server/hot-reloader.js:248:49) at tryCatch (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/5-phase-next-js/redux-next-styled-2/node_modules/regenerator-runtime/runtime.js:62:40) at Generator.invoke [as _invoke] (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/5-phase-next-js/redux-next-styled-2/node_modules/regenerator-runtime/runtime.js:296:22) at Generator.prototype.(anonymous function) [as next] (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/5-phase-next-js/redux-next-styled-2/node_modules/regenerator-runtime/runtime.js:114:21) at step (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/5-phase-next-js/redux-next-styled-2/node_modules/@babel/runtime/helpers/asyncToGenerator.js:12:30) at _next (/Volumes/HDD80GB/Users/moose/Documents/_DEV/react-apps/5-phase-next-js/redux-next-styled-2/node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:9) at <anonymous> (node:14871) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:14871) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. ✨ Done in 1.98s.
Even updated Next.js to 7.0.2 and still the same! I'm lost at this point and no other help is available.

[arefaslani]

Sorry @ahmedmusawir, we no longer use or maintain this boilerplate. But at some point we were using node-sass to compile our global scss files. You can check git history to see how we did that.