Fails with HMR #64
Comments
|
Thanks for reporting it! |
|
@usulpro Is there any new information? |
|
@hoschi @MarkusLanger @batazor It's strange! I tried to reproduce it on Could you show the steps or maybe a project to reproduce this bug? |
|
@usulpro unfortunately it is a closed source customer project so I can't share the sources. A minimal repo is also pretty difficult to create as our setup is really powerfull (read: complex as hell ;) ). But I can share the configuration stuff, probably you fix some strange spots? src/storybook/config/config.js import { configure, addDecorator } from '@storybook/react';
import appThemeConfig from 'theme/appThemeConfig';
import intlDecorator from 'storybook/decorators/intl';
import { muiTheme } from 'storybook-addon-material-ui';
let gravityThemeConfig = {
themeName: 'Gravity',
...appThemeConfig,
};
addDecorator(muiTheme([gravityThemeConfig]));
addDecorator(intlDecorator({}));
require('assets/styles-global/app.scss');
const req = require.context('../../', true, /.stories.js$/);
function loadStories () {
req.keys().forEach((filename) => req(filename));
}
configure(loadStories, module);src/theme/appThemeConfig.js import * as muiColors from 'material-ui/styles/colors';
import { fade } from 'material-ui/utils/colorManipulator';
export default {
palette: {
primary1Color: muiColors.blue700,
accent1Color: muiColors.red700,
},
appBar: {
color: muiColors.fullWhite,
textColor: muiColors.darkBlack,
padding: 0,
},
tabs: {
backgroundColor: muiColors.fullWhite,
// use real black as basis, so fading matches MD spec
textColor: fade(muiColors.black, 0.7),
selectedTextColor: muiColors.black,
},
};src/storybook/config/webpack.config.js const path = require('path');
const base = path.resolve(__dirname, '../../../');
const dir_stylesGlobal = path.resolve(base, 'src/assets/styles-global');
const dir_icons = path.resolve(base, 'src/assets/images/icons');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]__[hash:base64:5]',
},
},
'postcss-loader',
],
},
{
test: /\.scss$/,
exclude: dir_stylesGlobal,
loaders: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 2,
localIdentName: '[name]__[local]__[hash:base64:5]',
},
},
'postcss-loader',
'sass-loader',
],
},
{
test: new RegExp(dir_stylesGlobal + '/.*\.scss$'),
loaders: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader',
],
},
{
test: /\.json$/,
loader: 'json-loader',
include: base,
},
{
test: /\.txt$/,
loader: 'raw-loader',
include: base,
},
{
test: /\.(png|jpg|jpeg|gif|woff|woff2)$/,
loader: 'url-loader',
query: {
name: '[path][name].[ext]?[hash]',
limit: 10000,
},
include: base,
},
{
test: /\.svg$/,
include: dir_icons,
loader: 'raw-loader',
},
{
test: /\.svg$/,
exclude: dir_icons,
loader: 'url-loader',
query: {
name: '[path][name].[ext]?[hash]',
limit: 10000,
},
},
{
test: /\.(eot|ttf|wav|mp3)$/,
loader: 'file-loader',
query: {
name: '[path][name].[ext]?[hash]',
},
include: base,
},
],
},
resolve: {
extensions: ['.js'],
modules: [
base,
'src/',
'node_modules',
path.resolve(base, 'node_modules'),
],
},
};src/storybook/config/preview-head.html <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>src/storybook/config/addons.js import '@storybook/addon-actions/register';
import 'storybook-addon-material-ui';src/storybook/config/.babelrc {
"presets": ["es2015-node6/object-rest", "react"],
"plugins": [
"transform-object-rest-spread",
"syntax-dynamic-import"
],
"env": {
}
} |
|
Thanks @hoschi, now I see where is the problem! Indeed Storybook has an issue with HMR when you put global decorator outside the import { configure, addDecorator } from '@storybook/react';
import appThemeConfig from 'theme/appThemeConfig';
import intlDecorator from 'storybook/decorators/intl';
import { muiTheme } from 'storybook-addon-material-ui';
let gravityThemeConfig = {
themeName: 'Gravity',
...appThemeConfig,
};
require('assets/styles-global/app.scss');
const req = require.context('../../', true, /.stories.js$/);
function loadStories () {
addDecorator(muiTheme([gravityThemeConfig]));
addDecorator(intlDecorator({})); // <-- possible it worth to move it as well
req.keys().forEach((filename) => req(filename));
}
configure(loadStories, module); |
|
@usulpro thats it! Thanks 💯 times, manual reloading was annoying and felt like 1990 😀 |
|
@usulpro ups, forgott about storyshots. They are broken now and stop with an error:
As you say "workaround" is there a better way to fix the underlying problem? It worked before we upgraded from to |
|
The workaround you posted has also the problem that storybook ui shows the first story when HMR updates the browser. Obviously I tested it with the first story, so I didn't see that before :( |
|
yep, it's known Storybook issues. :( |
|
Hey @hoschi! Looks like HRM issue was solved in Could you try it with your project? |
|
I get an NPM error when I try it: |
|
What node/npm do you use? |
|
Nevermind, it is a bug at js-beautify beautifier/js-beautify#1247 |
|
I try the storybook update when this mess is fixed and I can again install the packages ;) |
|
Ok! if it not be fixed until tonight I'll lock this package to the previous working ver |
|
I had to update the related packages also, but this looks good 👍 HMR seems to work, I made some short tests.
|
|
Glad to hear it @hoschi! Let me know if there will be any issues |
It works fine till you change a file and hot reloading kicks in:
It seems the context get lost and the injected theme vanished. Versions:
The text was updated successfully, but these errors were encountered: