React Typescript with Webpack webpack.config.ts file already exists, mkdir

Question

I'm trying my hands on creating a template for React with Typescript.

To use it in a productive Environment I want to bundle it with a webpack.

As far as my research goes I should have configured everything correctly.

As follows

webpack.config.ts

const path = require('path'); module.exports = { mode: "development", entry: { app: path.join(__dirname, 'src', 'index.tsx') }, target: 'web', module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', include: [ path.resolve(__dirname, 'ts') ], }, { enforce: "pre", test: "/\.js$/", loader: "source-map-loader" } ] }, resolve: { extensions: [ '.tsx', '.ts', '.js' ], }, output: { filename: 'index.js', path: path.resolve(__filename, 'js') }, devtool: 'source-map', };

tsconfig.json

{ "compilerOptions": { "target": "ES6", "module": "CommonJS", "outDir": "./js/", "preserveConstEnums": true, "moduleResolution": "Node", "sourceMap": true, "removeComments": true, "jsx": "react" }, "include": [ "./ts/**/*" ] }

package.json

{ "name": "reacttest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack --config webpack.config.ts" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@types/node": "^14.0.14", "@types/react": "^16.9.41", "@types/react-dom": "^16.9.8", "html-webpack-plugin": "^4.3.0", "source-map-loader": "^1.0.0", "ts-loader": "^7.0.5", "typescript": "^3.9.5", "webpack": "^4.43.0", "webpack-cli": "^3.3.12" }, "dependencies": { "react": "^16.13.1", "react-dom": "^16.13.1" } }

But every time I run

webpack

or

webpack --config webpack.config.ts

or

webpack webpack.config.ts

I get the following error message

Error: EEXIST: file already exists, mkdir '\Some\Path\WebWorkspace\reacttest\webpack.config.ts'

What am I doing wrong?

Is tried it with both

NodeJs 13.7

and

NodeJs v12.18.1

Thanks in Advance

Gopinath · Accepted Answer · 2020-06-27 10:37:11Z

The root cause of the problem is due to the use of .ts as the extension for webpack.config file.

The tsconfig.json file is instructing Webpack to include all .ts files in the scope for processing. This inadvertently includes the webpack.config.ts file also.

The problem can be resolved by renaming webpack.config.ts file to webpack.config.js.

Here are the working examples of all the files required for implementing the React JS project in Typescript:

1. Folder structure for the project

react-ui react-ui/package.json react-ui/tsconfig.json react-ui/webpack.config.json react-ui/src react-ui/src/index.tsx ---> Main program react-ui/www ---> For static html file and images react-ui/www/index.html react-ui/www/images

2. package.json (Include webpack, webpack-cli and webpack-dev-server)

{ "name": "react-ui", "version": "1.0.0", "description": "UI with React and Typescript", "main": "index.tsx", "scripts": { "start": "webpack-dev-server --port 3000 --mode development --hot", "build": "webpack --config webpack.config.js" }, "dependencies": { "react": "^16.13.1", "react-dom": "^16.13.1" }, "devDependencies": { "@types/node": "^14.0.13", "@types/react": "^16.9.38", "@types/react-dom": "^16.9.8", "@types/webpack": "^4.41.17", "clean-webpack-plugin": "^3.0.0", "copy-webpack-plugin": "^6.0.2", "css-loader": "^3.6.0", "file-loader": "^6.0.0", "html-webpack-plugin": "^4.3.0", "ignore-emit-webpack-plugin": "^2.0.2", "mini-css-extract-plugin": "^0.9.0", "ts-loader": "^7.0.5", "typescript": "^3.9.5", "webpack": "^4.43.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0" } }

3. tsconfig.json

{ "compilerOptions": { "outDir": "./dist", "target": "es5", "module": "es6", "jsx": "react", "noImplicitAny": true, "allowSyntheticDefaultImports": true } }

4. webpack.config.js

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin'); module.exports = { mode: 'none', entry: { app: path.join(__dirname, 'src', 'index.tsx') }, target: 'web', resolve: { extensions: ['.ts', '.tsx', '.js'] }, plugins: [ new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: '[name].css' }), new HtmlWebpackPlugin({ template: path.join(__dirname, 'www', 'index.html') }), new CopyPlugin({ patterns: [{ from: 'www/images', to: 'www/images' }] }) ], module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: '/node_modules/' }, { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }, { test: /\.(svg|png|jpg|gif|eot|ttf|woff|woff2)$/, use: ["file-loader"] } ] }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, optimization: { splitChunks: { cacheGroups: { styles: { name: 'styles', test: /\.css$/, chunks: 'all', enforce: true, }, }, }, } }

How to use?

Start Development server:

> npm start ---> Starts dev server at port # 3000

Production build:

> npm run build --> Creates production ready package in react-ui/dist folder

Hi thanks for the quick response. But unfortunately this won't fix the issue. I tried it changing the file name to ts but the same error shows up whenever I try to build it.
It does not matter what I called it the error will always be: Error: EEXIST: file already exists, mkdir '\Some\Path\WebWorkspace\reacttest\whateverNameIUse'

Stephan Pich · Accepted Answer · 2020-06-27 12:35:13Z

Found the Error:

replaced:

path: path.resolve(__filename, 'js')

with:

path: path.resolve(__dirname, 'js')

Collectives™ on Stack Overflow

React Typescript with Webpack webpack.config.ts file already exists, mkdir

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related