react-script：转译第三方 JSX 文件答案

【问题标题】：react-script: Transpiling Third party JSX filesreact-script：转译第三方 JSX 文件
【发布时间】：2019-02-15 06:13:21
【问题描述】：

我正在使用 create-react-app 开发应用程序，并使用未编译的第三方模块，我将 JSX 文件从这里包含到我的项目中。

启动或构建时出现以下错误

******.jsx
Module parse failed: Unexpected token (12:25)
You may need an appropriate loader to handle this file type.

我的反应应用程序没有弹出，也不想弹出。

不想从 react-script 中弹出

******.jsx
Module parse failed: Unexpected token (12:25)
You may need an appropriate loader to handle this file type.

示例代码库中的 Link.jsx

import React from 'react';
import { string } from 'prop-types';
import './Link.scss';

const STATUS = {
  HOVERED: 'hovered',
  NORMAL: 'normal',
};

class Link extends React.Component {
  constructor(props) {
    super(props);

    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);

    this.state = {
      className: STATUS.NORMAL,
    };
  }

  onMouseEnter() {
    this.setState({ className: STATUS.HOVERED });
  }

  onMouseLeave() {
    this.setState({ className: STATUS.NORMAL });
  }

  render() {
    const { className } = this.state;
    const { page, children } = this.props;

    return (
      <a
        className={className}
        href={page}
        onMouseEnter={this.onMouseEnter}
        onMouseLeave={this.onMouseLeave}
      >
        {children}
      </a>
    );
  }
}

Link.propTypes = {
  page: string,
  children: string,
};

Link.defaultProps = {
  page: '#',
  children: '',
};

export default Link;

以上代码发布到内部 npm repo 并在应用程序中使用

应用程序中的 App.jsx

import { Link} from '@myScope/myreactlib/Link'; // loaded from node_modules

App.jsx 报错

【问题讨论】：

能否提供更多关于您正在使用的模块以及如何使用它的信息？
@GarrettMotzner，我们使用的模块不是公开可用的，它的内部模块没有编译和发布，它已经像 JSX 一样发布，可以引用 JSX。虽然我们对此无法控制，但可以将其视为另一个内部库。
如果您使用的是开箱即用的 create-react-app，babel 加载器应该可以毫无问题地处理您的 jsx 文件。您的 jsx 文件是否有可能在第 12 行出现某种语法错误？如果您可以发布该 jsx 文件的一部分（例如，前 20 行），这可能有助于您获得指向正确方向的响应。
我试图加载的 @AlvinLee jsx 文件来自 node_modules。这给了我错误。
@MHussain 我明白了。你能发布 which node_module (with version) 并归档这是吗？这将有助于我们帮助您解决问题。

标签： reactjs react-scripts

【解决方案1】：

在不弹出的情况下使用create-react-app 时，您将在如何导入模块方面受到一些限制。

如果它是您构建的自定义模块，则它需要位于您的src 文件夹中，并且您使用相对于当前文件路径的路径导入它。例如：import MyComponent from './components/MyComponent

如果它来自您已经使用npm 或yarn 添加的第三方依赖包（例如reactstrap 或@blueprintjs/core），则只需指定包名称即可导入。例如：import { Button } from 'reactstrap'

在您的情况下，听起来您的 node_modules 文件夹中有一个子文件夹，该子文件夹用于您没有使用 npm 或 yarn 添加的包。虽然我怀疑是否建议以这种方式使用第三方软件包，但我认为您有充分的理由这样做。

如果无法查看您的整个设置，我建议您尝试以下解决方法：

在您的src 文件夹中，使用您的第三方包创建指向该文件夹的符号链接。例如（在您项目的 src 文件夹中）：

ln -s ../node_modules/@myScope/myreactlib myreactlib

然后，在您的 App.jsx 文件中，执行：

import { Link } from './myreactlib/Link'

附加信息：

【讨论】：

@MHussain 看起来这个答案解决了你的问题，是吗？我可能会建议您更改问题的标题以更准确地反映问题，以便其他有类似问题的人更容易找到它。也许将其更改为“create-react-app：如何在 node_modules 中导入未作为包添加的模块”
我也有同样的问题。我正在使用 npm 链接来访问我在 JSX 中自定义构建的反应组件。我相信 create-react-app 抱怨这一点的原因是它希望将导入的组件编译为常规 JS（它在 react-scripts 内的 webpack 配置中提到了这一点）。我想知道您是否可以使用 create-react-app 进行一些配置来更改此行为。