如何在 Create React APP(CRA) 和 Gatsby 之间使用公共组件，其中组件由 <Link> 标签组成？

Question

我有一个 monorepo，其中的应用程序是使用 CRA 和 GATSBYJS 构建的。这些应用程序之间共享的组件很少，例如下拉菜单、导航栏、页脚等，

Monorepo 的结构：

MONOREPO
|
|
---> COMMON
|    |
|    |
|    ---> NAVBAR
|
|
---> CRA
|
|
---> GATSBY
|
|
babel.config.js

导航栏组件有一个 Link 元素。但是，CRA 的 Link 元素与 GATSBYJS 不同。 Navbar组件的写法是：

/COMMON/NAVBAR

class Navbar extends Component{

render(){
   const {appType} = this.props;

   let Link;
   if(appType === 'CRA'){
      ({Link} = React.lazy(() => import('react-router-hash-link'))
   } else if(appType === 'GATSBY){
      Link = React.lazy(() => import('../gatsby/LinkComponent'))
   }
}
}

/GATSBY/LinkComponent

import {Link} from 'gatsby';

class LinkComponent extends Component{

render(){

   const {to} = this.props;

   return(
     <Link to={to} />
   )
}
}

编译 CRA 应用程序时，它试图解析 GATSBY 文件并抛出以下错误：

这是我的 babel.config.js for monorepo:

module.exports = {
  env: {
    development: {
      plugins: ['transform-es2015-modules-commonjs']
    },
    test: {
      plugins: [
        'transform-es2015-modules-commonjs',
        '@babel/plugin-proposal-class-properties',
        'dynamic-import-node'
      ],
      presets: ['@babel/preset-react']
    },
  }
};

不确定，这里需要哪个loader！

Answer 1

这是模块解析器期望的小技巧。我所要做的就是

来自

class Navbar extends Component{

render(){
   const {appType} = this.props;

   let Link;
   if(appType === 'CRA'){
      ({Link} = React.lazy(() => import('react-router-hash-link'))
   } else if(appType === 'GATSBY){
      Link = React.lazy(() => import('../gatsby/LinkComponent'))
   }
}
}

到

class Navbar extends Component{

render(){
   const {appType} = this.props;

   let Link;
   if(appType === 'CRA'){
      Link = React.lazy(() => import('../cra/LinkComponent'))
   } else if(appType === 'GATSBY){
      Link = React.lazy(() => import('../gatsby/LinkComponent'))
   }
}
}

如何在 Create React APP(CRA) 和 Gatsby 之间使用公共组件，其中组件由 <Link> 标签组成？

How to use common component between Create React APP(CRA) and Gatsby where component consists of <Link> tag?

reactjs

babeljs

gatsby

monorepo

Monorepo 的结构：