Javascript 导入Web包组件

我正在使用CreateReact应用程序ReactJs基本应用程序生成器和由webpack传输的typescript

在index.js文件中导入App.js组件编译的App.tsx组件时，在浏览器中出现以下错误：

问题是webpack没有抛出任何错误，所以我想问题在于reactjs或ReactDev服务器不理解如何使用webpack编译文件格式解释组件

这是我的App.tsx、index.js和webpack.config.js文件

App.tsx

index.js

---

最后发现这是我使用CreateReact应用程序造成的。相反，因为我使用的是webpack，所以我使用webpack开发服务器来模拟CreateReact应用程序热重新加载服务器

这很有魅力

---

我的问题已经解决了。您好，谢谢您

使用大量console.log和typeof在JS中调试。代码很可能被传输到实际上不是组件的某个地方，例如，某个函数返回组件。需要检查的一件事是，您的模块导入对于传输的TS源是正确的。默认情况下，webpack不会从入口点导出任何内容。@zerkms此插件似乎仅用于速度性能？还是我misunderstand@user268396实际上，正如错误所解释的，它接收一个对象类型。如果它要接收一个函数，它将worked@AriaGroult你还是可以试试看+

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './compiled/App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = env => {

    const dev = env.NODE_ENV === 'dev'

    return 
    {
        mode: 'none',
        entry: "./client/src/App.tsx",
        output: {
            path: path.resolve(__dirname + '/client/src', 'compiled'),
            filename: 'App.js'
        },
        watch: dev,
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    use: 'ts-loader'
                },
                {
                    test: /\.tsx?$/,
                    enforce: 'pre',
                    loader: 'tslint-loader'
                }
            ]
        }
    }
}