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

I've been banging my head against the wall all day trying to figure this one out.

ERROR in ./app/assets/frontend/main.jsx
Module parse failed: /Users/david/work/sd/sd-web/app/assets/frontend/main.jsx Line 4: Unexpected token <
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|       <h1>Hello, World</h1>
|     );
|   }

Here's my relevant package.json:

"devDependencies": {
  "babel-core": "^6.2.1",
  "babel-loader": "^6.2.0",
  "babel-preset-es2015": "^6.1.18",
  "babel-preset-react": "^6.1.18",
  "webpack": "^1.12.9"
}

and web pack.config.js:

module.exports = {
  entry: './app/assets/frontend/main.jsx',
  output: {
    path: __dirname + '/app/assets/javascripts',
    filename: 'bundle.js',
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          loader: 'babel',
          exclude: /node_modules/,
          query: {
            cacheDirectory: true,
            presets: ['react', 'es2015']
          }
        }
      ]
    }
  }
}

and then running webpack from the command line.

Am I missing something obvious here?

I'm stuck on this same error and I need fresh eyes for help.... I'm confused on the "appropriate loader" This is the error

ERROR in ./src/index.js Module parse failed: Unexpected token (6:16) You may need an appropriate loader to handle this file type.

import App from './Components/App' ReactDOM.render(<App />, document.getElementById('root'))

@ multi (webpack)-dev-server/client?http://localhost:8080 ./src

This is my src/index.js

import React from 'react'
import ReactDOM from 'react-dom'

import App from './Components/App'
ReactDOM.render(<App />, document.getElementById('root'))

webpack.dev.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build'),
    publicPath: '/',
  },
  module: {
    rules: [
      { test: /\.(js)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        include: [path.resolve(__dirname, "src")]
      }
    ],
  },
  devServer: {
    historyApiFallback: true,
    inline: true,
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),new webpack.HotModuleReplacementPlugin()
    ],
}

.babelrc

{
  "presets": ["env", "react"],
  "env": {
    "development": {
      "plugins": [["react-transform",{
      "transforms": [{
        "transform": "react-transform-hmr",
        "imports": ["react"],
        "locals": ["module"]
      }]
    }]]
    }
  }
}

and my package.json

{
  "name": "webpack-starter-kit",
  "version": "1.0.0",
  "description": "starter files for basic development and production using React, Babel, Webpack",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --progress --mode=development",
    "build": "webpack --mode=production"
  },
  "author": "Kevin Turney",
  "license": "ISC",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.0.7",
    "postcss-loader": "^2.1.2",
    "react-transform-hmr": "^1.0.4",
    "style-loader": "^0.20.3",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.1"
  }
}

@MadRiver44 i met the same problem,have you solved it,please?

webpack.config

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

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080',
    path.resolve("src")
  ],
  mode: 'development',
  output: {
    path: path.join(__dirname, '../vendor'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: __dirname + '../src'
      },
      {
        test: /\.(scss|css)$/,
        loaders: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ],
        include: [path.resolve('src')]
      }
    ]
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    historyApiFallback: true,
    inline: true,
    compress: true,
    port: 8080,
    host: '127.0.0.1',
    progress: true
  }

}

.babelrc

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ],
  "plugins": [
    "transform-react-jsx"
  ]
}

packge.json

