Storybook: JSX not supported in config with CRA

[mrmckeb]

Describe the bug
As reported by @rlecaro2 and @Akaryatrh on #5183, JSX is not supported inside of the .storybook folder.

To Reproduce
Steps to reproduce the behavior:

1. Install create-react-app
2. Install Storybook

Expected behavior
JSX will be supported inside the .storybook folder.

System:
All.

Additional context
We had a similar issue with TypeScript which was resolved. It's likely that this issue doesn't occur when working with TypeScript, but this needs more investigation.

It's been reported that [adding babel-loader to devDependencies fixes the issue[(https://github.com/storybookjs/storybook/issues/5183#issuecomment-505617245), this also needs investigation.

[jamesg1]

Thanks for raising this one.
What would be an alternative? I've tried to add babel-loader in devDependencies on 8.0.4 and 8.0.5 but I get issues on the react-scripts warnings and my jest storybook snapshots come back empty. Currently in .storybook I have some JSX for theme providers to be added as decorators. I'm using a standard CRA 3.0.1 (requires this version for typescript support in other components).

If I change the config in .storybook to be a typescript .tsx file and get my tsconfig to include files in there that will work?

[mrmckeb]

Hi @jamesg1, the bad news is that the alternative is that I (or someone else) needs to fix this haha.

As a temporary workaround, you can add a custom Webpack config for Storybook and and add this directory to the paths handled by the current babel-loader.

Let me know if you need help doing that.

[jamesg1]

Thanks for your help @mrmckeb I managed to get it working. Added [email protected] as a devDependency which is the same currently as "react-scripts": "3.0.1", changed config.js to config.tsx and added a custom .storybook/webpack.config.js from https://storybook.js.org/docs/configurations/typescript-config/#setting-up-typescript-to-work-with-storybook-1.

module.exports = ({ config, mode }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [['react-app', { flow: false, typescript: true }]],
    },
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

I also updated tsconfig.json to include .storybook.

"rootDirs": [
  "src",
  "stories",
  ".storybook"
]

[mrmckeb]

@shilman I wanted to get your thoughts on this.

I can tackle this on this weekend. There are two paths:

1. We add the Storybook config folder, so that it's also processed as a part of the build. But this doesn't fix the case where people use a stories folder*. We can then update the docs to say that stories must live within src.
2. We can allow all folders (except for node_modules) to be processed, but this has two problems - performance and more importantly, it can create a situation where code in Storybook works, but that same code fails in CRA (because it relies on something outside of src).

I am in favour of 1 more than 2, but recognise that many of our users want to support custom configurations.

This is a matter of design principles. The CRA team says that nothing that lives outside of src should be processed, Storybook is more open to where/how you configure.

_* I personally feel that stories should always live alongside components. The idea of stories or tests having root level folders seems counterintuitive and makes reasoning about projects more difficult._

[jamesg1]

@mrmckeb Just for an update I removed my yarn.lock and node_modules and reinstalled everything with the new storybook alpha 5.2.0-alpha.44 and I didn't seem to hit the same issues I was facing last week with JSX in config.js. I have .storybook in my tsconfig.json for include and rootDirs.

[shilman]

@mrmckeb I like the first solution also 💯 Thanks for being on top of this! If there's enough pushback we can also special-case include the /stories folder in addition to the /.storybook folder, but let's try the more restrictive version first and see if it's good enough.

[Kamahl19]

Actually this is also not working for TSX #7563

[mrmckeb]

@jamesg1 I actually have it working with this tsconfig.json. Here, js files work and tsx files still fail... [email protected] and [email protected].

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true
  },
  "include": [
    "src"
  ]
}

I'm looking into it more now.

[Kamahl19]

@mrmckeb I think it's because of this #7563 , isnt it?

[jamesg1]

I added .storybook and src as rootDirs in tsconfig options which seemed to work.

[mrmckeb]

Yes, correct @Kamahl19.

[mrmckeb]

@jamesg1, would you mind sharing your tsconfig,json if possible? You can cut out anything confidential.

[shilman]

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.15 containing PR #7566 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

[jamesg1]

@jamesg1, would you mind sharing your tsconfig,json if possible? You can cut out anything confidential.

Yeah sure no problem:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "baseUrl": "src",
    "rootDirs": [
      "src",
      "stories",
      ".storybook"
    ]
  },
  "include": [
    "src",
    ".storybook"
  ],
  "exclude": [
    "src/**/*.js"
  ]
}