diff --git a/CHANGELOG.md b/CHANGELOG.md index 0db0eb40c86d..a73523437f3e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ ## Changelog +### v2.13.1 +14-September-2016 + +* Fix 404 error when db file does not exist [PR449](https://github.com/kadirahq/react-storybook/pull/449) + ### v2.13.0 9-September-2016 diff --git a/dist/client/preview/config_api.js b/dist/client/preview/config_api.js index e960753c00e3..506aef68d870 100644 --- a/dist/client/preview/config_api.js +++ b/dist/client/preview/config_api.js @@ -18,6 +18,8 @@ var _ = require('./'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +/* globals location */ + var ConfigApi = function () { function ConfigApi(_ref) { var channel = _ref.channel; @@ -63,7 +65,16 @@ var ConfigApi = function () { try { _this._renderMain(loaders); } catch (error) { - _this._renderError(error); + if (module.hot.status() === 'apply') { + // We got this issue, after webpack fixed it and applying it. + // Therefore error message is displayed forever even it's being fixed. + // So, we'll detect it reload the page. + location.reload(); + } else { + // If we are accessing the site, but the error is not fixed yet. + // There we can render the error. + _this._renderError(error); + } } }; diff --git a/dist/server/build.js b/dist/server/build.js old mode 100644 new mode 100755 index 11af1e285162..04c885a07a45 --- a/dist/server/build.js +++ b/dist/server/build.js @@ -90,6 +90,10 @@ if (_commander2.default.staticDir) { // It should be enabled with the --enable-db for dev server if (_commander2.default.enableDb) { var dbPath = _commander2.default.dbPath || _path2.default.resolve(configDir, 'addon-db.json'); + // create addon-db.json file if it's missing to avoid the 404 error + if (!_fs2.default.existsSync(dbPath)) { + _fs2.default.writeFileSync(dbPath, '{}'); + } _shelljs2.default.cp(dbPath, outputDir); } diff --git a/dist/server/config/utils.js b/dist/server/config/utils.js index 46d9a9aba843..04bab2f45550 100644 --- a/dist/server/config/utils.js +++ b/dist/server/config/utils.js @@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); -exports.excludePaths = exports.includePaths = exports.OccurenceOrderPlugin = undefined; +exports.nodeModulesPaths = exports.excludePaths = exports.includePaths = exports.OccurenceOrderPlugin = undefined; var _keys = require('babel-runtime/core-js/object/keys'); @@ -52,4 +52,6 @@ function loadEnv() { }); return env; -} \ No newline at end of file +} + +var nodeModulesPaths = exports.nodeModulesPaths = _path2.default.resolve('./node_modules'); \ No newline at end of file diff --git a/dist/server/config/webpack.config.js b/dist/server/config/webpack.config.js index 2fccc23589df..b0db11aa03d4 100644 --- a/dist/server/config/webpack.config.js +++ b/dist/server/config/webpack.config.js @@ -16,6 +16,10 @@ var _caseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plu var _caseSensitivePathsWebpackPlugin2 = _interopRequireDefault(_caseSensitivePathsWebpackPlugin); +var _WatchMissingNodeModulesPlugin = require('./WatchMissingNodeModulesPlugin'); + +var _WatchMissingNodeModulesPlugin2 = _interopRequireDefault(_WatchMissingNodeModulesPlugin); + var _utils = require('./utils'); var _babel = require('./babel.js'); @@ -28,14 +32,14 @@ var config = { devtool: '#cheap-module-eval-source-map', entry: { manager: [require.resolve('./polyfills'), require.resolve('../../client/manager')], - preview: [require.resolve('./polyfills'), require.resolve('./error_enhancements'), require.resolve('webpack-hot-middleware/client')] + preview: [require.resolve('./polyfills'), require.resolve('./error_enhancements'), require.resolve('webpack-hot-middleware/client') + '?reload=true'] }, output: { path: _path2.default.join(__dirname, 'dist'), filename: 'static/[name].bundle.js', publicPath: '/' }, - plugins: [new _webpack2.default.DefinePlugin((0, _utils.loadEnv)()), new _utils.OccurenceOrderPlugin(), new _webpack2.default.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin2.default()], + plugins: [new _webpack2.default.DefinePlugin((0, _utils.loadEnv)()), new _utils.OccurenceOrderPlugin(), new _webpack2.default.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin2.default(), new _WatchMissingNodeModulesPlugin2.default(_utils.nodeModulesPaths)], module: { loaders: [{ test: /\.jsx?$/, diff --git a/package.json b/package.json index 2efcd2e23c6e..cb51460234f7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kadira/storybook", - "version": "2.13.0", + "version": "2.13.1", "description": "React Storybook: Isolate React Component Development with Hot Reloading.", "repository": { "type": "git", diff --git a/src/client/preview/config_api.js b/src/client/preview/config_api.js index 56bc6a16fb84..12c62962078d 100644 --- a/src/client/preview/config_api.js +++ b/src/client/preview/config_api.js @@ -1,3 +1,5 @@ +/* globals location */ + import { setInitialStory, setError, @@ -38,7 +40,16 @@ export default class ConfigApi { try { this._renderMain(loaders); } catch (error) { - this._renderError(error); + if (module.hot.status() === 'apply') { + // We got this issue, after webpack fixed it and applying it. + // Therefore error message is displayed forever even it's being fixed. + // So, we'll detect it reload the page. + location.reload(); + } else { + // If we are accessing the site, but the error is not fixed yet. + // There we can render the error. + this._renderError(error); + } } }; diff --git a/src/server/build.js b/src/server/build.js index 31d3d61b7997..c37d257d1dfe 100644 --- a/src/server/build.js +++ b/src/server/build.js @@ -64,6 +64,10 @@ if (program.staticDir) { // It should be enabled with the --enable-db for dev server if (program.enableDb) { const dbPath = program.dbPath || path.resolve(configDir, 'addon-db.json'); + // create addon-db.json file if it's missing to avoid the 404 error + if (!fs.existsSync(dbPath)) { + fs.writeFileSync(dbPath, '{}'); + } shelljs.cp(dbPath, outputDir); } diff --git a/src/server/config/WatchMissingNodeModulesPlugin.js b/src/server/config/WatchMissingNodeModulesPlugin.js new file mode 100644 index 000000000000..40cc4b8a915c --- /dev/null +++ b/src/server/config/WatchMissingNodeModulesPlugin.js @@ -0,0 +1,34 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ +// @remove-on-eject-end + +// This Webpack plugin ensures `npm install ` forces a project rebuild. +// We’re not sure why this isn't Webpack's default behavior. +// See https://github.com/facebookincubator/create-react-app/issues/186. + +function WatchMissingNodeModulesPlugin(nodeModulesPath) { + this.nodeModulesPath = nodeModulesPath; +} + +WatchMissingNodeModulesPlugin.prototype.apply = function (compiler) { + compiler.plugin('emit', (compilation, callback) => { + const missingDeps = compilation.missingDependencies; + const nodeModulesPath = this.nodeModulesPath; + + // If any missing files are expected to appear in node_modules... + if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) { + // ...tell webpack to watch node_modules recursively until they appear. + compilation.contextDependencies.push(nodeModulesPath); + } + + callback(); + }); +}; + +module.exports = WatchMissingNodeModulesPlugin; diff --git a/src/server/config/utils.js b/src/server/config/utils.js index 77dee4b8785e..31afcb21e14d 100644 --- a/src/server/config/utils.js +++ b/src/server/config/utils.js @@ -30,3 +30,5 @@ export function loadEnv(options = {}) { return env; } + +export const nodeModulesPaths = path.resolve('./node_modules'); diff --git a/src/server/config/webpack.config.js b/src/server/config/webpack.config.js index 428fb456f3e5..f7ae029b760f 100644 --- a/src/server/config/webpack.config.js +++ b/src/server/config/webpack.config.js @@ -1,7 +1,14 @@ import path from 'path'; import webpack from 'webpack'; import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; -import { OccurenceOrderPlugin, includePaths, excludePaths, loadEnv } from './utils'; +import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin'; +import { + OccurenceOrderPlugin, + includePaths, + excludePaths, + nodeModulesPaths, + loadEnv, +} from './utils'; import babalLoaderConfig from './babel.js'; const config = { @@ -14,7 +21,7 @@ const config = { preview: [ require.resolve('./polyfills'), require.resolve('./error_enhancements'), - require.resolve('webpack-hot-middleware/client'), + `${require.resolve('webpack-hot-middleware/client')}?reload=true`, ], }, output: { @@ -27,6 +34,7 @@ const config = { new OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), + new WatchMissingNodeModulesPlugin(nodeModulesPaths), ], module: { loaders: [