Invariant failed: You should not use <Link> outside a <Router>というエラー <Link to={path}> を含んでいるコンポーネントをStorybookに追加すると以下のようなエラーが出ます。 Invariant failed: You should not use <Link> outside a <Router> Error: Invariant failed: You should not use <Link> outside a <Router> at invariant (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:133623:11) at http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:124464:86 at updateContextConsumer (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:115964:19) at beginWork$1 (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:116347:14) at HTMLUnknownElement.callCallback (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:96456:14) at Object.invokeGuardedCallbackDev (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:96505:16) at invokeGuardedCallback (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:96560:31) at beginWork$$1 (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:121900:7) at performUnitOfWork (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:120815:12) at workLoopSync (http://localhost:9009/vendors~main.1df07f438181f そこで役に立つのが、 storybook-react-router というモジュールです。 StorybookのDecoratorに追加するだけで、上記のエラーが解消されます。 https://www.npmjs.com/package/storybook-react-router

続きを読む

.jsxと.stories.jsを同じディレクトリに置くと怒られる airbnbのeslintを使うと、React Componentは拡張子 .jsx を強制します。 Storybookを使う時、 .jsx と同じディレクトリに .stories.js 置きたい場合があると思いますが、 拡張子が .js なので、story内でReact Componentを使うと怒られます。 ESLint: JSX not allowed in files with extension '.js'(react/jsx-filename-extension) .eslintrc の rules にreact/jsx-filename-extension の設定を追加することで回避することができます。 .eslintrc 1 2 3 4 5 6 7 8 "rules": { "react/jsx-filename-extension": [ "error", { "extensions": [".jsx", ".stories.js"] } ] }

続きを読む