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

Question

I am trying to set up a simple frame for a typescript project and I can't get it to compile. Any help would be appreciated.

I receive the following error:

in ./app/index.tsx
Module build failed: TypeError: Cannot convert undefined or null to object
at hasOwnProperty (<anonymous>)
at Object.hasProperty (C:\Users\sjb3\docs\NIST-CT\StriDE\node_modules\typescript\lib\typescript.js:2229:31)
at parseConfig (C:\Users\sjb3\docs\NIST-CT\StriDE\node_modules\typescript\lib\typescript.js:71815:16)
at C:\Users\sjb3\docs\NIST-CT\StriDE\node_modules\typescript\lib\typescript.js:71721:22
at Object.parseJsonConfigFileContent (C:\Users\sjb3\docs\NIST-CT\StriDE\node_modules\typescript\lib\typescript.js:71735:11)
at readConfigFile (C:\Users\sjb3\docs\NIST-CT\StriDE\node_modules\awesome-typescript-loader\src\instance.ts:324:33)
at Object.ensureInstance (C:\Users\sjb3\docs\NIST-CT\StriDE\node_modules\awesome-typescript-loader\src\instance.ts:101:9)
at compiler (C:\Users\sjb3\docs\NIST-CT\StriDE\node_modules\awesome-typescript-loader\src\index.ts:47:22)
at Object.loader (C:\Users\sjb3\docs\NIST-CT\StriDE\node_modules\awesome-typescript-loader\src\index.ts:16:18)
@ multi webpack-hot-middleware/client react-hot-loader/patch ./app/index.tsx

Here is the relevant code:

index.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;

In case it helps, I will also include my webpack and tsconfig files. These are taken from an existing project, so please feel free to suggest useful modifications or simplifications. Thanks!

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

I had the same issue.

I found that the error was in tsconfig.json file. It declares a wrong path in baseUrl .

Now application works.