Can you spot the difference in type availability between start-storybook and build-storybook?

[rhatfield-bushel]

I wonder if there's a bug here, but I wanted to ask first in case there's something I don't have configured right.

This first screenshot is taken from the dev time start-storybook command

The second screenshot is taken from the statically generated storybook site, build-storybook

And playroom certainly doesn't like it

I'm using NextJS with the following .babelrc file:

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "src": "./src"
        }
      }
    ]
  ]
}

And the next/babel preset from above is here.
Is there anything I can do to preserve the types in the code section?
If I correct the code in playroom on the static site, it renders correctly.
I figure the same code that pre-populates the playroom addon is also called when displaying the story code in the docs addon.

I don't have another project with storybook, and haven't taken the time to try and isolate the problem. I tried taking out the .babelrc but it's needed for how our project builds, so I haven't tested how storybook handles this situation vanilla style.

---

update

I was able to get rid of the duplicate .babelrc after upgrading to 6.1.6, but now my main.js looks like this. I tried without the emotion style fix at the bottom of the main.js file, but that just made things look ugly, it didn't fix my <Styled(div)> issue.

// .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-playroom',
    '@storybook/addon-a11y',
    '@storybook/addon-storysource',
    'storybook-addon-designs',
    '@storybook/addon-actions',
  ],

  // ! Taken from Storybook issue workaround
  // ! See: https://github.com/storybookjs/storybook/issues/12952#issuecomment-719871776
  babel: async (options) => ({
    ...options,
    plugins: [...options.plugins, '@babel/plugin-transform-react-jsx'],
  }),

  // ! Taken from Chakra's Storybook + Emotion 11 workaround
  // ! See: https://github.com/chakra-ui/chakra-ui/pull/2466/files#diff-cafe2123a72c4ce3a9f7e9ee4b0e188256eb02d7ec1e54fa2cadfac99b22f92b
  webpackFinal: async (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          '@emotion/core': toPath('node_modules/@emotion/react'),
          'emotion-theming': toPath('node_modules/@emotion/react'),
        },
      },
    }
  },
}

[shilman]

Hmm this seems more like an issue than a discussion. We're seeing a bunch of discrepancies between dev and production, and I think these changes might've been exacerbated by the recent 6.1 perf changes. For example, before 6.1 I believe production builds used the React dev bundle, which is not great for performance but is closer to the dev setup. We're still getting to the bottom of all this.