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

user_1164789 0
Viewed 29019

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

babeljs babel-loader webpack
2 Answers

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"
  ]
}

  1. 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!

user_101724080

NEXTJS error resolved ,

add next.config.js file

const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
const withFonts = require("next-fonts");
const webpack = require("webpack");
const path = require("path");

module.exports = withFonts(
  withCSS(
    withImages(
      withSass({
        webpack(config, options) {
          config.module.rules.push({
            test: /\.(eot|ttf|woff|woff2)$/,
            use: {
              loader: "url-loader",
            },
          });
          config.resolve.modules.push(path.resolve("./"));
          return config;
        },
        sassOptions: {
          includePaths: [path.join(__dirname, 'styles')],
        },
        target:'serverless',
        
      })
    )
  )
);
user_44646710
Related