Expo babel config clashes with react native server

[alaboudi]

Describe the bug After starting a RN Typescript project from scratch with Expo, it seems like there is a babel config conflict with @storybook/react-native-server somehow. I get the following error.

ERROR in ./storybook/addons.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: /Users/yazanalaboudi/projects/my-project-native/storybook/addons.js: 'loose' mode configuration must be the same for both @babel/plugin-proposal-class-properties and @babel/plugin-proposal-private-methods
    at enableFeature (/Users/yazanalaboudi/projects/my-projec-native/node_modules/@babel/helper-create-class-features-plugin/lib/features.js:30:11)
    at PluginPass.pre (/Users/yazanalaboudi/projects/my-projec-native/node_modules/@babel/helper-create-class-features-plugin/lib/index.js:51:35)
    at transformFile (/Users/yazanalaboudi/projects/my-projec-native/node_modules/@babel/core/lib/transformation/index.js:96:27)
    at transformFile.next (<anonymous>)
    at run (/Users/yazanalaboudi/projects/my-projec-native/node_modules/@babel/core/lib/transformation/index.js:35:12)
    at run.next (<anonymous>)
    at Function.transform (/Users/yazanalaboudi/projects/my-projec-native/node_modules/@babel/core/lib/transform.js:27:41)
    at transform.next (<anonymous>)
    at step (/Users/yazanalaboudi/projects/my-projec-native/node_modules/gensync/index.js:254:32)
    at /Users/yazanalaboudi/projects/my-projec-native/node_modules/gensync/index.js:266:13
    at async.call.result.err.err (/Users/yazanalaboudi/projects/my-projec-native/node_modules/gensync/index.js:216:11)
    at /Users/yazanalaboudi/projects/my-projec-native/node_modules/gensync/index.js:184:28
    at /Users/yazanalaboudi/projects/my-projec-native/node_modules/@babel/core/lib/gensync-utils/async.js:72:7
    at /Users/yazanalaboudi/projects/my-projec-native/node_modules/gensync/index.js:108:33
    at step (/Users/yazanalaboudi/projects/my-projec-native/node_modules/gensync/index.js:280:14)
    at /Users/yazanalaboudi/projects/my-projec-native/node_modules/gensync/index.js:266:13
 @ multi ./node_modules/@storybook/react-native-server/node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/react-native-server/dist/client/manager/index.js ./storybook/addons.js main[2]
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.55 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/react-native-server/node_modules/@storybook/core/dist/server/templates/index.ejs] 2.13 KiB {HtmlWebpackPlugin_0} [built]
WARN Unable to close preview build!

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

It seems like the the loose option value should be consist between the @babel/plugin-proposal-class-properties and @babel/plugin-proposal-private-methods packages. You can find more about this information here

To Reproduce Steps to reproduce the behavior:

1. Install the expo cli with yarn add expo-cli
2. Creat a new app expo init AwesomeProject and select the Typescript managed workflow option
3. Install storybook via npx -p @storybook/cli sb init --type react_native and enter "y" when prompted whether or not to install @storybook/react-native-server
4. Run yarn storybook
5. You'll get the error ☹️

Expected behavior It should just work

System: System: OS: macOS 10.15.5 CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz Binaries: Node: 13.5.0 - ~/.nvm/versions/node/v13.5.0/bin/node Yarn: 1.21.1 - ~/.nvm/versions/node/v13.5.0/bin/yarn npm: 6.13.4 - ~/.nvm/versions/node/v13.5.0/bin/npm Browsers: Chrome: 83.0.4103.61 Firefox: 76.0 Safari: 13.1.1 npmPackages: @storybook/addon-actions: ^5.3.19 => 5.3.19 @storybook/addon-links: ^5.3.19 => 5.3.19 @storybook/addons: ^5.3.19 => 5.3.19 @storybook/react-native: ^5.3.19 => 5.3.19 @storybook/react-native-server: ^5.3.19 => 5.3.19 .

Additional context I found a solution to this problem by just updating the babel config file by explicitly providing values to the loose option for both the @babel/plugin-proposal-class-properties and @babel/plugin-proposal-private-methods plugins. Here is what I added to the config file:

module.exports = function(api) {
    ....
    plugins: [
        ["@babel/plugin-proposal-class-properties", { "loose": false }],
        ["@babel/plugin-proposal-private-methods", { "loose": false}]
    ]
  };
};

[dannyhw]

I'm aware of some issues with expo at the moment and I need to update the expo example in this repo before I can make any fixes. If you are able to offer help with this or anyone else that would help a lot. Anyway either way I will get around to looking at this when I can.