Typescript with Webpack - You may need an appropriate loader to handle this file type currently no loaders are configured to process this file

0 votes

I'm having a problem configuring Webpack for Typescript and React. After running the NPM script: webpack serves ./webpack/webpack.config.ts --open, the following error appeared in the console

enter image description here

Here are the configuration files:

webpack.config.ts

import path from "path";
import { Configuration, ProvidePlugin } from "webpack";
import * as webPackDevServer from 'webpack-dev-server'

import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'

const config: Configuration = {
    context: __dirname,
    mode: 'development',
    entry: '../src/index.tsx',
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            "@babel/preset-env",
                            "@babel/preset-react",
                            "@babel/preset-typescript",
                        ]
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.(woff|woff2|ttf|eot|png|jpg|svg|gif)$/i,
                use: ['file-loader']
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "bundle.js"
    },
    plugins: [
        new ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
        new MiniCssExtractPlugin({
            filename: "index.css"
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "..", "./public/index.html")
        }),
        new ForkTsCheckerWebpackPlugin()
    ],
    devServer: {
        static: path.join(__dirname, "..", "build"),
        compress: true,
        port: 8000
    }
}

export default config

tsconfig.json

    {
    "compilerOptions": {
        "module": "ES6",
        "target": "ES5",
        "lib": [
            "DOM",
            "DOM.Iterable",
            "ESNext"
        ],
        "moduleResolution": "node",
        "esModuleInterop": true,
        "strict": true,
        "allowJs": true,
        "noEmit": true,
        "isolatedModules": true,
        "skipLibCheck": true,
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        "forceConsistentCasingInFileNames": true,
        "jsx": "react-jsx"
    },
    "include": [
        "src/**/*"
    ]
}

.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript"
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "regenerator": true
            }
        ]
    ]
}

.eslintrc.json

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2015,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "react-hooks"
    ],
    "extends": [
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "rules": {
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn",
        "react/prop-types": "off"
    },
    "settings": {
        "react": {
            "pragma": "React",
            "version": "detect"
        }
    }
}

File structure

enter image description here

It may have something to do with the package path, as when I run the command webpack, the following error appears in the console:

enter image description here

Aug 3, 2022 in TypeSript by Elton
• 400 points
64,917 views

1 answer to this question.

0 votes

So I believe the problem is that your webpack config file is written in typescript. I think your webpack configuration is fine, but your webpack file basically tells your system how to handle typescript files, but nothing tells your system how to handle a webpack.config.ts file.

One quick test would be to replace the small amount of typescript in your config file with webpack.config.js and see if that works. At the very least, you've identified the problem.

To obtain the typescript configuration file, you may simply need to install ts-node as a npm dev dependency.

The documentation for using a typescript configuration file is available at https://webpack.js.org/configuration/configuration-languages/.

If you need to know more about React, Its recommended to join React JS course today.

answered Aug 3, 2022 by Abhinaya
• 1,160 points

Related Questions In TypeSript

0 votes
1 answer
0 votes
1 answer

TypeScript Object assign gives me an error property assign does not exist on type ObjectConstructor

For TypeScript 2.1 and higher, you can ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,060 points
2,083 views
0 votes
1 answer

How to use next-seo for setting nextjs meta tag with multiple OGP images?

https://github.com/garmeeh/next-seo use this git repo that contains ...READ MORE

answered Feb 24, 2022 in Others by narikkadan
• 63,600 points
6,138 views
0 votes
1 answer

React Native Performance: Javascript vs Typescript

TypeScript is just compiled to JavaScript. Think ...READ MORE

answered Jun 13, 2022 in TypeSript by Nina
• 3,060 points
893 views
0 votes
0 answers
0 votes
0 answers
0 votes
1 answer

Using TypeScript, and Object.assign gives me an error "property 'assign' does not exist on type 'ObjectConstructor'"

You can use type assertion, like this: (<any>Object).as ...READ MORE

answered Aug 3, 2022 in TypeSript by Abhinaya
• 1,160 points
4,575 views
0 votes
1 answer

How to use useState hook in React with typescript correctly?

You can set a string type for it Explicit way: const ...READ MORE

answered Aug 3, 2022 in TypeSript by Abhinaya
• 1,160 points
4,258 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP