CODEWITHSUNDEEP
node.jsreactjstypescriptwebpack
Stephan Pich
Stephan Pich

Reputation: 301

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

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

Upvotes: 2

Views: 4682

Answers (2)

Stephan Pich
Stephan Pich

Reputation: 301

Found the Error:

replaced:

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

with:

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

Upvotes: 0

Gopinath
Gopinath

Reputation: 4957

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

Upvotes: 1

Related Questions