gopinav/react-typescript-webpack-starter

A starter template for React projects with TypeScript and Webpack 5 with Fast refresh

Download the starter kit

npx degit https://github.com/gopinav/React-TypeScript-Webpack-Starter my-app

Install dependencies

cd my-app && yarn

Run dev server

yarn start

Build

yarn build

react-typescript-webpack-starter's Issues

Issues related to setting up app

Firstly, thanks a lot for your videos and this repo. It's been a very informative and great help. I've completed all the steps till 7 so far and I've got 2 issues. Appreciate any help with this.

1. VSCode complaints of this error even though I've copied the config exactly from the repo. - No inputs were found in config file '/src/tsconfig.json'. Specified 'include' paths were '["src/**/*"]' and 'exclude' paths were '[]'.
2. My app.tsx complains of "Cannot find module './react.png' or its corresponding type declarations." However, if I just open the declarations.d.ts file and save it, the error goes away. This happens every time I open the application.

TypeError: The 'compilation' argument must be an instance of Compilation

I did a git pull into my folder and ran
yarn start
but it gave me a TypeError displayed in the title that I don't know how to get around.

Project builds successfully although type errors

Hello. Thank you for awesome tutorial and starter pack!
But I found some problem.
If I make a mistake with Typescript code, then build will be created successfully. Also "npm start" will be executed successfully too.
For example:

import { useState } from 'react'

export const Counter = () => {
  let a = 90
  a += 'dfdfdf' //this is error!

  const [count, setCount] = useState(0)
  return (
    <div>
      <h3>Update {a} the count and edit src/App.tsx, state is preserved</h3>
      <button onClick={() => setCount((c) => c + 1)}>Count - {count}</button>
    </div>
  )
}

It is possible to prevent building process or prevent starting app if Typescript errors exists ?

ESLint couldn't find the config "prettier/@typescript-eslint" to extend from

Hi, I'm using latest version of dependencies, and whenever linting with eslint, facing the issue mentioned in header.
I believe it is related to prettier/@typescript-eslint not present after eslint-config-prettier v8.0.0.

Reference

package.json:

{
"name": "typescript-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve --config webpack/webpack.config.js --open --env env=dev",
"build": "webpack --config webpack/webpack.config.js --env env=prod",
"lint": "eslint --fix "./src/**/*.{js,jsx,ts,tsx,json}""
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/core": "^7.23.0",
"@babel/preset-env": "^7.22.20",
"@babel/preset-react": "^7.22.15",
"@babel/preset-typescript": "^7.23.0",
"@types/react": "^18.2.25",
"@types/react-dom": "^18.2.11",
"@typescript-eslint/eslint-plugin": "^6.7.5",
"@typescript-eslint/parser": "^6.7.5",
"babel-loader": "^9.1.3",
"css-loader": "^6.8.1",
"eslint": "^8.51.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-import": "^2.28.1",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"html-webpack-plugin": "^5.5.3",
"prettier": "^3.0.3",
"style-loader": "^3.3.3",
"typescript": "^5.2.2",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1",
"webpack-merge": "^5.9.0"
}
}

eslintrc.js

module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
},
settings: {
react: {
version: 'detect',
},
},
extends: [
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
'plugin:jsx-a11y/recommended',
'plugin:eslint-comments/recommended',
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
],
rules: {
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': ['error'],
'@typescript-eslint/no-var-requires': 'off',
'react/prop-types': 'off',
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
},
}

how to avoid letting the packages deprecated?

https://stackoverflow.com/questions/62650640/yarn-how-do-i-update-each-dependency-in-package-json-to-the-latest-version

Issue Related To Production

Hi sir, I have stuck with webpack production, in the local I can use historyApiFallback for refresh page route /login, but in production dont have historyApiFallback so when I refresh route /login, It returns 404 not found. Please help me in this issue, thank you so much

Unable to host project in local network

In CRA we can view the site with local IP of the device which are connected to the same network.
But this config somehow not allowing. How to do that?

Do you really need Babel here - Typescript can compile React JSX too!

https://github.com/gopinav/React-TypeScript-Tutorials.git