Question

我正在尝试为typescript项目设置一个简单的框架，我无法编译它。任何帮助将不胜感激。

我收到以下错误：

import React from 'react'
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';

import App from './App';

ReactDOM.render(
    <AppContainer>
        <App />
    </AppContainer>,
    document.getElementById('stride-root')
)

if (module.hot) {
    module.hot.accept('./App', () => {
        const NextApp = require('./App').default;
        ReactDOM.render(
            <AppContainer>
                <NextApp/>
            </AppContainer>,
            document.getElementById('stride-root')
        );
    });
}

以下是相关代码：

index.tsx

import React, { Component } from 'react';

class App extends Component<void,void> {

    render() {
        return (
            <div> Hello World. </div>
        );
    }
}

export default App;

App.tsx

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    devtool: 'eval-source-map',
    entry : [
        'webpack-hot-middleware/client',
        // 'babel-polyfill',
        'react-hot-loader/patch',
        path.join(__dirname, 'app/index.tsx')
    ],

    output : {
        path : path.resolve(__dirname, '/'),
        filename : '[name].js',
        publicPath: '/'
    },
    resolve: {
        extensions : [".ts", ".tsx", ".js", ".jsx"]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        // new webpack.LoaderOptionsPlugin({
        //   debug: true,
        // }),
        new HtmlWebpackPlugin({
            template: 'app/index.html',
            inject: true,
            filename: 'index.html'
        }),
        new ExtractTextPlugin("main.css"),
        new webpack.NoEmitOnErrorsPlugin(),


    ],
    module: {
        rules: [
            {
                test: /\.(j|t)sx?$/,
                exclude: /node_modules/,
                loader :'awesome-typescript-loader'
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use : [
                    "style-loader",
                    { loader: 'css-loader', options: { sourceMap: true } },
                    { loader: 'sass-loader', options: { sourceMap: true } }
                ]
            },
            {
                enforce: "pre",
                test : /\js$/,
                loader: "source-map-loader"
            },
        ]
    },
    devtool : "source-map"
}

如果有帮助，我还会包含我的webpack和tsconfig文件。这些是从现有项目中获取的，因此请随意提出有用的修改或简化。谢谢！

webpack.config.js

{
    "compilerOptions": {
        "outDir": "./dist/",        // path to output directory
        "sourceMap": true,          // allow sourcemap support
        "strictNullChecks": true,   // enable strict null checks as a best practice
        "module": "es6",            // specifiy module code generation
        "jsx": "react",             // use typescript to transpile jsx to js
        "target": "es5",            // specify ECMAScript target version
        "allowJs": true,             // allow a partial TypeScript and JavaScript codebase
        "allowSyntheticDefaultImports" : true,      // Allows simple import statements
    },
    "include": [
        "./src/"
    ]
}

tsconfig.json：

{{1}}

Answer 1

我遇到了同样的问题。

我发现错误发生在tsconfig.json文件中。它在baseUrl中声明了错误的路径。

现在申请工作。

如何在index.tsx中的hasOwnProperty上解决TypeError

1 个答案: