[Bug]: Error: Cannot read properties of undefined (reading 'space')

[val089]

Describe the bug

Hi,

I tried to integrate styled-components with storybook in React Native Expo App. I upgraded my storybook to version 7.4.0 and use plugin @storybook/addon-styling (https://storybook.js.org/recipes/styled-components), but this solution it's not working.

This my part of code:

preview.ts file

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import theme from '../theme';

export const parameters = {
  controls: {
   matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

export const decorators = [
  withThemeFromJSXProvider({
    themes: {
      light: theme,
    },
    Provider: ThemeProvider,
    defaultTheme: 'light',
  }),
];

storybook.requires.ts file

import {
  configure,
  addDecorator,
  addParameters,
  addArgsEnhancer,
  clearDecorators,
} from '@storybook/react-native';

const { loadStories } = require('./storyLoader');

global.STORIES = [
  {
    titlePrefix: '',
    directory: './components',
    files: '**/*.stories.?(ts|tsx|js|jsx)',
    importPathMatcher:
      '^\\.[\\\\/](?:\\.storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$',
  },
];

import '@storybook/addon-ondevice-controls/register';
import '@storybook/addon-ondevice-actions/register';

import { argsEnhancers } from '@storybook/addon-actions/dist/modern/preset/addArgs';

import { parameters, decorators } from './preview';

if (decorators) {
  if (__DEV__) {
    require('react-native').LogBox.ignoreLogs([
      '`clearDecorators` is deprecated and will be removed in Storybook 7.0',
    ]);
  }
  clearDecorators();
  decorators.forEach((decorator) => addDecorator(decorator));
}

if (parameters) {
  addParameters(parameters);
}

try {
  argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
} catch {}

configure(loadStories, module);

main.ts file

const path = require('path');
const webpack = require('webpack');
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
import custom from './webpack.config.js';

module.exports = {
  stories: ['../components/**/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-controls',
    '@storybook/addon-actions',
    '@storybook/addon-mdx-gfm',
    '@storybook/addon-styling',
  ],
  docs: {
    autodocs: true,
  },
  features: {
    interactionsDebugger: true,
  },
  webpackFinal: (config) => {
    config.plugins.push(
      new webpack.DefinePlugin({
        SC_DISABLE_SPEEDY: true,
      }),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      })
    );
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, '../'),
      path.resolve(__dirname, './component'),
    ];
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      'react-native$': 'react-native-web',
      '@storybook/react-native': '@storybook/react-webpack5',
    };

    config.resolve.extensions = ['.web.js', '.tsx', '.ts', '.js'];

    return {
      ...config,
      module: {
        ...config.module,
        rules: [...config.module.rules, ...custom.module.rules],
      },
    };
  },
  framework: {
    name: '@storybook/react-webpack5',
    options: { fastRefresh: true },
  },
};

and webpack.config.js file

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: path.resolve(__dirname, './public/index.html'),
  filename: 'index.html',
  inject: 'body',
});

module.exports = {
  entry: path.join(__dirname, 'index.web.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, '/build'),
  },
  module: {
    rules: [
      {
        test: /@?(react-native-swiper).*\.(ts|js)x?$/,
        loader: 'babel-loader',
      },
    ],
  },
  plugins: [HTMLWebpackPluginConfig],
};

Anybody knows the solution how to integrate styled-components with storybook?

To Reproduce

No response

System

Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 AMD Ryzen 5 2500U with Radeon Vega Mobile Gfx  
  Binaries:
    Node: 18.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 116.0.5845.141
    Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.69)   
  npmPackages:
    @storybook/addon-actions: 7.4.0 => 7.4.0
    @storybook/addon-controls: 7.4.0 => 7.4.0
    @storybook/addon-essentials: ^7.4.0 => 7.4.0
    @storybook/addon-interactions: ^7.4.0 => 7.4.0
    @storybook/addon-links: ^7.4.0 => 7.4.0
    @storybook/addon-mdx-gfm: ^7.4.0 => 7.4.0
    @storybook/addon-ondevice-actions: 6.5.6 => 6.5.6
    @storybook/addon-ondevice-controls: 6.5.6 => 6.5.6
    @storybook/addon-styling: ^1.3.7 => 1.3.7
    @storybook/addon-viewport: ^7.4.0 => 7.4.0
    @storybook/react: ^7.4.0 => 7.4.0
    @storybook/react-native: 6.5.6 => 6.5.6
    @storybook/react-webpack5: 7.4.0 => 7.4.0

Additional context

No response

[ShaunEvening]

Hey @val089 👋

@storybook/addon-styling is deprecated in favour of @storybook/addon-themes for the functionality that you're looking for. However, was never intended for react-native storybook.

I would need some help from @dannyhw to look at a solution that could work for you.

[dannyhw]

A simple solution is probably to just add a custom decorator with the theme provider and this wouldn't require the styling addon.

I am down to help get addon-themes working for react native web though if its not currently working.