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

0

Found the Error:

replaced:

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

with:

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

answered Jun 27, 2020 at 12:35

Stephan Pich

3011 gold badge4 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related