-
-
Notifications
You must be signed in to change notification settings - Fork 9.5k
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
Support React Native >=0.56 #4011
Comments
I had to
and then nuke all of the base config in webpack.config.js So Assuming you have a webpack.dev.config that is working for you. Try this in .storybook/webpack.config.js
|
@sirganya could you provide more info on your solution? |
Which bit loses you? |
how is the extend webpack config |
You'll have to clarify that sentence please. :) |
solved my problem in another way just migrate to 4 alpha and worked well, tks |
RN 0.57 is now out lol so this should prob track that instead? Although most of the issues I saw with 0.56 I am still seeing with 0.57 |
@sirganya In my case I am not using webpack at all just a
|
Just to clarify, I was able to make storybook works for RN 0.56, following this #3897 (comment). Unfortunately for RN 0.57 I was not able to make it work, but I simply got rid of the errors thrown by |
@Gongreg I think recent changes, mean that users can pick their own version of RN? Can you offer some advice for the people trying to upgrade to the latest and greatest RN? |
@ndelangen, to fully solve it we would need to finally separate the server from the ui part itself. Since then the ui part will be the same as user has and for the server part we could use different webpack/babel and other things. |
Would you have time for a peer programming time boxed peer programming session? We could spend a couple of hours just giving the separation a try. Without thinking too hard about backwards compatibility we might be able to create a POC in a few hours? |
I could make it work with Storybook 4.0.0-alpha.24 and React Native 0.57.2. The dependencies I changed in
I also added a
|
Update: I was able to make storybook works with RN 0.57 but in a different way than before. |
Thanks @raynor85, We also got it working with the following: {
"scripts": {
"start": "react-native start",
"start:nocache": "yarn start --reset-cache",
"storybook": "export REACT_APP_STORYBOOK=true && concurrently 'storybook start -p 7007 --skip-packager' 'yarn start'",
"storybook:nocache": "export REACT_APP_STORYBOOK=true && concurrently 'storybook start -p 7007 --skip-packager' 'yarn start:nocache'",
"android": "react-native run-android --variant=debug --appIdSuffix 'dev'",
"ios": "react-native run-ios",
},
"dependencies": {
"react": "16.5.1",
"react-native": "0.57.2"
},
"devDependencies": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-export-default-from": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-transform-flow-strip-types": "^7.0.0",
"@babel/plugin-transform-react-jsx-source": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/runtime": "^7.1.2",
"@storybook/addon-actions": "^3.4.11",
"@storybook/addon-knobs": "^3.4.11",
"@storybook/addon-links": "^3.4.11",
"@storybook/addons": "^3.4.11",
"@storybook/react-native": "^3.4.11",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^9.0.0",
"babel-jest": "^23.6.0",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-transform-inline-environment-variables": "^0.4.3",
"concurrently": "^4.0.1"
}
}
|
No luck with |
Yes, that looks like it's the issue, but I have no idea how I would go about using a forked version of that module given Storybook's mono-repo... Is anyone any closer to getting it to work with RN 0.57.2? None of the solutions above are working anymore, unfortunately. |
@cadesalaberry How are making use of the |
Hey everyone, sorry for taking so long. We are going to split the storybook server as a separate entity from react-native storybook itself so there wouldn't be issues and both babel 6 and 7 users could use it. I hope to have some time this weekend for it. |
import codePush from 'react-native-code-push';
import App from './src/App.js';
import storybook from './storybook';
const codePushOptions = {};
let appToExport = null;
if (process.env.NODE_ENV === 'development')
codePushOptions.checkFrequency = codePush.CheckFrequency.MANUAL;
/*
* TODO: remove this handling to separate storybook app from the real one
* must wait for https://github.com/facebook/metro/pull/257 to be merged
*/
appToExport = process.env.REACT_APP_STORYBOOK
? storybook
: codePush(codePushOptions)(App);
export default appToExport; Meanwhile, @kdawgwilk here is how we use it in our app. |
Any updates on this? I'm also trying to use babel 7 with storybook, but can't make it work in an expo/react-native project, I'm trying to upgrade to expo v31 I get Error: Plugin/Preset files are not allowed to export objects, only functions errors when I try to start, it seems storybook uses babel 6 packages when starting the server. Specifically, it fails on loading addons. |
@cadesalaberry how are you passing that |
In the {
"scripts": {
"storybook": "export REACT_APP_STORYBOOK=true && concurrently 'storybook start -p 7007 --skip-packager' 'yarn start'",
}
} |
An important part of getting the https://www.npmjs.com/package/babel-plugin-transform-inline-environment-variables |
Another approach is to check
|
Same error here
yarn storybook
yarn run v1.13.0
$ storybook start
=> Loading custom addons config.
=> Using default webpack setup based on "Create React App".
React Native Storybook started on => http://localhost:7007/
webpack built bd290c62c14a6b2c270e in 2358ms
✖ 「wdm」: Hash: bd290c62c14a6b2c270e
Version: webpack 4.29.5
Time: 2358ms
Built at: 02/20/2019 8:52:37 PM
Asset Size Chunks Chunk Names
index.html 700 bytes [emitted]
static/manager.bundle.js 7.14 MiB manager [emitted] manager
Entrypoint manager = static/manager.bundle.js
[0] multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js 40 bytes {manager} [built]
[./node_modules/@storybook/addons/dist/index.js] 4.23 KiB {manager} [built]
[./node_modules/@storybook/channel-websocket/dist/index.js] 3.13 KiB {manager} [built]
[./node_modules/@storybook/core-events/index.js] 493 bytes {manager} [built]
[./node_modules/@storybook/mantra-core/index.js] 41 bytes {manager} [built]
[./node_modules/@storybook/podda/dist/index.js] 4.06 KiB {manager} [built]
[./node_modules/@storybook/react-native/dist/manager/components/PreviewHelp.js] 2.44 KiB {manager} [built]
[./node_modules/@storybook/react-native/dist/manager/index.js] 467 bytes {manager} [built]
[./node_modules/@storybook/react-native/dist/manager/provider.js] 5.78 KiB{manager} [built]
[./node_modules/@storybook/ui/dist/compose.js] 763 bytes {manager} [built]
[./node_modules/@storybook/ui/dist/context.js] 309 bytes {manager} [built]
[./node_modules/@storybook/ui/dist/index.js] 3.52 KiB {manager} [built]
[./node_modules/@storybook/ui/dist/modules/api/index.js] 762 bytes {manager} [built]
[./node_modules/global/window.js] 232 bytes {manager} [built]
[./storybook/addons.js] 2.03 KiB {manager} [built] [failed] [1 error]
+ 637 hidden modules
ERROR in ./storybook/addons.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/mauricio/workspace/iclinic/newApp/node_modules/babel-preset-react/lib/index.js
at createDescriptor (/Users/mauricio/workspace/iclinic/newApp/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
at items.map (/Users/mauricio/workspace/iclinic/newApp/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/Users/mauricio/workspace/iclinic/newApp/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/mauricio/workspace/iclinic/newApp/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
at passPerPreset (/Users/mauricio/workspace/iclinic/newApp/node_modules/@babel/core/lib/config/config-descriptors.js:58:96)
at cachedFunction (/Users/mauricio/workspace/iclinic/newApp/node_modules/@babel/core/lib/config/caching.js:33:19)
at presets.presets (/Users/mauricio/workspace/iclinic/newApp/node_modules/@babel/core/lib/config/config-descriptors.js:29:84)
at mergeChainOpts (/Users/mauricio/workspace/iclinic/newApp/node_modules/@babel/core/lib/config/config-chain.js:320:26)
at /Users/mauricio/workspace/iclinic/newApp/node_modules/@babel/core/lib/config/config-chain.js:283:7
at buildRootChain (/Users/mauricio/workspace/iclinic/newApp/node_modules/@babel/core/lib/config/config-chain.js:68:29)
at loadPrivatePartialConfig (/Users/mauricio/workspace/iclinic/newApp/node_modules/@babel/core/lib/config/partial.js:85:55)
at Object.loadPartialConfig (/Users/mauricio/workspace/iclinic/newApp/node_modules/@babel/core/lib/config/partial.js:110:18)
at Object.<anonymous> (/Users/mauricio/workspace/iclinic/newApp/node_modules/babel-loader/lib/index.js:140:26)
at Generator.next (<anonymous>)
at asyncGeneratorStep (/Users/mauricio/workspace/iclinic/newApp/node_modules/babel-loader/lib/index.js:3:103)
@ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js manager[0]
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 1.39 MiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/src/server/templates/index.ejs] 1.75 KiB {HtmlWebpackPlugin_0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {HtmlWebpackPlugin_0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js472 bytes {HtmlWebpackPlugin_0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js497 bytes {HtmlWebpackPlugin_0} [built]
ℹ 「wdm」: Failed to compile. |
@mauriciord Still work in progress with no release scheduled yet 😭 |
This is still an issue, even on |
I am having this issue too...using react native 0.58.6 |
Egads!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.7 containing PR #4942 that references this issue. Upgrade today to try it out! Because it's a pre-release you can find it on the Closing this issue. Please re-open if you think there's still more to do. |
I am trying to upgrade my project to React Native 0.56.0 (it solves a problem I have with numeric keyboards on some Android devices) but I have problems with Storybook. I think this is because storybook react native plugin uses Babel 6 while React Native 0.56 uses Babel 7. I could solve such problems with Jest, but I can't find a solution for Storybook.
Here is the error I have when I start Storybook :
And my versions in
package.json
:I tried upgrading to
babel-loader
8 and adding a customwebpack.config.js
file as I found hereBut same error.
Anyone could make Storybook and React Native 0.56 work together ?
I have a Github repo with a basic project made from Ignite Andross boilerplate that I am trying to upgrade to RN 0.56.0 if you want to play with it :
https://github.com/chawax/andross-app/tree/upgrade-rn-0.56.0
The text was updated successfully, but these errors were encountered: