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 in TypeSript by Elton
• 400 points
93 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/.
answered Aug 3 by Abhinaya
• 760 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 in TypeSript by Nina
• 3,020 points
70 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 in Others by narikkadan
• 11,280 points
464 views
0 votes
1 answer

React Native Performance: Javascript vs Typescript

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

answered Jun 13 in TypeSript by Nina
• 3,020 points
18 views
0 votes
0 answers
0 votes
0 answers
0 votes
1 answer
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 in TypeSript by Abhinaya
• 760 points
16 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP