Storybook: TypeError: Cannot read property 'default' of undefined

Created on 11 Apr 2019  ยท  1Comment  ยท  Source: storybookjs/storybook

Describe the bug
TypeError: Cannot read property 'default' of undefined.

To Reproduce
Steps to reproduce the behavior:

  1. Clone this repo react-native-elements-storybook
  2. Run yarn storybook, everything works fine
  3. Run yarn build-storybook
  4. Serve
โœ— npx serve .
npx: installed 78 in 2.953s

   โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
   โ”‚                                                    โ”‚
   โ”‚   Serving!                                         โ”‚
   โ”‚                                                    โ”‚
   โ”‚   - Local:            http://localhost:5000        โ”‚
  1. Open localhost:5000 in the browser

image

Expected behavior
Work flawlessly the same as yarn storybook.

image

Screenshots
See above.

Code snippets
Anything is here.

System:

  • OS: MacOS
  • Device: Macbook Pro 2017
  • Browser: chrome
  • Framework: react-native-web
  • Version: 5.06

Additional context
I tried to make storybook for React Native Elements and React Native Web.

react-native question / support

Most helpful comment

It was due to wrong webpack.config.js.

// add your custom rules.
{
  test: /\.js$/,
  include: [
    path.resolve(__dirname, '../node_modules/react-native-elements/'),
    path.resolve(__dirname, '../node_modules/react-native-ratings/'),
    path.resolve(__dirname, '../node_modules/react-native-vector-icons/'),
    path.resolve(__dirname, '../'),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: false,
      presets: ['module:metro-react-native-babel-preset'],

Fixes, this commit:

// add your custom rules.
{
  test: /\.js$/,
  include: [
    path.resolve(__dirname, '../node_modules/react-native/'),
    path.resolve(__dirname, '../node_modules/react-native-elements/'),
    path.resolve(__dirname, '../node_modules/react-native-ratings/'),
    path.resolve(__dirname, '../node_modules/react-native-vector-icons/'),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: false,
      presets: [
        ['module:metro-react-native-babel-preset', { 'disableImportExportTransform': true }]
      ],

build-storybook work flawlessly now. Result: http://rne-storybook.surge.sh

@shilman You can close this issue ๐Ÿค

>All comments

It was due to wrong webpack.config.js.

// add your custom rules.
{
  test: /\.js$/,
  include: [
    path.resolve(__dirname, '../node_modules/react-native-elements/'),
    path.resolve(__dirname, '../node_modules/react-native-ratings/'),
    path.resolve(__dirname, '../node_modules/react-native-vector-icons/'),
    path.resolve(__dirname, '../'),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: false,
      presets: ['module:metro-react-native-babel-preset'],

Fixes, this commit:

// add your custom rules.
{
  test: /\.js$/,
  include: [
    path.resolve(__dirname, '../node_modules/react-native/'),
    path.resolve(__dirname, '../node_modules/react-native-elements/'),
    path.resolve(__dirname, '../node_modules/react-native-ratings/'),
    path.resolve(__dirname, '../node_modules/react-native-vector-icons/'),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: false,
      presets: [
        ['module:metro-react-native-babel-preset', { 'disableImportExportTransform': true }]
      ],

build-storybook work flawlessly now. Result: http://rne-storybook.surge.sh

@shilman You can close this issue ๐Ÿค

Was this page helpful?
0 / 5 - 0 ratings