While it functions properly with the normal react-scripts start, an error is thrown when attempting to view individual components through storybook as mentioned in the title.
Here is the code:
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
App.tsx
import React from 'react';
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
import { Register } from './pages/register/register'
import { Login } from './pages/login/login'
import { Home } from './pages/home/home'
const App: React.FC = () => {
return (
<div id="app-root">
<BrowserRouter>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/register" exact component={Register} />
<Route path="/login" exact component={Login} />
</Switch>
</BrowserRouter>
</div>
);
}
export default App;
login.tsx
export const Login = () => {
return (
<div className={styles.loginPage}>
<div className={styles.body}>
<div>
<Link to="/" className={styles.link}>
<img src={arrowImage} className={styles.arrowImage} alt="arrowImage" />
</Link>
</div>
</div>
</div>
)
};
The other two components, namely Home and Register, essentially have the same code structure as login.tsx albeit with different names. Strangely, everything works fine on a standard browser but running storybook with the components triggers an error. I'm puzzled as to what could be missing since it functions without any issues on a regular browser excluding storybook.
Storybook screenshot: