导入Webpack编译的React组件-Java 学习之路

我正在使用create-react-app ReactJs基本应用程序生成器和由webpack转换的typescript .

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

enter image description here

事情是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'
                }
            ]
        }
    }
}

1 回答

0

终于发现这是因为我使用了create-react-app . 而不是它，因为我使用webpack，我使用webpack-dev-server来模仿create-react-app热重装服务器 .

这就像一个魅力 .

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

回复于 2024-04-28T12:26:46+08:00

导入Webpack编译的React组件

1 回答

相关问题