CODEWITHSUNDEEP
reactjstypescriptwebpack
Dharmesh Mehta
Dharmesh Mehta

Reputation: 131

How to setup webpack config in typescript react app

I am trying to set up webpack config in react application. The purpose behind adding webpack configuration is to avoid caching of build files.

For development watcher mode and production minimized build.

Following is webpack.config.ts

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.ts',
    path: path.resolve(__dirname, 'dist'),
  },
};

package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.1.2",
    "@testing-library/user-event": "^12.2.2",
    "@types/enzyme": "^3.10.8",
    "@types/file-saver": "^2.0.2",
    "@types/jest": "^26.0.15",
    "@types/lodash": "^4.14.165",
    "@types/node": "^12.19.4",
    "@types/react-alert": "^5.2.0",
    "@types/react-dom": "^16.9.9",
    "@types/react-modal": "^3.10.6",
    "@types/react-redux": "^7.1.11",
    "@types/react-router-dom": "^5.1.6",
    "@types/react-select": "^3.0.27",
    "@types/react-table": "^7.0.25",
    "@types/react-test-renderer": "^17.0.0",
    "@types/redux-mock-store": "^1.0.2",
    "@types/styled-components": "^5.1.4",
    "axios": "^0.21.1",
    "axios-mock-adapter": "^1.19.0",
    "enzyme": "^3.11.0",
    "file-saver": "^2.0.5",
    "keycloak-js": "^11.0.3",
    "lodash": "^4.17.20",
    "node-sass": "^4.14.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-alert": "^7.0.2",
    "react-alert-template-basic": "^1.0.0",
    "react-bootstrap": "^1.4.3",
    "react-dom": "^17.0.1",
    "react-dropzone": "^11.3.2",
    "react-hook-form": "^6.13.1",
    "react-modal": "^3.12.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-select": "^3.1.1",
    "react-table": "^7.6.2",
    "react-test-renderer": "^17.0.1",
    "react-toastify": "^6.2.0",
    "redux": "^4.0.5",
    "redux-mock-store": "^1.5.4",
    "redux-thunk": "^2.3.0",
    "serve": "^12.0.0",
    "styled-components": "^5.2.1",
    "styled-icons": "^10.22.0",
    "ts-jest": "^26.4.4",
    "typescript": "^4.4.4",
    "wait-for-expect": "^3.0.2",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "develop": "webpack-dev-server --mode production"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react": "^17.0.3",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "html-webpack-plugin": "^5.4.0",
    "husky": "^4.3.0",
    "jest-teamcity-reporter": "^0.9.0",
    "lint-staged": "^10.5.1",
    "prettier": "2.1.2",
    "ts-loader": "^9.2.6",
    "ts-node": "^10.3.0",
    "webpack": "^5.59.1",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.3.1"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,css,md,ts,tsx}": "prettier --write"
  }
}

After running npm run develop I get following error

[email protected] develop /c/Users/ui/project webpack-dev-server --mode production

[webpack-cli] Failed to load '/c/Users/ui/project/webpack.config.ts' config [webpack-cli] webpack.config.ts:1:1 - error TS1208: 'webpack.config.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

Upvotes: 1

Views: 710

Answers (1)

Chukwunazaekpere
Chukwunazaekpere

Reputation: 1012

create the react project with:

 yarn create react-app <project-name> --template typescript

to build:

yarn build

You don't need setting-up webpack.

Upvotes: 0

Related Questions