Storybook: Storybook 6.1.0-rc.4 & Emotion 11.0 support

[glomotion]

Describe the bug
When you upgrade emotion (@emotion/css) to version 11.0 - storybook seems to build successfully, but on every single set of stories, simply renders this error screen:

To Reproduce

1. Init a basic storybook
2. Install @emotion/css and @emotion/babel-plugin
3. setup a basic component which uses { css } from @emotion/css
4. do npm run build-storybook
5. See error:

css is not defined
ReferenceError: css is not defined
    ...

Code snippets

//./storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-knobs',
  ],
  typescript: { reactDocgen: 'react-docgen' },
};

System

$ npx sb@next info

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm
  Browsers:
    Chrome: 86.0.4240.198
    Edge: 86.0.622.69
    Firefox: 82.0.3
    Safari: 14.0.1
  npmPackages:
    @storybook/addon-actions: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/addon-essentials: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/addon-knobs: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/addon-links: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/react: ^6.1.0-rc.4 => 6.1.0-rc.4 

[shilman]

Does this workaround help? https://github.com/chakra-ui/chakra-ui/issues/2527#issuecomment-728134371

[glomotion]

sadly no. :(

// ./storybook/main.js

const path = require('path');
const toPath = _path => path.join(process.cwd(), _path);

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-knobs',
  ],
  typescript: { reactDocgen: 'react-docgen' },
  webpackFinal: async config => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          '@emotion/css': toPath('node_modules/@emotion/css'),
          '@emotion/core': toPath('node_modules/@emotion/react'),
          'emotion-theming': toPath('node_modules/@emotion/react'),
        },
      },
    };
  },
};

[glomotion]

FYI - i'm not actually using any emotion theming atm. I'm simply using the "framework agnostic" flavour of emotion (https://emotion.sh/docs/introduction)

[guilhermewaess]

@shilman just putting more info here, I also need to update my lib to emotion-11 and my problem lies on import styled from '@emotion/styled';

Analysing the final bundled code from storybook, looks like the webpack is serving the old styled package instead of the new one:

As you can see on the following image running the SB with Emotion-11, the path is pointing to the old version of emotion.

The expected path should be: node-modules/@emotion/styled/something.

The problem might be here? https://github.com/storybookjs/storybook/blob/next/lib/theming/paths.js

The current side effect of this in my project is: because internally, the ThemeProvider is using the @emotion/styled/base and the storybook webpack is providing @emotion/styled-base, the Theme won't match and will be always empty theme: {};

[glomotion]

FWIW - When running with all updated deps (as above) and the following alias inside .storybook/main.js:

'@emotion/css': toPath('node_modules/@emotion/css'),

i get the following logs when starting storybook:

WARNING in ./node_modules/@storybook/theming/node_modules/@emotion/core/dist/core.browser.esm.js 10:0-46
"export 'default' (reexported as 'css') was not found in '@emotion/css'
 @ ./node_modules/@storybook/theming/dist/index.js
 @ ./node_modules/@storybook/components/dist/bar/button.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js

[glomotion]

looks like this is being worked on atm. https://github.com/storybookjs/storybook/pull/13300