I am familliar with react and javascript.
However I want to move my javascript code to typescript,
So I start hands-on for my basic application
However it shows the error like this below,
$npm run build
assets by status 1010 KiB [cached] 1 asset
runtime modules 123 bytes 1 module
modules by path ./node_modules/ 1000 KiB
modules by path ./node_modules/react-dom/ 947 KiB
modules by path ./node_modules/react-dom/*.js 2.67 KiB 2 modules
modules by path ./node_modules/react-dom/cjs/*.js 945 KiB
./node_modules/react-dom/cjs/react-dom-client.development.js 928 KiB [built] [code generated]
./node_modules/react-dom/cjs/react-dom.development.js 17.3 KiB [built] [code generated]
modules by path ./node_modules/react/ 44.2 KiB
./node_modules/react/index.js 186 bytes [built] [code generated]
./node_modules/react/cjs/react.development.js 44 KiB [built] [code generated]
modules by path ./node_modules/scheduler/ 12 KiB
./node_modules/scheduler/index.js 194 bytes [built] [code generated]
./node_modules/scheduler/cjs/scheduler.development.js 11.9 KiB [built] [code generated]
./src/index.tsx 1.84 KiB [built] [code generated]
WARNING in DefinePlugin
Conflicting values for 'process.env.NODE_ENV'
1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
ERROR in ./src/index.tsx 40:30-57
Module not found: Error: Can't resolve './components/App' in '/Users//httproot/frontend/src'
resolve './components/App' in '/Users/httproot/frontend/src'
using description file: /Users/httproot/frontend/package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/httproot//frontend/package.json (relative path: ./src/components/App)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/httproot/frontend/src/components/App doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/httproot/frontend/src/components/App.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/httproot/frontend/src/components/App.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/httproot/frontend/src/components/App.wasm doesn't exist
as directory
/Users/httproot/frontend/src/components/App doesn't exist
indes.tsx
import * as React from 'react'
import App from './components/App'
import {createRoot} from 'react-dom/client';
const rootElement = document.getElementById('app')!;
const root = createRoot(rootElement);
root.render(<App></App>);
App.tsx
import React, { Component,useEffect } from "react"
import { BrowserRouter, Routes, Route } from "react-router-dom";
import TopPage from './TopPage'
const App = () => {
useEffect(() => {
console.log("come rendered toppage");
},[]);
const pageProps = {
env: "prod"
}
return <BrowserRouter>
<Routes>
<Route path={`/`} element={<TopPage {...pageProps}/>} />
</Routes>
</BrowserRouter>
};
export default App;
TopPage.tsx
import React,{useState,useEffect,useRef,createContext,useCallback,useContext} from 'react'
interface PageProps {
env: string,
}
const TopPage = (props: PageProps) =>{
useEffect(() => {
console.log("come toppage");
},[]);
return <div>test toppage</div>
}
export default TopPage;
webpack.config.js
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.tsx",
output: {
path: path.resolve(__dirname, "./static/frontend"),
filename: "[name].tsx",
},
module: {
rules: [
{
test: /.tsx$/,
exclude: /node_modules/,
use: {
loader: "ts-loader",
},
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV' : JSON.stringify('development')
})
]
}
package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.tsx",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.27.4",
"@babel/preset-env": "^7.27.2",
"@babel/preset-react": "^7.27.1",
"babel-loader": "^10.0.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"ts-loader": "^9.5.2",
"typescript": "^5.8.3",
"webpack": "^5.99.9",
"webpack-cli": "^6.0.1"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.18.6",
"react-router-dom": "^7.6.2"
}
}
