导入 Webpack 编译的 React 组件

Question

我正在使用 create-react-app ReactJs 基本应用程序生成器和由 webpack 转译的打字稿。

当我在 index.js 文件中导入 App.js 组件（编译的 App.tsx 组件）时，我在浏览器中收到此错误：

webpack 没有抛出任何错误，所以我想问题出在 reactjs 或 react-dev-server 不理解如何使用 webpack 编译文件格式解释组件。

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

App.tsx

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;

index.js

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();

webpack.config.js

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'
                }
            ]
        }
    }
}

Answer 1

终于发现这是我用create-react-app造成的。而不是它，因为我使用的是 webpack，所以我使用 webpack-dev-server 来模仿 create-react-app 热重载服务器。

这很有效。

我的问题已经解决了。美好的一天，谢谢你

导入 Webpack 编译的 React 组件

Importing Webpack-Compiled React Component

javascript

typescript

reactjs

webpack

create-react-app