I need assistance setting up a basic frame for my TypeScript project as I am having trouble compiling it. Any guidance would be greatly appreciated.
The error I am encountering is:
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
Below 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;
If it helps, I can also share my webpack and tsconfig files which have been adapted from an existing project. Feel free to suggest any helpful adjustments or simplifications. Thank you!
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/"
]
}