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