{
  "name": "react-m-testself",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "react": "^16.3.2",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "html-loader": "^0.5.5",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  },
  "scripts": {
    "dev": "npm run build && webpack-dev-server  --mode development --open ",
    "build": "webpack --config ./build/webpack.base.conf.js --mode=development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

index.js

import React from 'react';
import ReactDom from 'react-dom';
import Hello from './component';

ReactDom.render(<Hello />, document.getElementById('app'));

@ciloi I temporarily solved this by rolling back to an earlier version of webpack dev server. I put my project down for a few days and I am now getting back to it. As of now I reworking my webpack, react setup to the latest version, webpack 4.8 and dev-server 3.11. The problem seems to be resolved but now I have a .scss loader issue. Look at my repo, webpack starter kit to compare.

@ MadRiver44thanks anyway

webpack.config.js presets: ["env", "react"] or presets: ["es2015", "react"]

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },

  module: {

    rules: [
      {
        test: /\.jsx?$/,
        loader:'babel-loader',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: ["env", "react"]
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

I have the following error. I am struggling to solve this for past two days. Can anyone solve my issue. err

I am getting this error while configuring webpack in reactJS.

This is my webpack.config.js file

Thanks to my mate @seanchambo 🙇 we finally fixed a similar issue that we were facing with the same error message.

It turns out that it is related to the project path.

The issue occurs when we put the project in a path like this:

/codebuild/output/src705850320/src/github.com/ailytic/awesome-app-config/src

And the issue disappears when the project path is a simpler one like this:

/host

For those that still have this issue and want a temporary workaround, remove css imports from from any js file and move it to a sass file

In my case, this happens when using Lerna & Yarn workspaces with multiple CRA Apps.

Firstly make sure it picks the right config file: "build": "./node_modules/.bin/webpack --mode production --config ./webpack/webpack.config.js".

Then make sure you use the right presets in .babelrc { "presets": ["@babel/preset-env", "@babel/preset-react"] }

Then make sure you have the right loader: { test: /\.(js|jsx)?$/, exclude: /node_modules/, use: ["babel-loader"], }

This is for webpack version:

"webpack": "^4.29.6", "webpack-cli": "^3.3.0", "webpack-dev-server": "^3.2.1"

I got this error when I listed my presets in the babelrc file and the webpack config. Once I commented them out of the webpack config, the error was gone.

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './docs',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.(le|c)ss$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|png|jpg|gif|svg|mp4)/,
        loader: 'file-loader',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './docs/index.html',
    }),
  ],
  devServer: { historyApiFallback: true },
};

Can somebody spot anything I am doing wrong here 🙈 I have tried changing loader to loaders but still the same error

My mistake was I didn't add the babel plugin that transforms jsx.

So for React, you would install the @babel/preset-react, then in your .babelrc:

{
  "presets": [ "@babel/preset-react" ]
}

For Preact, install @babel/plugin-transform-react-jsx, then in your .babelrc:

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "h"
      }
    ]
  ]
}

Hope that helps someone!

I am also facing the same problem, But I am not getting solution for this.I guess here I have seen people helping and guiding. Please help.

I am trying to use this react diff library (https://github.com/praneshr/react-diff-viewer) in my react project -. npm i react-diff-viewer

Got added,

while building and using I am getting this error-

ERROR in ./compliance/app/compliance/~/react-diff-viewer/lib/styles.js Module parse failed: /Users/nswarnka/Documents/Neeraj/Projects/mashup-project/mashup/ui-plugins/compliance/app/compliance/node_modules/react-diff-viewer/lib/styles.js Unexpected token (5:42) You may need an appropriate loader to handle this file type. | const emotion_1 = require("emotion"); | exports.default = (styleOverride) => { | const { variables: overrideVariables, ...styles } = styleOverride; | const variables = { | ...{

.babelrc file -> In my babel i have "babel-preset-react", "babel-preset-stage-0" and "es2015" please check.


{
  "presets": [
    "babel-preset-react",
    ["es2015", { "modules": false }],
    "babel-preset-stage-0"
  ],
  "env": {
    "test": {
      "plugins": [
        "transform-es2015-modules-commonjs",
        "transform-decorators-legacy",
        "babel-plugin-react-html-attrs",
        "babel-plugin-transform-decorators-legacy",
        "babel-plugin-transform-class-properties",
        "@babel/plugin-transform-spread",
        "@babel/plugin-proposal-class-properties",
        "@babel/preset-env",
        "@babel/preset-react"
      ]
    }
  }
}

package.json file ->


{
  "name": "compliance-ui-plugin",
  "version": "1.0.0",
  "scripts": {
    "build": "dpm build"
  },
  "author": "nsw",
  "license": "ISC",
  "devDependencies": {},
  "description": "Compliance UI Plugin",
  "dependencies": {
    "emotion": "^10.0.14",
    "react-diff-viewer": "^2.0.1"
  }
}

I got to know that I have to use Webpack loader to make it work. Could you please help me with this ? Thanks.

Asked the query in stack overflow as well -> https://stackoverflow.com/questions/57653076/you-may-need-an-appropriate-loader-to-handle-this-file-type-while-using-external

Hi there,

I'm also facing similar problems to OP but the solutions listed here didn't help me either.

The errors look like the below:

Module not found: Error: Can't resolve 'rxjs-compat/add/operator/catch' in '/Users/kylebachan/Documents/Account/node_modules/rxjs/add/operator'
 @ ../node_modules/rxjs/add/operator/catch.js 3:0-41
 @ ./redux/epics/index.js
 @ ./redux/store.js
 @ ./main-embeddable.js

webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const fromWebpackModule = (moduleName, filename, outputFilename = filename) => { return { from: path.join(__dirname, 'node_modules', moduleName, filename),
    to: path.join(__dirname, 'public/accountassets/js', outputFilename) } }
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ClosureCompilerPlugin = require('webpack-closure-compiler');
const CompressionPlugin = require('compression-webpack-plugin');
const packageJson = require('./package.json');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');

module.exports = {
    context: path.join(__dirname, 'js'),
    entry: {
        account: path.join(__dirname, './js/main.js'),
        'account.light': path.join(__dirname, './js/main-embeddable.js'),
        styles: path.join(__dirname, './js/styles/application.scss'),
        'bookmark.styles': path.join(__dirname, './js/styles/bookmark.scss'),
        bookmark: path.join(__dirname, './js/bookmark.js')
    },
    output: {
        path: path.join(__dirname, 'public', 'accountassets', 'js'),
        filename: '[name].js'
    },
    resolve: {
        modules: [path.resolve(__dirname, 'js'), 'node_modules', 'bower_components'],
        descriptionFiles: ['package.json', 'bower.json'],
        extensions: ['.js', '.jsx', '.json', '.scss'],
    },
    module: {
        rules: [
            {
                resource: {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    include: [
                        path.resolve(__dirname, 'js')
                    ]
                },
                use: [{
                    loader: 'babel-loader',
                    options: packageJson.babel
                }]
            },
            {
                test: /\.css$/,
                oneOf: [
                    {
                        exclude: /node_modules\/react-dates/,
                        use: [{
                            loader: 'style-loader',
                            options: {
                                sourceMap: true,
                            }
                        }, {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true,
                                modules: true,
                                importLoaders: 1,
                                modules: {
                                    localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
                                }
                            }
                        }]
                    },
                    {
                        use: [{
                            loader: 'style-loader',
                            options: {
                                sourceMap: true,
                            }
                        }, {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true,
                            }
                        }]
                    }
                ]
            },
            {
                test: /\.scss$/,
                oneOf: [
                    {
                        exclude: [/node_modules/, /js\/styles/, /bookmark\.scss/],
                        use: ExtractTextPlugin.extract({
                            fallback: 'style-loader',
                            use: [{
                                loader: 'css-loader',
                                options: {
                                    sourceMap: true,
                                    modules: true,
                                    importLoaders: 1,
                                    modules: {
                                        localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
                                    }
                                }
                            }, {
                                loader: 'sass-loader',
                                options: {
                                    outputStyle: 'compressed',
                                    sourceMap: true,
                                }
                            }]
                        })
                    }, {
                        exclude: [/node_modules\/react-dates/, /bookmark\.scss/],
                        use: ExtractTextPlugin.extract({
                            fallback: 'style-loader',
                            use: [{
                                loader: 'css-loader',
                                options: {
                                    sourceMap: true,
                                    modules: true,
                                    importLoaders: 1,
                                    modules: {
                                        localIdentName: '[local]'
                                    }
                                }
                            }, {
                                loader: 'namespace-css-module-loader',
                                query: {
                                    id: 'ac',
                                }
                            }, {
                                loader: 'sass-loader',
                                options: {
                                    outputStyle: 'compressed',
                                    sourceMap: true,
                                    includePaths: [path.resolve(__dirname, './node_modules/compass-mixins/lib')],
                                }
                            }]
                        })
                    }, {
                        exclude: [/node_modules\/react-dates/],
                        use: ExtractTextPlugin.extract({
                            fallback: 'style-loader',
                            use: [{
                                loader: 'css-loader',
                                options: {
                                    sourceMap: true,
                                    modules: true,
                                    importLoaders: 1,
                                    modules: {
                                        localIdentName: '[local]'
                                    }
                                }
                            }, {
                                loader: 'sass-loader',
                                options: {
                                    outputStyle: 'compressed',
                                    sourceMap: true,
                                    includePaths: [path.resolve(__dirname, './node_modules/compass-mixins/lib')],
                                }
                            }]
                        })
                    }
                ],
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file',
                    options: {
                        name: '[hash].[ext]'
                    }
                }]
            },
            {
                test: /\.(woff|woff2)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[hash].[ext]',
                        prefix: 'font/',
                        limit: 5000
                    }
                }]
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[hash].[ext]',
                        prefix: 'font/',
                        mimetype: 'application/octet-stream',
                        limit: 10000
                    }
                }]
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[hash].[ext]',
                        prefix: 'images/',
                        mimetype: 'image/svg+xml',
                        limit: 10000
                    }
                }]
            },
            {
                test: /\.gif/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[hash].[ext]',
                        prefix: 'images/',
                        mimetype: 'image/gif',
                        limit: 10000
                    }
                }]
            },
            {
                test: /\.jpg/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[hash].[ext]',
                        prefix: 'images/',
                        mimetype: 'image/jpg',
                        limit: 10000
                    }
                }]
            },
            {
                test: /\.png/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[hash].[ext]',
                        prefix: 'images/',
                        mimetype: 'image/png',
                        limit: 10000
                    }
                }]
            }
        ]
    },
    devServer: {
        contentBase: './public/accountassets/js',
        noInfo: true, //  --no-info option
        hot: true,
        inline: true
    },
    devtool: 'source-map',
    plugins: [
        // Hack: https://github.com/webpack/webpack/issues/87 and https://github.com/moment/moment/issues/2517
        new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new ExtractTextPlugin({
            filename: '[name].css',
            allChunks: true,
        }),
        new CopyWebpackPlugin([
            fromWebpackModule('es5-shim', 'es5-shim.min.js'),
            fromWebpackModule('es5-shim', 'es5-shim.map'),
            fromWebpackModule('es5-shim', 'es5-sham.min.js'),
            fromWebpackModule('es5-shim', 'es5-sham.map'),
        ]),
        new ClosureCompilerPlugin({
            compiler: {
                language_in: 'ECMASCRIPT6',
                language_out: 'ECMASCRIPT3',
                compilation_level: 'SIMPLE',
                rewrite_polyfills: false,
                create_source_map: true
            },
            concurrency: 3,
        }),
        new CompressionPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.(js|html)$/,
            threshold: 10240,
            minRatio: 0.8
        }),
    ],
};

package.json

  "private": true,
  "name": "TPL-Account",
  "version": "0.0.1",
  "description": "",
  "main": "js/script.js",
  "dependencies": {
    "big.js": "5.2.2",
    "clipboard": "^2.0.4",
    "compass-mixins": "^0.12.10",
    "cookies-js": "1.2.3",
    "cuid": "2.1.6",
    "fast-memoize": "2.5.1",
    "focus-trap-react": "^6.0.0",
    "friendly-url": "^1.0.3",
    "history": "4.9.0",
    "immutable": "^4.0.0-rc.2",
    "lodash": "^4.17.15",
    "moment": "2.24.0",
    "moment-timezone": "0.5.26",
    "namespace-css-module-loader": "^0.5.0",
    "normalizr": "3.4.1",
    "prop-types": "^15.7.2",
    "react": "16.9.0",
    "react-addons-pure-render-mixin": "15.6.2",
    "react-addons-shallow-compare": "15.6.2",
    "react-barcode": "^1.3.4",
    "react-bootstrap": "^0.32.4",
    "react-dates": "^20.2.5",
    "react-dom": "16.9.0",
    "react-ga": "2.6.0",
    "react-markdown": "^4.1.0",
    "react-redux": "7.1.0",
    "react-rte": "0.16.1",
    "react-sortable-hoc": "^1.9.1",
    "react-sticky": "6.0.3",
    "react-transition-group": "4.x",
    "react-visibility-sensor": "5.1.1",
    "redux": "4.0.4",
    "redux-immutablejs": "0.0.8",
    "redux-observable": "1.1.0",
    "reselect": "4.0.0",
    "rollbar": "^2.11.0",
    "rxjs": "6.5.2",
    "transition-to-from-auto": "^0.5.2",
    "wicg-focus-ring": "^3.0.2",
    "wicg-inert": "github:LouisStAmour/inert#2c22c3db1223f92ded6c19a513eaee7c9d08e9db"
  },
  "resolution": {
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "create-react-class": "15.6.1"
  },
  "scripts": {
    "test": "NODE_ENV=test jest || true",
    "testc": "NODE_ENV=test jest --coverage || true",
    "testa": "node js/__ava__/run-me.js || true",
    "testr": "node_modules/.bin/ava js/__ava__/tests/redux/ -v || true",
    "testrc": "node_modules/.bin/nyc node_modules/.bin/ava js/__ava__/tests/redux/ -v || true",
    "build": "NODE_ENV=production node_modules/.bin/webpack -p --config webpack.config.js --profile",
    "watch": "NODE_ENV=production node_modules/.bin/webpack -p --config webpack.config.js --progress --profile --color --watch",
    "dev-build": "node_modules/.bin/webpack --config webpack.config.js --progress --profile --color",
    "dev": "node_modules/.bin/webpack-dev-server --progress --profile --color --hot",
    "lint": "NODE_ENV=development node_modules/.bin/eslint js --ext 'js,jsx' --ignore-pattern '*.min.js' || true",
    "csslint": "node_modules/.bin/stylelint 'public/accountassets/stylesheets/sass/**/*.scss' 'public/accountassets/stylesheets/sass/*.scss' 'js/**/*.scss' 'js/*.scss' || true",
    "report": "node_modules/.bin/nyc report --reporter=html"
  },
  "license": "Copyright",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "acorn": "7.0.0",
    "ava": "github:avajs/ava",
    "babel-eslint": "10.0.2",
    "babel-loader": "8.0.6",
    "babel-plugin-add-module-exports": "^1.0.2",
    "babel-polyfill": "6.26.0",
    "babel-register": "6.26.0",
    "bootstrap-datepicker": "1.9.0",
    "classnames": "2.2.6",
    "compression-webpack-plugin": "3.0.0",
    "copy-webpack-plugin": "5.0.4",
    "css-loader": "3.2.0",
    "deep-equal": "1.0.1",
    "deep-freeze-node": "1.1.3",
    "director": "1.2.8",
    "enzyme": "3.10.0",
    "es5-shim": "4.5.13",
    "eslint": "6.1.0",
    "eslint-plugin-babel": "5.3.0",
    "eslint-plugin-react": "7.14.3",
    "eventie": "1.0.6",
    "expose-loader": "0.7.5",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^4.2.0",
    "flux-standard-action": "2.1.1",
    "get-port": "5.0.0",
    "glob": "7.1.4",
    "imagesloaded": "tpl-eservices/imagesloaded",
    "jasmine-enzyme": "7.1.0",
    "jest-cli": "24.8.0",
    "js-yaml": "^3.13.1",
    "jscpd": "2.0.15",
    "json-loader": "0.5.7",
    "jsx-ast-utils": "2.2.1",
    "keymirror": "0.1.1",
    "node-sass": "^4.12.0",
    "nyc": "14.1.1",
    "promise": "8.0.3",
    "redux-mock-store": "1.5.3",
    "sass-loader": "^7.2.0",
    "selenium-webdriver": "3.6.0",
    "style-loader": "1.0.0",
    "stylelint": "^10.1.0",
    "stylelint-config-sass-guidelines": "^6.0.0",
    "stylelint-config-standard": "18.3.0",
    "stylelint-scss": "3.9.3",
    "testdouble": "3.12.3",
    "union": "0.5.0",
    "url-loader": "^2.1.0",
    "webpack": "4.39.2",
    "webpack-cli": "^3.3.6",
    "webpack-closure-compiler": "2.1.6",
    "wolfy87-eventemitter": "5.2.6"
  },
  "babel": {
    "plugins": [
      "@babel/transform-runtime",
      "@babel/plugin-proposal-class-properties",
      "add-module-exports",
      "@babel/plugin-proposal-object-rest-spread",
      "@babel/plugin-syntax-jsx",
      "@babel/plugin-transform-react-jsx"
    ],
    "presets": [
      "@babel/preset-env",
      "@babel/react",
      "@babel/preset-flow"
    ]
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "node"
    ],
    "coveragePathIgnorePatterns": [
      "/vendor/",
      "/node_modules/"
    ],
    "automock": false,
    "mocksPattern": "(?:[\\/]js[\\/]|^)__mocks__[\\/]",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/core-js/",
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/",
      "<rootDir>/node_modules/react-test-renderer/",
      "<rootDir>/node_modules/react-addons-test-utils/",
      "<rootDir>/node_modules/react-bootstrap/",
      "<rootDir>/node_modules/backbone/",
      "<rootDir>/node_modules/bootstrap-datepicker/",
      "<rootDir>/node_modules/enzyme/",
      "<rootDir>/node_modules/jasmine-enzyme/"
    ]
  },
  "ava": {
    "files": [
      "test.js"
    ],
    "source": [
      "js/**/*.{js,jsx}"
    ],
    "require": [
      "babel-register"
    ],
    "babel": "inherit",
    "concurrency": 3,
    "failFast": true,
    "tap": false
  },
  "nyc": {
    "extension": [
      ".jsx"
    ],
    "exclude": [
      "js/__ava__/**",
      "js/__data__/**",
      "js/__mocks__/**",
      "**/node_modules/**"
    ]
  }
}

