how to fix You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file with webpack 4

Question

I am trying to fix a plugin but cannot seem to webpack out of the box. it was originally using webpack v2 and babel 6 so i decided to upat it to wepack 4 and babel 7. even so it does not seem to webpack. the error i get is

ERROR in ./src/index.js 42:8
Module parse failed: Unexpected token (42:8)
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
|     if (this.props.image && this.props.imageClass){
|       return(
>         <img
|           src={this.props.image}
|           className={this.props.imageClass}
 @ multi @babel/polyfill ./src/index.js main[1]

my webpack file is

    var path = require('path');
module.exports = {
    mode: 'development',
  entry: ['@babel/polyfill','./src/index.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },

  module: {

    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: ['babel-loader'] 
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use:['style-loader','css-loader']
      },
    ]
  },
  externals: {
    'react': 'commonjs react' 
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }
};

repo can be found here https://github.com/shorif2000/react-js-banner

Solution

The issue is webpack doesn't understand React's JSX syntax so it's unable to handle this file type appropriately. In order to fix this you need to set up a webpack loader to transform JSX into native JavaScript. To accomplish this you will need to leverage babel's babel-loader and install the appropriate babel preset, namely the "@babel/preset-react" preset.

A preset is a set of plugins used to support particular language features. You use presets to take advantage of the latest JavaScript features that haven't yet been implemented in browsers.

Presets will transform your source code and syntax to be compatible with native JavaScript which browsers understand. For example, the @babel/preset-react will allow you to write JSX (JavaScript as XML) style code, which is commonly used to define React components, although JSX isn't naturally understood by the browser.

Maybe you could try the following and see if these steps resolve your issue:

1. Install babel's react preset:

   npm install --save-dev @babel/preset-react

2. In your .babelrc (or package.json) file, depending on where you have your Babel configuration for presets and plugins, add the new preset to handle react's JSX specific syntax.

Note: if you don't have a .babelrc file add one to your project's root directory and give it the following contents:

.babelrc:

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

3. Update the rules section, in your webpack.config.js file, to use the appropriate loader:

   { test: /\.(js|jsx)$/, include: path.resolve(__dirname, 'src'), exclude: /(node_modules|bower_components|build)/, use: ['babel-loader'] }

Note: I would also add a resolve section in your webpack.config.js to configure how modules are resolved in your project. Something along the lines of:

 resolve: {
    extensions: ['*', '.js', '.jsx']
  },

For completeness I created a simple web application using React and served from webpack-dev-server. Pasted below is my entire webpack.config.js contents:

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  },
  mode: 'development'
};

Hopefully that helps!

Comments

[Nathan]

Did my answer make sense / were you able to get it working?

[shorif2000]

I tried added the chnages but it did not help. github.com/shorif2000/…

[Nathan]

I posted my exact webpack.config.js file which worked fine for me for rendering react components. If it helps I can paste my entire codebase in a public repo so you can compare your code to mine and see where your error lies? The issues lies in one of your configuration properties within your webpack.config.js file.