[英]react-script: Transpiling Third party JSX files
我正在使用 create-react-app 开发应用程序,并使用未编译的第三方模块,我将 JSX 文件包含在我的项目中。
启动或构建时出现以下错误
******.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 给出错误
在不弹出的情况下使用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'
附加信息:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.