How to fix Module parse failed: Unexpected token?

Jack

When I run npm run build I got this error:

ERROR in ./src/client.js 7:2
Module parse failed: Unexpected token (7:2)
File was processed with these loaders:
 * ./node_modules/jshint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| 
| const component = (
>   <Router history={browserHistory}>
|     {routes}
|   </Router>
 @ multi babel-polyfill ./src/client.js main[1]

./src/client.js (with warning for browserHistory -- Cannot resolve symbol 'browserHistory' )

import React      from 'react';
import ReactDOM   from 'react-dom';
import { browserHistory, Router } from 'react-router';
import routes from './routes';

const component = (
  <Router history={browserHistory}>
    {routes}
  </Router>
);

ReactDOM.render(component, document.getElementById('react-view'));

How can I fix it?

react: 16.13.0

webpack: 4.42.0

npm: 6.14.2

webpack-config.js

global.Promise         = require('bluebird');
const webpack            = require('webpack');
const path               = require('path');

const plugins = [
  new webpack.DefinePlugin({
    'process.env': {
      BROWSER:  JSON.stringify(true),
      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
    }
  })
];

module.exports = {
  entry: ['babel-polyfill', './src/client.js'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  module: {
    rules: [{
      test: /\.js$/, // include .js files
      enforce: "pre", // preload the jshint loader
      exclude: /node_modules/, // exclude any and all files in the node_modules folder
      use: [{
        loader: "jshint-loader",
        // more options in the optional jshint object
        options: {  // ⬅ formally jshint property
          camelcase: true,
          emitErrors: false,
          failOnHint: false
        }
      }]
    }]
  }
};
tudor.gergely

Your webpack config doesn't handle React's JSX syntax. You need to update it with some loaders for this to work (here's a tutorial: https://www.valentinog.com/blog/babel/)

I would recommend you use create-react-app at first, which abstracts all those configurations away: https://github.com/facebook/create-react-app . It is way easier to get started with react this way and you can customise it when you're ready/if you need to.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Module parse failed: Unexpected token

From Dev

webpack tsx 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

Webpack failed to parse TypeScript module: Unexpected token

From Dev

Vue Module parse failed: Unexpected token

From Dev

Module parse failed: Unexpected token (11:19)

From Dev

How can I solve the Module parse failed: Unexpected token (11:9) react-router-native

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 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?

From Dev

How to fix "Unexpected token $ in JSON" when using VelocityJS to parse VTL

From Dev

Module parse failed: Unexpected character '@'

From Dev

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

From Dev

ons-navigator: Error: Module parse failed: Unexpected token (330:6)

From Dev

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

From Javascript

React - Module parse failed: Unexpected Token. You may need an appropriate loader to handle this file type

From Dev

React JS: ERROR in index.css 1:0 (Module parse failed: Unexpected token (1:0))

From Dev

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

From Dev

Module parse failed: Unexpected token (1:0) vue.js vuex store

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

Module parse failed: Unexpected token (257:106) You may need an appropriate loader to handle this file type

From Dev

Module parse failed: Unexpected token. react-native/index.js "typeof" operator

Related Related

  1. 1

    Module parse failed: Unexpected token

  2. 2

    webpack tsx Module parse failed: Unexpected token

  3. 3

    Module parse failed: Unexpected token ionic 3

  4. 4

    Module parse failed: Unexpected token (7855:112)

  5. 5

    Webpack failed to parse TypeScript module: Unexpected token

  6. 6

    Vue Module parse failed: Unexpected token

  7. 7

    Module parse failed: Unexpected token (11:19)

  8. 8

    How can I solve the Module parse failed: Unexpected token (11:9) react-router-native

  9. 9

    Module parse failed: Unexpected token when using webpack 5

  10. 10

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

  11. 11

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

  12. 12

    Module Parse Failed: Unexpected token in Webpack Typescript Loader

  13. 13

    Module parse failed: Unexpected token on React Component Render

  14. 14

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

  15. 15

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

  16. 16

    CSS Module parse failed: Unexpected token Angular 14?

  17. 17

    How to fix "Unexpected token $ in JSON" when using VelocityJS to parse VTL

  18. 18

    Module parse failed: Unexpected character '@'

  19. 19

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

  20. 20

    ons-navigator: Error: Module parse failed: Unexpected token (330:6)

  21. 21

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

  22. 22

    React - Module parse failed: Unexpected Token. You may need an appropriate loader to handle this file type

  23. 23

    React JS: ERROR in index.css 1:0 (Module parse failed: Unexpected token (1:0))

  24. 24

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

  25. 25

    Module parse failed: Unexpected token (1:0) vue.js vuex store

  26. 26

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

  27. 27

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

  28. 28

    Module parse failed: Unexpected token (257:106) You may need an appropriate loader to handle this file type

  29. 29

    Module parse failed: Unexpected token. react-native/index.js "typeof" operator

HotTag

Archive