Refactor: Remove webpack from peerDependencies

Check webpack availability and version at run time instead of using peerDependencies to allow usage of build tools that contains webpack as their own dependency, like Create React App.

See discussion here: facebook/create-react-app#2044

Author: sapegin

bin/styleguidist.js

@@ -15,6 +15,27 @@ const StyleguidistError = require('../scripts/utils/error');
 const argv = minimist(process.argv.slice(2));
 const command = argv._[0];
 
+// Do not show nasty stack traces for Styleguidist errors
+process.on('uncaughtException', err => {
+	if (err.code === 'EADDRINUSE') {
+		printErrorWithLink(
+			`You have another server running at port ${config.serverPort} somewhere, shut it down first`,
+			'You can change the port using the `serverPort` option in your style guide config:',
+			consts.DOCS_CONFIG
+		);
+	} else if (err instanceof StyleguidistError) {
+		console.error(chalk.bold.red(err.message));
+		logger.debug(err.stack);
+		process.exit(1);
+	} else {
+		throw err;
+	}
+	process.exit(1);
+});
+
+// Make sure user has webpack installed
+require('../scripts/utils/ensureWebpack');
+
 // Set environment before loading style guide config because user’s webpack config may use it
 const env = command === 'build' ? 'production' : 'development';
 process.env.NODE_ENV = env;
@@ -80,20 +101,6 @@ function commandBuild() {
 }
 
 function commandServer() {
-	process.on('uncaughtException', err => {
-		if (err.code === 'EADDRINUSE') {
-			printErrorWithLink(
-				`You have another server running at port ${config.serverPort} somewhere, shut it down first`,
-				'You can change the port using the `serverPort` option in your style guide config:',
-				consts.DOCS_CONFIG
-			);
-		} else {
-			console.error(chalk.bold.red(err.message));
-			logger.debug(err.stack);
-		}
-		process.exit(1);
-	});
-
 	const server = require('../scripts/server');
 	const compiler = server(config, err => {
 		if (err) {

docs/GettingStarted.md

@@ -2,25 +2,19 @@
 
 ## 1. Install Styleguidist
 
-1. Install Styleguidist and peer dependencies from npm:
+Install Styleguidist from npm:
 
-   ```bash
-   npm install --save-dev react-styleguidist react react-dom webpack
-   ```
-
-2. [Point Styleguidist to your React components](Components.md)
-
-3. [Tell Styleguidist how to load your code](Webpack.md)
+```bash
+npm install --save-dev react-styleguidist
+```
 
-> **Note:** Webpack is a peer dependency but your project doesn’t have to use it. Styleguidist works with webpack 1 and webpack 2.
+## 2. Configure your style guide
 
-**If you’re using [Create React App](https://github.com/facebookincubator/create-react-app) you only need this:**
+**If you’re using [Create React App](https://github.com/facebookincubator/create-react-app) you can skip this step.**
 
-```bash
-npm install --save-dev react-styleguidist webpack
-```
+[Point Styleguidist to your React components](Components.md) and [tell how to load your code](Webpack.md).
 
-## 2. Add npm scripts for convenience (optional)
+## 3. Add npm scripts for convenience
 
 Add these scripts to your `package.json`:
 
@@ -33,13 +27,13 @@ Add these scripts to your `package.json`:
 }
 ```
 
-## 3. Start your style guide
+## 4. Start your style guide
 
 Run **`npm run styleguide`** to start style a guide dev server.
 
 Run **`npm run styleguide:build`** to build a static version.
 
-## 4. Start documenting your components
+## 5. Start documenting your components
 
 See how to [document your components](Documenting.md)
 

package-lock.json

@@ -83,8 +83,7 @@
   },
   "peerDependencies": {
     "react": ">=15",
-    "react-dom": ">=15",
-    "webpack": ">=1"
+    "react-dom": ">=15"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",

package.json

@@ -1,5 +1,8 @@
 'use strict';
 
+// Make sure user has webpack installed
+require('./utils/ensureWebpack');
+
 const build = require('./build');
 const server = require('./server');
 const makeWebpackConfig = require('./make-webpack-config');

scripts/index.js

@@ -6,7 +6,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const merge = require('webpack-merge');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const forEach = require('lodash/forEach');
-const logger = require('glogg')('rsg');
 const hasJsonLoader = require('./utils/hasJsonLoader');
 const getWebpackVersion = require('./utils/getWebpackVersion');
 const mergeWebpackConfig = require('./utils/mergeWebpackConfig');
@@ -21,12 +20,6 @@ const htmlLoader = require.resolve('html-webpack-plugin/lib/loader');
 module.exports = function(config, env) {
 	process.env.NODE_ENV = process.env.NODE_ENV || env;
 
-	if (isWebpack1) {
-		logger.warn(
-			'Support for webpack 1 will be removed in the next major version of React Styleguidist.'
-		);
-	}
-
 	const isProd = env === 'production';
 
 	let webpackConfig = {

scripts/make-webpack-config.js

@@ -0,0 +1,29 @@
+'use strict';
+
+/**
+ * Check webpack availability and version at run time instead of using peerDependencies to allow
+ * usage of build tools that contains webpack as their own dependency, like Create React App.
+ */
+
+const logger = require('glogg')('rsg');
+const getWebpackVersion = require('./getWebpackVersion');
+const StyleguidistError = require('./error');
+const consts = require('../consts');
+
+const MIN_WEBPACK_VERSION = 1;
+const webpackVersion = getWebpackVersion();
+
+if (!webpackVersion) {
+	throw new StyleguidistError(
+		'Webpack is required for Styleguidist, please add it to your project:\n\n' +
+			'    npm install --save-dev webpack\n\n' +
+			'See how to configure it for your style guide:\n' +
+			consts.DOCS_WEBPACK
+	);
+} else if (webpackVersion < MIN_WEBPACK_VERSION) {
+	throw new StyleguidistError(
+		`Webpack ${webpackVersion} is not supported by Styleguidist, the minimum version is ${MIN_WEBPACK_VERSION}`
+	);
+} else if (webpackVersion < 2) {
+	logger.warn('Support for webpack 1 will be removed in the next major version of Styleguidist');
+}

scripts/utils/ensureWebpack.js

@@ -8,5 +8,9 @@ const semverUtils = require('semver-utils');
  * @return {number}
  */
 module.exports = function getWebpackVersion() {
-	return Number(semverUtils.parseRange(require('webpack/package.json').version)[0].major);
+	try {
+		return Number(semverUtils.parseRange(require('webpack/package.json').version)[0].major);
+	} catch (err) {
+		return undefined;
+	}
 };