Core: Support custom addons using JSX #9648
Conversation
…or manager The big change is that now, the babel presets & plugins used for storybook (react) code are ensured for manager injected code This means addons referenced from preview.js & manager.js will load with babel config including react preset, etc.
ndelangen
added
bug
configuration babel / webpack
patch:yes
|
This pull request is being automatically deployed with ZEIT Now (learn more). |
I think emotion & decorators are a bit too opinionated to be injected into everyone's babel config.
…l config is just too dangerous, as predicted :(
|
I found that merging the babel config is dangerous, so I'm throwing out the config the user provided and using just the config I know will work for the manager runtime. This unfortunately doesn't work when the user is using babel 6. |
| @@ -27,7 +27,6 @@ export default ({ | |||
| dll, | |||
| outputDir, | |||
| cache, | |||
| babelOptions, | |||
There was a problem hiding this comment.
nevermind, i saw your comment above
|
Yes the CLI test are failing on: I'm considering dropping support for babel 6 in storybook 6.0.0. Then the CLI tests would pass. |
|
I'm fine with removing babel 6 support in 6.0 |
# Conflicts: # lib/core/package.json # lib/core/src/server/manager/manager-webpack.config.js # lib/core/src/server/preview/iframe-webpack.config.js
ndelangen
removed
the
patch:yes
|
Argh, some problem in the marko example :( |
why would do do this to ourselves?
|
@ndelangen looks like a bunch of the CLI tests are using |
|
@shilman must have been some merge conflict. I fixed that on next & merged next into this branch. I think it's all good now. |
|
@ndelangen nice work. thanks for getting this over the line! |
shilman
changed the title
Issue: #9421
What I did
MOVE the babel-loader_function to preview folder
ADD a COPY of tailored babel-loader_function for the manager
The tailored babel-loader_function adds presets & plugins for react, it makes it so the babel config is like what we use on our /addons.
Why
See the bug.
A user is using storybook for svelte, and so they do not have
@babel-preset-reactin their babel config.But now in their custom addon, there's JSX, which is not transpiled and so webpack throws and error.
How to test
To test this effectively, one should add a custom addon from 'manager.js' using something like JSX in it.
Without this change, storybook start will fail, because it will find non-js in source it cannot put into the bundle.
With this change storybook start will succeed, because the correct babel-presets & babel-plugins are added