You may need an appropriate loader to handle this file type with Webpack and Babel

Question

I am trying to use Webpack with Babel to compile ES6 assets  but I am getting the following error message   You may need an appropriate loader to handle this file type    import React from  react          import   render   from  react-dom    Here is what my Webpack config looks like   var path   require  path    var webpack   require  webpack     module exports       entry     index     output        path  path join   dirname   dist        filename   bundle js       publicPath    dist          module        loaders                    test     jsx             loader   babel-loader           exclude   node modules                        Here is the middleware step that makes use of Webpack   var webpack   require  webpack    var webpackDevMiddleware   require  webpack-dev-middleware    var config   require    webpack config     var express   require  express    var app   express    var port   3000   var compiler   webpack config   app use webpackDevMiddleware compiler      noInfo  true    publicPath  config output publicPath       app get      function req  res      res sendFile   dirname     index html         app listen port  function err      console log  Server started on http   localhost  s   port         All my index js file is doing is importing react  but it seems like the  babel-loader  is not working   I am using  babel-loader  6 0 0

User · Answer

Due to updates and changes overtime  version compatibility start causing issues with configuration    Your webpack config js should be like this you can also configure how ever you dim fit   var path   require  path    var webpack   require  webpack     module exports       entry     src js app js     devtool   source-map       mode   development     module        rules           test     js          exclude   node modules         use    babel-loader                 test     css          use    style-loader    css-loader                 output        path  path resolve   dirname     src vendor        filename   bundle min js           Another Thing to notice it s the change of args  you should read babel documentation https   babeljs io docs en presets   babelrc         presets      babel preset-env     babel preset-react        NB  you have to make sure you have the above  babel preset-env  amp   babel preset-react installed in your package json dependencies

User · Answer

Make sure you have the es2015 babel preset installed   An example package json devDependencies is    devDependencies        babel-core     6 0 20      babel-loader     6 0 1      babel-preset-es2015     6 0 15      babel-preset-react     6 0 15      babel-preset-stage-0     6 0 15      webpack     1 9 6      webpack-dev-middleware     1 2 0      webpack-hot-middleware     2 0 0       Now configure babel-loader in your webpack config     test     js    loader   babel-loader   exclude   node modules      add a  babelrc file to the root of your project where the node modules are        presets     es2015    stage-0    react       More info     babeljs io - using babel with webpack babeljs io - docs on  babelrc react-webpack-cookbook - configure react with webpack a react-webpack-example repo

User · Answer

In my case  I had such error since import path was wrong  Wrong  import Select from  quot react-select src Select quot      it was auto-generated by IDE    Correct  import Select from  quot react-select quot

User · Answer

If you are using Webpack   3 then you only need to install babel-preset-env  since this preset accounts for es2015  es2016 and es2017   var path   require  path    let webpack   require  webpack     module exports         entry            app     app App js           vendor    react   react-dom              output            filename   bundle js           path  path resolve   dirname      public              module            rules                 test     jsx                 exclude   node modules               use                    loader   babel-loader cacheDirectory true                                       This picks up its configuration from my  babelrc file          presets                            env                                  targets                          browsers    last 2 versions                         node   current                                              react

User · Answer

You need to install the es2015 preset   npm install babel-preset-es2015   and then configure babel-loader         test     jsx         loader   babel-loader       exclude   node modules       query            presets    es2015

User · Answer

This one throw me for a spin  Angular 7  Webpack I found this article so I want to give credit to the Article https   www edc4it com blog web helloworld-angular2 html  What the solution is    on your component file   use template as webpack will treat it as text  template  require    process component html    for karma to interpret it npm install add html-loader --save-dev                               test    html                    use   html-loader                  Hope this helps somebody

User · Answer

BABEL TEAM UPDATE   We re super  excited that you re trying to use ES2015 syntax  but instead of continuing yearly presets  the team recommends using babel-preset-env  By default  it has the same behavior as previous presets to compile ES2015  to ES5  If you are using Babel version 7 you will need to run npm install  babel preset-env and have  presets      babel preset-env   in your  babelrc configuration   This will compile all latest features to es5 transpiled code   Prerequisites    Webpack 4  Babel 7    Step-1   npm install --save-dev  babel preset-env  Step-2  In order to compile JSX code to es5 babel provides  babel preset-react package to convert reactjsx extension file to native browser understandable code   Step-3  npm install --save-dev  babel preset-react  Step-4  create  babelrc file inside root path path of your project where webpack config js exists        presets      babel preset-env     babel preset-react       Step-5  webpack config js  const path   require  path    const HtmlWebpackPlugin   require  html-webpack-plugin     module exports         mode   development       entry  path resolve   dirname   src index js        output            path  path resolve   dirname   output            filename   bundle js             resolve            extensions     js     jsx              module            rules                     test      js jsx                     exclude   node modules                   use                        loader   babel-loader                                                                 test     css  i                  use    style-loader    css-loader                                       plugins            new HtmlWebpackPlugin               template     public index html               filename     index html

User · Answer

When using Typescript   In my case I used the newer syntax of webpack v3 11 from their documentation page I just copied the css and style loaders configuration form their website  The commented out code  newer API  causes this error  see below     module            loaders                     test     ts                    loaders    ts-loader                                                test     css                    loaders                         style-loader                        css-loader                                                                    rules                    test     css                   use                        style-loader                       css-loader                                         The right way is to put this                 test     css            loaders                 style-loader                css-loader                    in the array of the loaders property

[javascript] "You may need an appropriate loader to handle this file type" with Webpack and Babel

Examples related to javascript

Examples related to webpack

Examples related to babeljs

Examples related to es6-module-loader