-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
issues with hot reloading #1328
Comments
Thanks for reporting @bodyflex. I wonder if it's possible to reproduce the behaviour consistently on a simple example? That would make it a lot easier to look into. |
I have the same issue with iframe reloading and showing the first story in it after reloading despite the fact that in the left navbar another story is active. |
Same issue for me. Until this is fixed: Is there anyway to disable hot reloading easily? Tried to remove the HotModuleReplacement plugin from the webpack config but that doesn't work. Probably because the corresponding dev server middleware is still active. |
Just in case anybody else finds this useful: Could disable hot reloading by filtering for: const plugins = storybookBaseConfig.plugins.filter(
plugin => !(plugin instanceof webpack.HotModuleReplacementPlugin)
);
const preview = storybookBaseConfig.entry.preview.filter(
previewEntry => !previewEntry.includes('webpack-hot-middleware')
); |
@tmeasday Not a simple example, but we have the issue as @Memfisrain. I will try to debug it in the next few weeks, but in case anyone was interested: https://github.com/getsentry/sentry/tree/use-react-storybook |
@billyvg @seb0zz @bodyflex @tmeasday , I've found out the problem. In my case it appeared that I skipped the second arguments in storiesOf:
However, you have to pass module as the second arguments: storiesOf('Spinner', module) Unfortunately, there is no warning about this. I'm going to create a PR, to fill this gap. Hope, it helps you guys! |
Awesome @Memfisrain !! PR to warn about this problem would be very helpful -- I believe you're not the first to run into it. |
perfect @Memfisrain, this fixed it for me as well! |
Running into this same issue (details here: #1417 (comment)). I am passing module with every |
So I'm pretty sure that this issue is caused by custom webpack config collisions, but I'm not sure how or what specifically yet. Here's what I've done to reproduce: npm i -g create-react-app @storybook/cli
create-react-app repro
cd repro && getstorybook
# at this point everything is fine, change some story files, see hmr
yarn run eject
mv config/webpack.config.dev.js .storybook/webpack.config.js
# you'll need to update a few require paths in the webpack config file
# hmr is now broken I'm guessing that the problem can be uncovered quickly now just by deleting stuff from the Here's a GIF that shows the problem: You can generate your own repro environment using the steps described above, but here's a repo you can clone for convenience: https://github.com/joefraley/repro-storybook-1328 |
I've experienced the issue that @joefraley mentioned above, the issue has gone after I added the below snippet: const extend = require('../../web/webpack.config.dev.js')
module.exports = base => {
base.module.rules = [
...base.module.rules,
...extend.module.rules
]
base.resolve.alias = {
...base.resolve.alias,
...extend.resolve.alias,
'@storybook/react-native': '@storybook/react'
}
+ base.devServer = {
+ inline: true,
+ hot: true
+ }
return base
} |
@thenewvu i didn't see any change in behavior by switching to full control mode, or by hijacking the |
@shilman, @Memfisrain i'm also passing |
so i think i got down to the minimum possible reproduction of this bug: https://github.com/joefraley/repro-storybook-1328 // .storybook/webpack.config.js
const webpack = require("webpack");
module.exports = {
plugins: [new webpack.HotModuleReplacementPlugin()] // <---
// this is the problem, but why?
// in fact, HotModuleReplacementPlugin is not the only one that seems to bug
}; // .storybook/config.js
import { configure } from "@storybook/react";
configure(() => require("../stories.js"), module); // stories.js
import React from "react";
import { storiesOf } from "@storybook/react";
import { Button, Welcome } from "@storybook/react/demo";
storiesOf("Welcome", module).add("to Story", () => <Welcome />);
storiesOf("Button", module).add("with text", () => <Button>Hello</Button>); it's frustrating though because i'm experiencing the same issue in other code bases w/o that plugin |
I think maybe this points to the possibly that it's something that's missing rather than something that should not be included. I would expect it not to work without the HMR plugin. Going to scour the storybook-provided config when you go to partial control mode and see what is in that that we're not including. It's possible this is babel config, too. |
@remotezygote this also occurs in full-control mode in just the same way. i'm happy to help, storybook is borderline unusable during component development under the weight of this bug. can you point me in a direction of where to start looking? |
@thenewvu can you share or link to the rest of your webpack configuration?
maybe also your storybook entrypoint or a storyfile that was having this problem but now is not? |
EDIT this actually doesn't help.combining some ideas described here, i think i have a workaround for my project: + const plugins = base.plugins.filter(
+ plugin => !(plugin instanceof webpack.HotModuleReplacementPlugin)
+ );
+
base.plugins = [ base.plugins = [
- ...base.plugins, + ...plugins,
+ new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NamedModulesPlugin(),
new ExtractTextPlugin({
filename: "components.css",
allChunks: true
})
]; basically i strip hmr plugin from the baseconfig, and i slap it back in from my repo's installed webpack instance, and that seems to work. i still have no idea what's going on |
@joefraley After days experimented that change, I turned out the issue sometimes still happens. Just like you, I still have no idea what's going on. |
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. We do try to do some housekeeping every once in a while so inactive issues will get closed after 60 days. Thanks! |
@tmeasday i haven't seen any change in behavior in the latest versions, nor have i seen any solution that works in the minimal-reproduction using create-react-app linked above (and here: https://github.com/joefraley/repro-storybook-1328) does that qualify the "needs reproduction" tag to be removed from this issue, and replaced with "bug"? |
I was having this same issue from the original reporter:
But when I used Ctrl+Shift+L (from the ⌘ menu) to toggle off the left side-bar menu, it locks onto the page that I want, and does not navigate away when hot-reloading. |
Too right! Thanks for the reproduction, very simple! |
OK, status report on this one, as I didn't have a lot of time to look at it. Here's the explanation, open to ideas on a fix, I haven't thought about it too much. The explanation for the behaviour is as follows (at least for @joefraley's repro): The core issue of course is that we end up with two This means what happens when you change a story is::
Because the preview iframe never changes its URL from the initial value that is set when the manager first renders it, it sees the default (initial) story on the URL when it hard-reloads, and because the manager is not hard-reloading, it doesn't think to send a message to the preview to do differently. I'm pretty sure this is the same issue that causes #614 also, although i don't have a working reproduction there right now. In any case there are two issues to solve:
|
See #2349 |
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks! |
This was fixed in 3.3.0 |
Having the same issue with This is my config: const webpack = require('webpack');
const mergeWebpackConfig = require('webpack-merge');
const { Paths } = require('../webpack/parts');
module.exports = (storybookBaseConfig, configType) => {
if (configType === 'PRODUCTION') {
// see https://github.com/storybooks/storybook/issues/1570
storybookBaseConfig.plugins = storybookBaseConfig.plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
}
return mergeWebpackConfig({
resolve: {
alias: {
src: Paths.SRC,
},
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
include: [
/src/,
/common-components/,
],
loader: 'babel-loader',
options: {
presets: [
'es2015',
'react',
],
plugins: [
'transform-class-properties',
'transform-object-rest-spread',
'transform-class-properties',
'syntax-dynamic-import',
],
},
},
{
test: /\.(?:png|jpe?g|otf|gif|svg|woff2?|ttf|eot|ico)$/,
loader: 'file-loader',
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
}, storybookBaseConfig);
}; |
we are currently experiencing some issues with hot reloading.
changing a file always results in the entire iframe being reloaded (component container goes blank and takes about 3-5s to reload).
occasionally changing a file also results in the first component in the sidebar being displayed in the component container, although the sidebar still incorrectly displays the previously active component as still active
I'm not quite sure what could be causing these problems, but we started experiencing these after upgrading to webpack 2 and to storybook 3.1.3 (from 2.35.3)
our config.js looks like this:
and we're also using a custom webpack.config.js with storybook:
The text was updated successfully, but these errors were encountered: