Here is the code snippet I have in my index.tsx file.
import Clock from "./utility/clock";
And this is my tsconfig setup.
{
"compilerOptions": {
"sourceMap": true,
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowSyntheticDefaultImports": true,
"allowJs": true,
},
"include": [
"./src"
]
}
Prior to posting this query, I reviewed the following page: Module Resolution
I have double-checked that the file path for my Clock component is correct, as shown in the image below:
https://i.sstatic.net/jZCXr.png
I am perplexed as to why the Clock module cannot be located. Thank you for your assistance.
======Update webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
let isDev = false;
const env = process.env.NODE_ENV;
isDev = env === "development" ? true : false;
console.log(isDev ? "Development Environment" : "Production Environment");
// Rest of webpack configuration...
=====update 2: clock.tsx
import React, { Component } from "react";
class Clock extends Component<any, any>{
render() {
return (
<div>
I plan to design a clock using CSS
</div>
)
}
};
export default Clock;