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.
