Syntax error when trying to resolve a non-default exported Typescript component into a story when using CRA preset

[naamancurtis]

Bug: When trying to build a story from a functional typescript react component that isn't default exported a syntax error is throw by the babel-loader.

Resolution: Submitted a PR - Locally the issue seems to be resolved by adding "allowSyntheticDefaultImports": true to the tsconfig.json in the preset's package.

React:

    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0",

package.json dev dependencies:

  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@storybook/addon-actions": "^5.3.14",
    "@storybook/addon-docs": "^5.3.14",
    "@storybook/addon-links": "^5.3.14",
    "@storybook/addons": "^5.3.14",
    "@storybook/preset-create-react-app": "^1.5.2",
    "@storybook/react": "^5.3.14",
    "@types/jest": "^25.1.3",
    "@types/node": "^13.7.7",
    "@types/react": "^16.9.23",
    "@types/react-dom": "^16.9.5",
    "@types/storybook__react": "^5.2.1",
    "@typescript-eslint/eslint-plugin": "^2.22.0",
    "@typescript-eslint/parser": "^2.22.0",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.0.6",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.18.3",
    "eslint-plugin-react-hooks": "^1.7.0",
    "prettier": "^1.19.1",
    "react-docgen-typescript-loader": "^3.6.0",
    "typescript": "^3.8.3"
  }

Replicating the error

Example Component: Task.component.tsx

import React, { FC } from 'react';

export type TaskProps = {
    id: string,
    title: string,
    description: string
}

export const TaskComponent: FC<TaskProps> = ({ id, title, description }: TaskProps) => {
    return (
        <div className="task-component">
            My ID is {id} <br />
            My Title is {title} <br />
            My Description is {description}
        </div>
    );
}

Example Story: Task.stories.tsx

import React, { FC } from 'react';
import { TaskComponent } from './Task.component';

export default {
    component: TaskComponent,
    title: 'Task',
    excludeStories: /.*Data$/,
}

export const taskData = {
    id: '1',
    title: 'Test Title',
    description: 'Elaborate Test Description'
}

export const Default: FC = () => <TaskComponent id={taskData.id} title={taskData.title} description={taskData.description} />;

Running yarn storybook:

Entrypoint main [big] = runtime~main.c9c6661b386f36d8b962.bundle.js runtime~main.c9c6661b386f36d8b962.bundle.js.map vendors~main.c9c6661b386f36d8b962.bundle.js vendors~main.c9c6661b386f36d8b962.bundle.js.map main.c9c6661b386f36d8b962.bundle.js main.c9c6661b386f36d8b962.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/generated-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true 88 bytes {main} [built]
[./.storybook/generated-entry.js] 238 bytes {main} [built]
[./node_modules/@storybook/addon-docs/blocks.js] 43 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js] 292 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js] 672 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/react/extractProps.js] 2.21 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/lib/docgen/index.js] 932 bytes {vendors~main} [built]
[./node_modules/@storybook/client-api/dist/index.js] 3.82 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/client/index.js] 1.34 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true] 7.68 KiB {vendors~main} [built]
    + 1348 hidden modules

ERROR in ./src/components/task/Task.component.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /...path_to_app/app/src/components/task/Task.component.tsx: Unexpected token (28:0)

  26 |         // @ts-ignore
  27 |         STORYBOOK_REACT_CLASSES["src/components/task/Task.component.tsx#TaskComponent"] = { docgenInfo: TaskComponent.__docgenInfo, name: "TaskComponent", path: "src/components/task/Task.component.tsx#TaskComponent" };
> 28 | }
     | ^
  29 | catch (__react_docgen_typescript_loader_error) { }
    at Object._raise (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:723:17)
    at Object.raiseWithData (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:716:17)
    at Object.raise (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:710:17)
    at Object.unexpected (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8610:16)
    at Object.parseExprAtom (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9893:20)
    at Object.parseExprAtom (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:4543:20)
    at Object.parseExprSubscripts (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9479:23)
    at Object.parseMaybeUnary (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9459:21)
    at Object.parseMaybeUnary (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:6747:20)
    at Object.parseExprOps (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9329:23)
    at Object.parseMaybeConditional (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9302:23)
    at Object.parseMaybeAssign (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9257:21)
    at Object.parseMaybeAssign (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:6694:20)
    at Object.parseExpression (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9209:23)
    at Object.parseStatementContent (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:11045:23)
    at Object.parseStatementContent (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:6453:18)
 @ ./src/components/task/Task.stories.tsx 45:0-49 72:13-26 81:68-81
 @ ./src sync ^\.\/(?:(?:|\/|(?:(?:(?!(?:|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(ts|tsx|js|jsx|mdx))$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/generated-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true