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

Question

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

我收到以下错误：

in ./app/index.tsx
Module build failed: TypeError: Cannot convert undefined or null to object
at hasOwnProperty (<anonymous>)
at Object.hasProperty (C:Userssjb3docsNIST-CTStriDEnode_modulestypescriptlibtypescript.js:2229:31)
at parseConfig (C:Userssjb3docsNIST-CTStriDEnode_modulestypescriptlibtypescript.js:71815:16)
at C:Userssjb3docsNIST-CTStriDEnode_modulestypescriptlibtypescript.js:71721:22
at Object.parseJsonConfigFileContent (C:Userssjb3docsNIST-CTStriDEnode_modulestypescriptlibtypescript.js:71735:11)
at readConfigFile (C:Userssjb3docsNIST-CTStriDEnode_modulesawesome-typescript-loadersrcinstance.ts:324:33)
at Object.ensureInstance (C:Userssjb3docsNIST-CTStriDEnode_modulesawesome-typescript-loadersrcinstance.ts:101:9)
at compiler (C:Userssjb3docsNIST-CTStriDEnode_modulesawesome-typescript-loadersrcindex.ts:47:22)
at Object.loader (C:Userssjb3docsNIST-CTStriDEnode_modulesawesome-typescript-loadersrcindex.ts:16:18)
@ multi webpack-hot-middleware/client react-hot-loader/patch ./app/index.tsx

以下是相关代码：

索引.tsx

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')
);
});
}

App.tsx

import React, { Component } from 'react';
class App extends Component<void,void> {
render() {
return (
<div> Hello World. </div>
);
}
}
export default App;

如果有帮助，我还将包括我的 webpack 和 tsconfig 文件。这些都取自现有项目，因此请随时提出有用的修改或简化建议。谢谢！

webpack.config.js

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"
}

tsconfig.json：

{
"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/"
]
}

Answer 1

我遇到了同样的问题。

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

现在应用程序可以工作。