Skip to content
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

Closed
chawax opened this issue Aug 13, 2018 · 31 comments
Closed

Support React Native >=0.56 #4011

chawax opened this issue Aug 13, 2018 · 31 comments

Comments

@chawax
Copy link

chawax commented Aug 13, 2018

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 :

> [email protected] storybook /Users/administrateur/asi/AndrossApp
> storybook start -p 7007

=> Loading custom addons config.
=> Loading custom webpack config (full-control mode).
Scanning folders for symlinks in /Users/administrateur/asi/AndrossApp/node_modules (33ms)

React Native Storybook started on => http://localhost:7007/

webpack built 68d7e9d27300f998ce2c in 5782ms
✖ 「wdm」: Hash: 68d7e9d27300f998ce2c
Version: webpack 4.16.5
Time: 5782ms
Built at: 2018-08-13 09:47:37
                   Asset       Size   Chunks             Chunk Names
static/manager.bundle.js   6.18 MiB  manager  [emitted]  manager
              index.html  637 bytes           [emitted]  
Entrypoint manager = static/manager.bundle.js
[./node_modules/@storybook/channel-websocket/dist/index.js] 2.76 KiB {manager} [built]
[./node_modules/@storybook/core-events/index.js] 412 bytes {manager} [built]
[./node_modules/@storybook/react-native/dist/manager/index.js] 511 bytes {manager} [built]
[./node_modules/@storybook/react-native/dist/manager/provider.js] 4.24 KiB {manager} [built]
[./node_modules/@storybook/ui/dist/index.js] 2.38 KiB {manager} [built]
[./node_modules/@storybook/ui/dist/modules/ui/index.js] 1010 bytes {manager} [built]
[./node_modules/babel-runtime/helpers/classCallCheck.js] 208 bytes {manager} [built]
[./node_modules/babel-runtime/helpers/extends.js] 544 bytes {manager} [built]
[./node_modules/babel-runtime/helpers/inherits.js] 1.08 KiB {manager} [built]
[./node_modules/babel-runtime/helpers/possibleConstructorReturn.js] 542 bytes {manager} [built]
[./node_modules/global/window.js] 232 bytes {manager} [built]
[./node_modules/react/index.js] 190 bytes {manager} [built]
[0] multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js 40 bytes {manager} [built]
[./node_modules/uuid/index.js] 120 bytes {manager} [built]
[./storybook/addons.js] 1.36 KiB {manager} [built] [failed] [1 error]
    + 576 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/administrateur/asi/AndrossApp/node_modules/babel-preset-react/lib/index.js
    at createDescriptor (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-descriptors.js:138:11)
    at items.map (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-descriptors.js:69:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-descriptors.js:69:29)
    at createPresetDescriptors (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-descriptors.js:61:10)
    at passPerPreset (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-descriptors.js:53:96)
    at cachedFunction (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/caching.js:32:19)
    at presets.presets (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-descriptors.js:25:30)
    at mergeChainOpts (/Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-chain.js:303:26)
    at /Users/administrateur/asi/AndrossApp/node_modules/@babel/core/lib/config/config-chain.js:266:7
 @ multi ./storybook/addons.js ./node_modules/@storybook/react-native/dist/manager/index.js manager[0]
Child html-webpack-plugin for "index.html":
         Asset      Size  Chunks  Chunk Names
    index.html  1.38 MiB       0  
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/src/server/index.html.ejs] 926 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ 「wdm」: Failed to compile.

And my versions in package.json :

  "dependencies": {
    "react": "16.4.1",
    "react-native": "0.56.0",
  },
  "devDependencies": {
    "@babel/core": "7.0.0-rc.1",
    "@storybook/addon-storyshots": "4.0.0-alpha.16",
    "@storybook/addons": "4.0.0-alpha.16",
    "@storybook/channels": "4.0.0-alpha.16",
    "@storybook/react-native": "4.0.0-alpha.16",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "7.1.1",
    "babel-jest": "23.4.2",
    "babel-loader": "8.0.0-beta.4",
    "babel-preset-react-native": "5.0.2",
  },

I tried upgrading to babel-loader8 and adding a custom webpack.config.js file as I found here

module.exports = (baseConfig, env, defaultConfig) => {
  // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
  defaultConfig.module.rules[0].loader = require.resolve("babel-loader");
  return defaultConfig;
};

But 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

@sirganya
Copy link

I had to

npm install [email protected]

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


const extend = require('path to your webpack.config.dev');

module.exports = (base) => {
  base.module.rules = [
    ...extend.module.rules,
  ];
  base.resolve = {
    ...extend.resolve,
  };
  base.devServer = {
    inline: true,
    hot: true,
  };
  return base;
};

@stale stale bot added the inactive label Sep 3, 2018
@sibelius
Copy link

sibelius commented Sep 5, 2018

@sirganya could you provide more info on your solution?

@stale stale bot removed the inactive label Sep 5, 2018
@sirganya
Copy link

sirganya commented Sep 5, 2018

Which bit loses you?

@sibelius
Copy link

sibelius commented Sep 5, 2018

how is the extend webpack config

@sirganya
Copy link

sirganya commented Sep 5, 2018

You'll have to clarify that sentence please. :)

@sibelius
Copy link

sibelius commented Sep 5, 2018

solved my problem in another way

just migrate to 4 alpha and worked well, tks

@Hypnosphi Hypnosphi changed the title "Plugin/Preset files are not allowed to export objects, only functions" with React Native 0.56 Support React Native 0.56 Sep 13, 2018
@kdawgwilk
Copy link

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

@kdawgwilk
Copy link

@sirganya In my case I am not using webpack at all just a .babelrc

{
  "presets": ["module:metro-react-native-babel-preset"],
  "retainLines": true,
  "passPerPreset": true,
  "plugins": [
    ["relay", {"schema": "./schema.json"}],

    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-transform-runtime", {
      "helpers": true,
      "regenerator": false
    }],
    ["./app/babel-plugin-proposal-class-properties", { "loose": true }],

    "lodash",
    ["react-intl", {
      "messagesDir": "./extracted-messages/",
      "enforceDescriptions": false
    }]
  ]
}

@Hypnosphi Hypnosphi changed the title Support React Native 0.56 Support React Native >=0.56 Sep 17, 2018
@raynor85
Copy link

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 yarn storybook following the comment #3897 (comment). It looks like one user was able to make it work with this method, so please let me know if it works for you!

@storybookjs storybookjs deleted a comment from stale bot Oct 13, 2018
@ndelangen
Copy link
Member

@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?

@Gongreg
Copy link
Member

Gongreg commented Oct 13, 2018

@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.

@ndelangen
Copy link
Member

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?

@chawax
Copy link
Author

chawax commented Oct 14, 2018

I could make it work with Storybook 4.0.0-alpha.24 and React Native 0.57.2.

The dependencies I changed in package.json :

"@storybook/addon-actions": "4.0.0-alpha.24",
 "@storybook/addon-storyshots": "4.0.0-alpha.24",
"@storybook/addons": "4.0.0-alpha.24",
"@storybook/react-native": "4.0.0-alpha.24",
"babel-core": "7.0.0-bridge.0",

I also added a storybook script in package.json :

"storybook": "storybook start -p 7007 --skip-packager | react-native start --projectRoot storybook",

@raynor85
Copy link

raynor85 commented Oct 14, 2018

Update: I was able to make storybook works with RN 0.57 but in a different way than before.
You need to inject storybook conditionally and register it to the app in index.js rather than simply running it using yarn storybook. Little difference, but no big deal

@cadesalaberry
Copy link

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"
  }
}

@namxam
Copy link

namxam commented Oct 22, 2018

No luck with 4.0.0-rc.1. From what I have seen SB now works with babel 7. But the react-native version still requires the v6 babel-preset-react instead of v7's @babel/preset-react.

@matt-oakes
Copy link
Contributor

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.

@kdawgwilk
Copy link

@cadesalaberry How are making use of the REACT_APP_STORYBOOK flag you are passing to the CLI? Can you show the code where you are switching out the app UI for the StorybookUI?

@Gongreg
Copy link
Member

Gongreg commented Oct 29, 2018

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.

@cadesalaberry
Copy link

App.js

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.

@Isakdl
Copy link

Isakdl commented Nov 26, 2018

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.

@kdawgwilk
Copy link

@cadesalaberry how are you passing that REACT_APP_STORYBOOK variable when you start the packager?

@cadesalaberry
Copy link

cadesalaberry commented Nov 28, 2018

In the package.json further up, the relevant line is:

{
  "scripts": {
    "storybook": "export REACT_APP_STORYBOOK=true && concurrently 'storybook start -p 7007 --skip-packager' 'yarn start'",
  }
}

@matt-oakes
Copy link
Contributor

An important part of getting the REACT_APP_STORYBOOK to work is to configure the babel-plugin-transform-inline-environment-variables Babel plugin. Details:

https://www.npmjs.com/package/babel-plugin-transform-inline-environment-variables

@sairus2k
Copy link
Member

sairus2k commented Dec 4, 2018

Another approach is to check REACT_APP_STORYBOOK variable in rn-cli.config.js file, where it is available without babel plugin.

const path = require('path');

module.exports = {
  // other options
};

if (process.env.REACT_APP_STORYBOOK) {
  module.exports.projectRoot = path.resolve(__dirname, 'storybook');
  module.exports.watchFolders = ['src', 'node_modules'].map(p => path.resolve(__dirname, p));
}

@igor-dv igor-dv mentioned this issue Dec 6, 2018
8 tasks
@Gongreg
Copy link
Member

Gongreg commented Dec 12, 2018

Hey, sorry for taking so long. I've asked @igor-dv for the help, and he did the whole work :)

#4942

I will be released in storybook V5 so some time in January.

@mauriciord
Copy link

Same error here
Any solution ?

"react-native": "0.58.5"
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.

@shilman
Copy link
Member

shilman commented Feb 21, 2019

@mauriciord Still work in progress with no release scheduled yet 😭

@M3kH
Copy link

M3kH commented Mar 2, 2019

This is still an issue, even on v5 with VUE_SFC

@wilbyang
Copy link

wilbyang commented Mar 4, 2019

I am having this issue too...using react native 0.58.6

@shilman
Copy link
Member

shilman commented Mar 16, 2019

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 @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

@shilman shilman closed this as completed Mar 16, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests