CODEWITHSUNDEEP
javascriptreactjs
Sharon Chai
Sharon Chai

Reputation: 517

js error: You may need an appropriate loader

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.

Upvotes: 1

Views: 100

Answers (1)

Carloluis
Carloluis

Reputation: 4320

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

Upvotes: 2

Related Questions