Solutions listed here didn't help. I did the following and it worked. .babelrc --> { "presets": [ "react", "env", "stage-0" ] } package.json -->

{
    "name": "react-made-by",
    "version": "0.2.0",
    "description": "React component to create a 'made by <name>' tag",
    "author": {
        "name": "Yigit Alparslan",
        "email": "alparslanyigitcan@gmail.com"
    },
    "license": "MIT",
    "engineStrict": true,
    "engines": {
        "node": ">=12.9.1"
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/ya332/react-made-by.git"
    },
    "bugs": {
        "url": "https://github.com/ya332/react-made-by/issues"
    },
    "keywords": [
        "React",
        "Developer",
        "Author",
        "Tag",
        "Created",
        "By",
        "Made"
    ],
    "homepage": "https://github.com/ya332/react-made-by#readme",
    "main": "build/index.js",
    "unpkg": "build/index.js",
    "publishConfig": {
        "access": "public"
    },
    "peerDependencies": {
        "react": "^16.8.0",
        "react-dom": "^16.8.0",
        "webpack": "^2.6.1"
    },
    "devDependencies": {
        "babel-cli": "^6.24.1",
        "babel-core": "^6.24.1",
        "babel-loader": "^7.0.0",
        "babel-plugin-transform-object-rest-spread": "^6.23.0",
        "babel-plugin-transform-react-jsx": "^6.24.1",
        "babel-preset-env": "^1.6.1",
        "babel-preset-react": "^6.16.0",
        "babel-preset-stage-0": "^6.24.1",
        "css-loader": "^3.4.1",
        "extract-text-webpack-plugin": "^3.0.2",
        "file-loader": "^5.0.2",
        "node-sass": "^4.13.0",
        "path": "^0.12.7",
        "prop-types": "^15.6.0",
        "react": "^16.8.0",
        "react-dom": "^16.8.0",
        "webpack": "^4.5.0",
        "webpack-cli": "^3.3.10"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack --watch",
        "build": "webpack --config webpack.config.js --mode production"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

Doing npm run build produces the following: -->

$ npm run build

> react-made-by@0.2.0 build C:\Users\I508553\Desktop\Misc\Dev\react-made-by
> webpack --config webpack.config.js --mode production

Hash: bbb4ec8ddc3f354618ed
Version: webpack 4.41.5
Time: 1402ms
Built at: 01/04/2020 10:08:50 PM
   Asset      Size  Chunks             Chunk Names
index.js  2.77 KiB       0  [emitted]  main
Entrypoint main = index.js
[0] ./src/index.js 3.49 KiB {0} [built]
[1] external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","umd":"react"} 42 bytes {0} [built]

The files are here. P.S: I am excluding the react and react-dom from my bundle because I don't want to create version inconsistency when users do 'npm install --save ' on my package. Hope this helps.

In case this might help, i'll admit him a noob just getting into React. Anyway, checked and rechecked everything, couldn't find one problem, the only strange thing i did was change my to , mainly as i'm working through each rev of the code the instructor wipes, wanted what i worked on for reference later. Was working fine for the last few hours then bingo "Loader to handle not found..." For me the fix was easy, i closed everything and simply did:

npm run build

So question what if you only do "npm start", had tried that a number of time then thought lets build it... No more errors :)

That was all that was needed and got me past the "No appropriate loader"...

Just in case my versions: npm --version 6.14.4 node --version v12.16.3 create-react-app --version 3.4.1

I am trying to add datepicker in my project but i am geeting this error "You may need an appropriate loader to handle this file type," and i already added loader in my webpack.config.client.prod file ... here is my code of this webpack.config.client.prod file var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractCssChunks = require("extract-css-chunks-webpack-plugin"); var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); var TerserPlugin = require('terser-webpack-plugin'); var CircularDependencyPlugin = require('circular-dependency-plugin');

