使用 JSX 导入 React 组件

Question

使用 JXS 导入 react 组件时出现问题。 组件从库中导入（像 SDK 一样使用）。

/sdk/dist/js/app.js

import React, { Component } from 'react';

 export default class Test extends Component {
    render() {
       return <div>Hello</div>;
    }
 }

有一个项目使用了这个 SDK，有 webpack/babel 已经做了构建，导入这个组件的文件是这样的：

应用程序/js/index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Test from 'sdk/dist/js/App';

结果：

但！ 如果出现以下情况，一切都会正常工作：

1. 我们从这个组件中移除 JSX

应用程序/js/index.js

import React, { Component } from 'react';

export default class Test extends Component {
    render() {
        return React.createElement(
            "div",
            null,
            "Hello"
        );
    }
}

2. 直接删除导入和插入组件。

应用程序/js/index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Test extends Component {
    render() {
        return <div>Hello</div>;
    }
}

问题是它需要通过导入来工作。 我建议问题在于 webpack 不会转置导入的文件 - 并按原样读取它......

网络包：

{
      entry: './app/js/index.js',
      output: {
        path: resolve(__dirname, plConfig.paths.public.root),
        filename: "[name].js"
      },

      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: [
              {
                loader: "babel-loader",
                options: {
                  cacheDirectory: true
                }
              }
            ]
          }
        ]
      }

.babelrc：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

Answer 1

你需要一个 babel 插件来转换 jsx ...

@babel/plugin-transform-react-jsx

安装npm i -D @babel/plugin-transform-react-jsx

在 .babelrc 中使用

{
    presets: [ ... ],
    plugins: [ "@babel/plugin-transform-react-jsx", ...other plugins ]
}

编辑：

您还需要为jsx添加 babel 规则...在您的 webpack 模块规则中...

更改test: /\\.js$/到test: /\\.jsx?$/