Bug(preset-typescript): React is not defined

[zhaoyao91]

when using emotion, if we hint compiler to use emotion jsx instead of React object with the code

/** @jsx jsx */
import { css, jsx } from "@emotion/core";

the page of stories output error: React is not defined

I have to import React manually with emotion jsx, which disatisfy the IDE:

[shilman]

@zhaoyao91 i don't understand why you think it's a bug in the typescript preset. are you expecting the preset to add this automatically?

[zhaoyao91]

@shilman when using emotion, the first line /** @jsx jsx */ is telling the compiler that use the next jsx variable to handle jsx component, so the React variable is  redundant.

[shilman]

@zhaoyao91 what does that have to do with preset-typescript though? and which version are you using?

[zhaoyao91]

@shilman I tried preset-typescript 2.1.0

I am currently using a webpack.config.js as a workaround:

// thanks for https://github.com/storybookjs/storybook/issues/1493#issuecomment-531244607
module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.tsx?$/,
    exclude: /node_modules/,
    use: [
      {
        loader: "babel-loader",
        options: {
          presets: [
            "@babel/preset-typescript",
            "@babel/preset-react",
            "@babel/preset-env"
          ],
          plugins: ["@babel/plugin-proposal-class-properties"]
        }
      },
      "react-docgen-typescript-loader"
    ]
  });

  config.resolve.extensions.push(".ts", ".tsx");

  return config;
};

It works well. I am not sure why when using preset-typescript it gives such error.