var config = require('./../config');

var BASE_PATH = process.env.BASE_PATH || '/';

module.exports = { devtool: 'inline-source-map', mode: 'production', node: { fs: 'empty' }, externals: [ { './cptable': 'var cptable' }, { './jszip': 'jszip' } ], entry: { app: ['react-hot-loader/patch', path.join(config.srcDir, 'index.js')] }, output: { filename: '[name].bundle.js', chunkFilename: '[name].chunk.js', path: config.distDir, publicPath: BASE_PATH }, resolve: { modules: [ 'node_modules', config.srcDir ] }, plugins: [ new CircularDependencyPlugin({ exclude: /a.js|node_modules/, failOnError: true, allowAsyncCycles: false, cwd: process.cwd(), }), new HtmlWebpackPlugin({ template: config.srcHtmlLayout, inject: false }), new webpack.HashedModuleIdsPlugin(), new ExtractCssChunks(), new OptimizeCssAssetsPlugin(), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production'), 'process.env.BASE_PATH': JSON.stringify(BASE_PATH), }) ], optimization: { minimizer: [new TerserPlugin()] }, module: { rules: [ { test: /.js$/, include: config.srcDir, exclude: /node_modules/, use: 'babel-loader',

        },
        // Modular Styles
        {
            test: /\.css$/,
            use: [
                ExtractCssChunks.loader,
                { 
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        importLoaders: 1,
                    }
                },
                { loader: 'postcss-loader' }
            ],
            exclude: [path.resolve(config.srcDir, 'styles')],
            include: [config.srcDir]
        },
        {
            test: /\.scss$/,
            use: [
                ExtractCssChunks.loader,
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        importLoaders: 1,
                    }
                },
                { loader: 'postcss-loader' },
                {
                    loader: 'sass-loader',
                    options: {
                        includePaths: config.scssIncludes
                    }
                }
            ],
            exclude: [path.resolve(config.srcDir, 'styles')],
            include: [config.srcDir]
        },
        // Global Styles
        {
            test: /\.css$/,
            use: [
                ExtractCssChunks.loader,
                { loader: 'css-loader' },
                { loader: 'postcss-loader' }
            ],
            include: [path.resolve(config.srcDir, 'styles')]
        },
        {
            test: /\.scss$/,
            use: [
                ExtractCssChunks.loader,
                { loader: 'css-loader' }, 
                { loader: 'postcss-loader' }, 
                {
                    loader: 'sass-loader',
                    options: {
                        includePaths: config.scssIncludes
                    }
                }
            ],
            include: [path.resolve(config.srcDir, 'styles')]
        },
        // Fonts
        {
            test: /\.(ttf|eot|woff|woff2)$/,
            loader: "file-loader",
            options: {
                name: "fonts/[name].[ext]",
            }
        },
        // Files
        {
            test: /\.(jpg|jpeg|png|gif|svg|ico)$/,
            loader: "file-loader",
            options: {
                name: "static/[name].[ext]",
            }
        }
    ]
},
devServer: {
    hot: false,
    contentBase: config.distDir,
    compress: true,
    historyApiFallback: {
        index: '/'
    },
    host: '0.0.0.0',
    port: 4100
}

} can anyone help me how to fix tthis problem ? i am getting this error

babel / babel-loader

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