React 组件库渲染 React Links答案

【问题标题】：React components library rendering React LinksReact 组件库渲染 React Links
【发布时间】：2019-11-07 02:10:36
【问题描述】：

我开发了一个 React 组件库，我在我的一些项目中使用它。

其中一个是 Storybook，所以我创建了一个 BrowserRouter 装饰器来添加到我的故事中，并且组件完美呈现，只是为了展示和玩耍。

但是，当使用来自另一个项目的某些组件时，我的应用组件树的顶层有一个 BrowserRouter，我收到此错误：

Error: Invariant failed: You should not use <Link> outside a <Router>

在这里，您可以从我的ConsumerProject 中看到我尝试渲染的内容的简要 sn-p：

index.js：


import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { LibraryComponent } from 'my-library';

const element = (
      <HotEnabler>
        <BrowserRouter>
          <RouterTrigger trigger={pathname => triggerHooks(_routes, pathname)}>
            <ApolloProvider client={client}>
              <ApolloProviderHooks client={client}>
                <LibraryComponent />
              </ApolloProviderHooks>
            </ApolloProvider>
          </RouterTrigger>
        </BrowserRouter>
      </HotEnabler>
);

ReactDOM.render(element, destinationDomElement);

在这里，你可以看到MyLibrary最重要的部分：

package.json：

...
"peerDependencies": {
    "react": ">=16.8.6",
    "react-dom": ">=16.8.6",
    "react-router": ">=5.0.0",
    "react-router-dom": ">=5.0.0",
    "styled-components": ">=4.1.0"
}

libraryComponent.js：

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

import { SCLink } from './styles';

const LibraryComponent = props => {
  return (
      <Link
        to={'/any-route/'}
      >
        Testing Links
      </Link>
    );
  }
};

export default LibraryComponent;

我想补充一些重要的东西：

如果我将此别名添加到 ConsumerProject 的 Webpack 配置中：

react: path.join(constants.ROOT_DIR, '../my-library/node_modules/react/'),
'react-dom': path.join(constants.ROOT_DIR, '../my-library/node_modules/react-dom/'),
'react-router-dom': path.join(constants.ROOT_DIR, 'node_modules/react-router-dom/')

一切正常。如果我不添加它们，我会从 React 和 React Router Dom 收到错误。

【问题讨论】：

这看起来类似于 stackoverflow.com/questions/56708153/… 所以（就像我在评论中那样）你能创建一个重现这个问题的沙箱吗？
我不知道如何创建沙箱...考虑到我有 2 个项目，我需要在库的某个地方发布...
如果您在直接使用LibraryComponent 时无法重现此问题，但在将LibraryComponent 用作外部库时可以重现此问题，则可能是第三方库的打包存在问题。这进一步得到了您必须破解 webpack 配置的事实的支持。这可能是XY problem
@rmartrenado 你有没有找到解决方案？我遇到了类似的问题
我们可能可以聊聊这个，我可以和你分享一些配置.. 我们如何在这里开始聊天？

标签： reactjs react-router react-router-dom styled-components storybook

【解决方案1】：

我的库有同样的问题，它的组件取决于react-route-dom。经过一番调查，我得出结论，在我的项目应用程序中，捆绑了2个版本的react-router-dom（甚至是相同的版本），这会创建2个相互冲突的Context实例。

在我的情况下，解决方案是将 react-router-dom 移动到 peerDependencies，并使用 webpack 配置将其从库构建中排除：

externals: {
  'react-router-dom': {
    root: 'ReactRouterDom',
    commonjs2: 'react-router-dom',
    commonjs: 'react-router-dom',
    amd: 'react-router-dom',
  },
},

更深入的信息见here。

【讨论】：