Storybook: TypeError: Cannot read property 'bindings' of null

I'm running in to the same issue related to babel-loaderwith a project generated using the the new Vue CLI v3.0.0-rc.12 and Storybook CLI 4.0.0-alpha.16

After doing some digging (and reading this issue thread over on the Babel repository https://github.com/babel/babel/issues/7627), it appears that this error is caused by a miss-match in Babel version (v6 vs v7).

I was able to solve the issue with the following changes:

package.json:

• remove babel-core: 7.0.0-bridge.0
• install @babel/core (as of writing this comment, 7.0.0-beta.56 is the latest)
• install @babel//preset-env (as of writing this comment, 7.0.0-beta.56 is the latest)
  (note that it is important that the two Babel dependencies match in version)

.babel.rc: delete this file

babel.config.js

• add @babel/preset-env to the presets array

(all this was done using Vue CLI v3.0.0-rc.12 and Storybook CLI 4.0.0-alpha.16)

pro tip: if you don't see any change in behaviour, try deleting your node_modules as well as package-lock.json file before running npm install

@morficus do you mind sharing your package.json, your babel.config.js, and any other relevant configuration files?

Removing babel-core bridge gives me the following error:
Error: Plugin 0 specified in "node_modules/@vue/babel-preset-app/index.js" provided an invalid property of "default"

Which I assume has to do with storybook using babel 6

@tamara-bain Here is my package.json file (I recently moved up to using Babel 7 RC1 and Vue CLI 3 [official release])

{
  "name": "ui-shared-components",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "start": "start-storybook -p 6006",
    "build": "build-storybook -c .storybook -o dist"
  },
  "dependencies": {
    "semantic-ui-css": "^2.3.3",
    "semantic-ui-vue": "^0.3.3",
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "@storybook/addon-actions": "^4.0.0-alpha.16",
    "@storybook/addon-centered": "^4.0.0-alpha.16",
    "@storybook/addon-console": "^1.0.4",
    "@storybook/addon-knobs": "^4.0.0-alpha.16",
    "@storybook/addon-links": "^4.0.0-alpha.16",
    "@storybook/addon-options": "^4.0.0-alpha.16",
    "@storybook/addons": "^4.0.0-alpha.16",
    "@storybook/vue": "^4.0.0-alpha.16",
    "@vue/cli-plugin-babel": "^3.0.0",
    "@vue/cli-plugin-e2e-cypress": "^3.0.0",
    "@vue/cli-plugin-eslint": "^3.0.0",
    "@vue/cli-plugin-unit-jest": "^3.0.0",
    "@vue/cli-service": "^3.0.0",
    "@vue/eslint-config-prettier": "^3.0.0",
    "@vue/test-utils": "^1.0.0-beta.24",
    "babel-jest": "^23.4.2",
    "babel-preset-vue": "^2.0.2",
    "moment": "^2.22.2",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "storybook-readme": "^3.3.0",
    "vue-template-compiler": "^2.5.17"
  }
}

(I have moment.js in there because of a strange dependency bug with one of the Storybook ad-ons...)

edit:
this is unrelated, but in case anyone tries to use this package.json verbatim.... the following webpack.config.js is needed inside your .storybook dir:

module.exports = (storybookBaseConfig, configType, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.scss$/,
    use: [require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('sass-loader')],
  });

  return defaultConfig;
};

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!

@morficus Your solution was dead on for my use case (which was identical to yours in that I had generated a project via vue-cli@3). Thank you!

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!

How to fix this file?
package.json

{
"name": "mstore",
"description": "MStore Pro - Complete React Native template for e-commerce",
"author": "InpireUI",
"version": "3.6.0",
"private": true,
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"setup": "./scripts/setup.sh",
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"api-ecommerce": "^0.0.16",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-env": "^1.7.0",
"base-64": "^0.1.0",
"create-react-context": "^0.2.3",
"currency-formatter": "^1.4.2",
"expo": "^31.0.4",
"firebase": "5.5.9",
"html-entities": "^1.2.1",
"lodash": "4.17.11",
"moment": "2.22.2",
"monet": "0.9.0",
"oauth-1.0a": "1.0.1",
"path": "^0.12.7",
"react": "16.5.0",
"react-instantsearch": "^5.1.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
"react-native-animatable": "^1.3.0",
"react-native-app-intro-slider": "1.0.1",
"react-native-collapsible": "1.3.0",
"react-native-country-picker-modal": "^0.6.2",
"react-native-drawer": "https://github.com/luyx2412/react-native-drawer.git",
"react-native-fluid-slider": "^1.0.2",
"react-native-keyboard-aware-scroll-view": "^0.7.2",
"react-native-masked-text": "^1.9.2",
"react-native-modalbox": "1.6.0",
"react-native-paper": "^2.1.1",
"react-native-parallax": "^0.3.0",
"react-native-radio-buttons": "^1.0.0",
"react-native-render-html": "3.10.0",
"react-native-scrollable-tab-view": "0.10.0",
"react-native-side-menu": "^1.1.3",
"react-native-snap-carousel": "^3.6.0",
"react-native-star-rating": "^1.0.9",
"react-native-swipe-list-view": "1.5.0",
"react-native-swiper": "^1.5.13",
"react-navigation": "^2.18.2",
"react-navigation-header-buttons": "^2.1.0",
"react-navigation-props-mapper": "^0.3.0",
"react-redux": "5.1.1",
"redux": "^4.0.0",
"redux-persist": "^5.9.1",
"redux-thunk": "^2.3.0",
"reselect": "4.0.0",
"tcomb-form-native": "^0.6.13",
"urijs": "1.19.1",
"url": "^0.11.0",
"url-parse": "1.4.4",
"util": "0.11.1",
"uuid": "3.3.2",
"validate.js": "^0.12.0",
"wpapi": "^1.1.2"
},
"devDependencies": {
"babel-jest": "^23.0.1",
"babel-plugin-transform-remove-console": "^6.9.4",
"babel-preset-expo": "^5.0.0",
"babel-preset-react-native": "4.0.1",
"jest": "^23.1.0",
"reactotron-react-native": "2.1.0",
"reactotron-redux": "2.1.0"
}
}

I show this error when I run expo cli:

The development server returned response error code: 500 URL: 192.168.56.1:19001/node_modules/expo/… Body: {"type":"TransformError","lineNumber":0,"errors":[{"description":"C:\Repos\mstore-3.6.4\mstore-expo\App.js: Cannot read property 'bindings' of null","lineNumber":0}],"name":"SyntaxError","message":"C:\Repos\mstore-3.6.4\mstore-expo\App.js

App.js

/** @format */

import React from "react";
import { Image } from "react-native";
import { Images, Config, Theme } from "@common";
import { AppLoading, Asset, Font } from "@expo";
import { Provider } from "react-redux";
import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/es/integration/react";
import { WooWorker } from "api-ecommerce";
import store from "@store/configureStore";
import RootRouter from "./src/Router";
import "./ReactotronConfig";
import {Provider as PaperProvider } from "react-native-paper";

function cacheImages(images) {
return images.map((image) => {
if (typeof image === "string") {
return Image.prefetch(image);
}
return Asset.fromModule(image).downloadAsync();
});
}

function cacheFonts(fonts) {
return fonts.map((font) => Font.loadAsync(font));
}

export default class App extends React.Component {
state = { appIsReady: false };

componentDidMount() {
WooWorker.init({
url: Config.WooCommerce.url,
consumerKey: Config.WooCommerce.consumerKey,
consumerSecret: Config.WooCommerce.consumerSecret,
wp_api: true,
version: "wc/v2",
queryStringAuth: true,
});
}

loadAssets = async () => {
const fontAssets = cacheFonts([
{ OpenSans: require("@assets/fonts/OpenSans-Regular.ttf") },
{ Baloo: require("@assets/fonts/Baloo-Regular.ttf") },

  { Entypo: require("@expo/vector-icons/fonts/Entypo.ttf") },
  {
    "Material Icons": require("@expo/vector-icons/fonts/MaterialIcons.ttf"),
  },
  {
    MaterialCommunityIcons: require("@expo/vector-icons/fonts/MaterialCommunityIcons.ttf"),
  },
  {
    "Material Design Icons": require("@expo/vector-icons/fonts/MaterialCommunityIcons.ttf"),
  },
  { FontAwesome: require("@expo/vector-icons/fonts/FontAwesome.ttf") },
  {
    "simple-line-icons": require("@expo/vector-icons/fonts/SimpleLineIcons.ttf"),
  },
  { Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf") },
]);

const imageAssets = cacheImages([
  Images.icons.iconCard,
  Images.icons.iconColumn,
  Images.icons.iconLeft,
  Images.icons.iconRight,
  Images.icons.iconThree,
  Images.icons.iconAdvance,
  Images.icons.iconHorizal,
  Images.icons.back,
  Images.icons.home,
  Images.IconSwitch,
  Images.IconFilter,
  Images.IconList,
  Images.IconGrid,
  Images.IconCard,
  Images.IconSearch,
  Images.IconHome,
  Images.IconCategory,
  Images.IconHeart,
  Images.IconOrder,
  Images.IconCart,
]);

await Promise.all([...fontAssets]);

};

render() {
const persistor = persistStore(store);

if (!this.state.appIsReady) {
  return (
    <AppLoading
      startAsync={this.loadAssets}
      onFinish={() => this.setState({ appIsReady: true })}
    />
  );
}

return (
  <Provider store={store} >
    <PersistGate persistor={persistor}>
      <PaperProvider theme={Config.Theme.isDark ? Theme.dark : Theme.light}>
        <RootRouter />
      </PaperProvider>
    </PersistGate>
  </Provider>
);

}
}

show error on this page:

error: C:\Repos\mstore-3.6.4\mstore-expo\node_modules\expo\build\environment\logging.js: Cannot read property 'bindings' of null

logging.js

import { Constants } from 'expo-constants';
import Logs from '../logs/Logs';
import RemoteLogging from '../logs/RemoteLogging';
if (Constants.manifest && Constants.manifest.logUrl) {
// Enable logging to the Expo dev tools only if this JS is not running in a web browser (ex: the
// remote debugger)
if (!navigator.hasOwnProperty('userAgent')) {
Logs.enableExpoCliLogging();
}
else {
RemoteLogging.enqueueRemoteLogAsync('info', {}, [
'You are now debugging remotely; check your browser console for your application logs.',
]);
}
}
// NOTE(2018-10-29): temporarily filter out cyclic dependency warnings here since they are noisy and
// each warning symbolicates a stack trace, which is slow when there are many warnings
const originalWarn = console.warn;
console.warn = function warn(...args) {
if (args.length > 0 &&
typeof args[0] === 'string' &&
/^Require cycle: .*node_modules/.test(args[0])) {
return;
}
originalWarn.apply(console, args);
};
//# sourceMappingURL=logging.js.map