Imported Components do not work

[draftitchris]

Issue:

Which version are you using?

"storybook-react-router": "^1.0.5",

Are you using storybook-router with a react based project or a vue one?

React

Please describe the problem:

We are importing a React component from another library that uses links and a switch. In its basic form it looks like this:

const TabGroup : React.FunctionComponent<{match: string}> = ({match}) =>{
    const path = match;
    return(
        <div>
            <div className="links">
              <Link to={`${path}`} className="link">Profile</Link>
              <Link to={`${path}/comments`} className="link">Comments</Link>
              <Link to={`${path}/contact`} className="link">Contact</Link>
            </div>
            <div className="tabs">
                 <Switch>
                    <Route path={`${path}`} exact component={Profile} />
                    <Route path={`${path}/comments`} component={Comments} />
                    <Route path={`${path}/contact`} component={Contact} />
                </Switch>
            </div>
        </div>
    )
}

However it seems as though StoryRouter is completely unable to understand this component as my console is filled with invariant errors complaining that Link and Switch should not be used outisde of a Router.

Our story looks like this:

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import StoryRouter from 'storybook-react-router';
import { TabGroup } from '@draftit/ui-library';

const stories = storiesOf("Components", module);
stories
    .addDecorator(StoryRouter())
    .add(
        'Tab Group', () => <TabGroup match="/hr-expert" />
    );

The example all include the components within the story file itself so its hard to determine what is causing this. I have also tried disabling all other storybook extensions that were not relevant to this without avail. Can this plugin not support typescript or external components?

[MalcolmDwyer]

See over in #37 ... this might be caused by storybook-router having a problem with imports from 'react-router-dom'. (You didn't show your import in your top file... but I'm guessing that's what you did, since that is what react-router's docs recommend.)

[fiuzagr]

In my case, react-router imported by storybook-react-router is different of react-router imported by my own package.

The solution is create an alias inside babel config to resolve react-router* packages:

{
  "presets": [...],
  "plugins": [
    ...
    [
      "babel-plugin-module-resolver",
      {
        "alias": {
          "react-router-dom": "./node_modules/react-router-dom",
          "react-router": "./node_modules/react-router"
        }
      }
   ],
  ]
}

And use this babel config in Webpack loader (configured inside .storybook/main.js file):

  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.jsx?$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            configFile: path.resolve(__dirname, '.babelrc'),
          },
        },
      ],
      include: 'my-own-module-path',
    });

    return config;
  }