webpack tsx Module parse failed: Unexpected token

necroface

I am trying to write both frontend (React) and backend (Express) in TypeScript. At the moment, my webpack.config.js in the root folder encounters an error even though I have ts-loader for it.

This is webpack.config.js

const webpack = require('webpack');
const path = require('path');

const config = {
    cache: true,
    mode: 'development',
    entry: {
        'user': ['./src/client/User/index.tsx', 'webpack-hot-middleware/client']
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/static'
    },
    devServer: {
        contentBase: './dist',
        hot: true
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                include: path.join(__dirname, 'client')
            }
        ]
    },
    node: { fs: 'empty' }
};

module.exports = config;

And this is my tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node",
        "jsx": "react",
        "esModuleInterop": true,
        "outDir": "dist",
        "sourceMap": true,
        "baseUrl": "."
    },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules"]
}

I got the error like this:

ERROR in ./src/client/User/index.tsx 10:1
Module parse failed: Unexpected token (10:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| const rootComponent = (
>       <Provider store={store}>
|               <BrowserRouter>
|                       <div id="page-container" className="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed side-trans-enabled">
 @ multi ./src/client/User/index.tsx webpack-hot-middleware/client user[0]
necroface

Thanks to FunkeyFlo answer, I found out the answer myself. I have to change both:

  • tsconfig.json: include also src/**/*.tsx
  • webpack.config.js: entry to ./dist/src/client/User/index

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Webpack failed to parse TypeScript module: Unexpected token

From Dev

Module parse failed: Unexpected token when using webpack 5

From Dev

Webpack error after upgrading Node: "Module parse failed: Unexpected token"

From Dev

Module parse failed: Unexpected token using webpack-dev-server

From Dev

Module Parse Failed: Unexpected token in Webpack Typescript Loader

From Dev

Module parse failed: Unexpected token

From Dev

Webpack fails to parse typescript files. Module parse failed: Unexpected token

From Dev

Webpack 4 - Module parse failed: Unexpected character '@'

From Dev

webpack module parse failed Unexpected character '@'

From Dev

Webpack 4 - Module parse failed: Unexpected character ' '

From Dev

How to fix Module parse failed: Unexpected token?

From Dev

Module parse failed: Unexpected token ionic 3

From Dev

Module parse failed: Unexpected token (7855:112)

From Dev

Vue Module parse failed: Unexpected token

From Dev

Module parse failed: Unexpected token (11:19)

From Dev

Module parse failed: Unexpected token (6:16) when building react with webpack

From Dev

Webpack 4 basic React js hello world fails with "Module parse failed: Unexpected token"

From Dev

React / Webpack - "Module parse failed: Unexpected token - You may need an appropriate loader to handle this file type."

From Dev

React and Webpack Module parse failed: /testimonials.js Unexpected token (6:4)

From Dev

.tsx webpack compile fails: Unexpected token <

From Dev

Webpack module build failed unexpected token (rails react build)

From Dev

Webpack, React JSX, Babel: Module build failed, "unexpected token" empty?

From Dev

Module parse failed: Unexpected token (7:5) You may need an appropriate loader to handle this file type. : Webpack, Bootstrap

From Dev

Webpack 4 error - Module parse failed: Unexpected character '@'

From Dev

electron-webpack-react error "Module parse failed: Unexpected character '@'"

From Dev

Module parse failed: Unexpected token on React Component Render

From Dev

Module parse failed: Unexpected token (9:37) with babel-loader

From Dev

Module parse failed: Unexpected token (14:6) while heroku deployment

From Dev

CSS Module parse failed: Unexpected token Angular 14?

Related Related

  1. 1

    Webpack failed to parse TypeScript module: Unexpected token

  2. 2

    Module parse failed: Unexpected token when using webpack 5

  3. 3

    Webpack error after upgrading Node: "Module parse failed: Unexpected token"

  4. 4

    Module parse failed: Unexpected token using webpack-dev-server

  5. 5

    Module Parse Failed: Unexpected token in Webpack Typescript Loader

  6. 6

    Module parse failed: Unexpected token

  7. 7

    Webpack fails to parse typescript files. Module parse failed: Unexpected token

  8. 8

    Webpack 4 - Module parse failed: Unexpected character '@'

  9. 9

    webpack module parse failed Unexpected character '@'

  10. 10

    Webpack 4 - Module parse failed: Unexpected character ' '

  11. 11

    How to fix Module parse failed: Unexpected token?

  12. 12

    Module parse failed: Unexpected token ionic 3

  13. 13

    Module parse failed: Unexpected token (7855:112)

  14. 14

    Vue Module parse failed: Unexpected token

  15. 15

    Module parse failed: Unexpected token (11:19)

  16. 16

    Module parse failed: Unexpected token (6:16) when building react with webpack

  17. 17

    Webpack 4 basic React js hello world fails with "Module parse failed: Unexpected token"

  18. 18

    React / Webpack - "Module parse failed: Unexpected token - You may need an appropriate loader to handle this file type."

  19. 19

    React and Webpack Module parse failed: /testimonials.js Unexpected token (6:4)

  20. 20

    .tsx webpack compile fails: Unexpected token <

  21. 21

    Webpack module build failed unexpected token (rails react build)

  22. 22

    Webpack, React JSX, Babel: Module build failed, "unexpected token" empty?

  23. 23

    Module parse failed: Unexpected token (7:5) You may need an appropriate loader to handle this file type. : Webpack, Bootstrap

  24. 24

    Webpack 4 error - Module parse failed: Unexpected character '@'

  25. 25

    electron-webpack-react error "Module parse failed: Unexpected character '@'"

  26. 26

    Module parse failed: Unexpected token on React Component Render

  27. 27

    Module parse failed: Unexpected token (9:37) with babel-loader

  28. 28

    Module parse failed: Unexpected token (14:6) while heroku deployment

  29. 29

    CSS Module parse failed: Unexpected token Angular 14?

HotTag

Archive