js error: You may need an appropriate loader

Question

What I did is just import a npm package

import TimePicker from 'simple-timepicker-react'

render () {
    return (
      <div className='App'>
        <TimePicker />
      </div>
    )
  }

and I got this error in my terminal when starting my webapp.

./node_modules/simple-timepicker-react/src/SimpleTimePicker.js
Module parse failed: Unexpected token (194:6)
You may need an appropriate loader to handle this file type.
| 
|     return (
|       <div id="datetime-selector" style={{ width: containerWidth }}>
|         <div className="placeholderInput-wrap">
|           <input

Isn't that is a javascript file? What kind of loader I need? I don't get the meaning of the error.

Answer 1

React uses a tag syntax extension to JavaScript called JSX . In order to transform that syntax into valid JS you need to use some tools. One possible way to do so is using Webpack and Babel to load, transform and bundle your scripts.

Using the babel-loader with a preset for react you can import and work with JSX scripts.

You can check the webpack-4 config in this Webpack Demo project using React.

---

Configure the babel loader in webpack.config.js and .babelrc files:

module.exports = {
    module: {
        rules: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
        ]
    }
    // ...
};

.babelrc

{
    "presets": ["babel-preset-env", "babel-preset-react"]
}

DevDependencies : babel-core , babel-loader , babel-preset-env , babel-preset-react , webpack , webpack-cli