Error processing Flow optional object spread caused by babel-plugin-react-docgen even though shared .babelrc #4873
Comments
|
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 30 days. Thanks! |
|
Hopefully this doesn't get closed. I think the core issue is that the code is being processed by babel-plugin-react-docgen before getting properly transpiled by other babel modules. (or something like that). Particularly annoying since I never asked to use babel-plugin-react-docgen... |
|
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 30 days. Thanks! |
|
Hi again, I'd really like to keep this from going inactive. I gave a clear example of how to reproduce with an bare minimum example repo. We have had to use quite an ugly hack to have our app work where we manually remove the |
|
Also seeing this issue. Would be great to have a fix. |
|
@maikthomas @kelchm It's a heavy-handed solution, but you can completely override the webpack config in Storybook: https://storybook.js.org/configurations/custom-webpack-config/ I'm overhauling the info addon which uses the docgen after v5 ships #1147, so I'll try to take a look at this then. Happy to take a PR for this in the meantime if anybody is interested in tackling the problem directly. |
|
For anyone running into this, here's a solution that seems to work well for me (strip out the // .storybook/webpack.config.js
// See docs: https://storybook.js.org/configurations/custom-webpack-config/
// Curious about debugging this? Try console.dir(config, {depth: null});
// See https://storybook.js.org/docs/configurations/custom-webpack-config/#debug-the-default-webpack-config
const isDocGenPlugin = plugin =>
Array.isArray(plugin) &&
typeof plugin[0] === 'string' &&
plugin[0].includes('react-docgen');
module.exports = ({config}) => {
// Strip out the babel-plugin-react-docgen
// This crashes Storybook when using certain Flow features 🙃
// See https://github.com/storybooks/storybook/issues/4873#issuecomment-458497220
const babelLoader = config.module.rules[0].use[0];
babelLoader.options.plugins = babelLoader.options.plugins.filter(
plugin => !isDocGenPlugin(plugin)
);
// Push on additional rules (support .scss)
config.module.rules.push({
test: /[.](css|scss)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
});
return config;
};Storybook would crash for me with an error: ...anytime I would attempt using types such as: // @flow
import * as React from 'react';
import {AnotherComponent} from './AnotherComponent';
// SomeComponent props API extends, but slightly differs from AnotherComponent
export function SomeComponent(props: {
someProp: string,
anotherProp: string,
...$Exact<React.ElementConfig<typeof AnotherComponent>>,
overRidePropFromAnotherComponent: string,
}) {/* ... */}... even though Flow and our actual webpack output outside Storybook were behaving as expected. FWIW I'm running into this with versions:
|
|
Hi, I just ran into a similar issue. Thanks for this report, it helped me. As a workaround I have hidden the Flow definition from Babel using a comment type include: |
|
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 30 days. Thanks! |
|
Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook! |
Describe the bug
When running storybook on a react app using flow, an optional spread type [1] causes an error [2] and storybook fails to compile.
The code runs finein the application even though storybook uses App's babel and
.babelrc.The error comes from:
babel-plugin-react-docgenTo Reproduce
Steps to reproduce the behavior:
I have created a CRA with storybook demo exhibiting this behavior.
Expected behavior
A clear and concise description of what you expected to happen.
Storybook should process the code with babel without breaking.
System:
Additional context
Add any other context about the problem here.
Example optional spread type [1] :
This is valid flow: https://flow.org/try/#0C4TwDgpgBAQghgJ3gLygXigbwD4CgpQBGiAXFAM7AICWAdgOYA0+RcyZlNDu2AvgNy5coSFABiAewkB5BJInwkbdFjwEAZlI5U6TFgDpDAfkUoeAoQGMJtSlE0Sy82fNPKMmB2QDkD7xetbYHspYgRidnEpFyk3VA8vKF8pb0ZWBB8w1NZI7wj-QSA
Error [2] : Can see in stack trace that this comes from
babel-plugin-react-docgenI can confirm that removing
babel-plugin-react-docgenfrom storybook's webpack rules fixes this.The text was updated successfully, but these errors were encountered: