javascript - You may need an appropriate loader to handle this file type-error - Stack Overflow

admin管理员组

文章数量:1334157

I have the following code (es6 spread Attribute):

 return {...state, name: action.payload};

The error thrown is: You may need an appropriate loader to handle this file type.

package.json

What else do I need to install in order to make this work. All the other ES6 is working but the spread attribute isn't.

webpack.config.js

I have the following code (es6 spread Attribute):

 return {...state, name: action.payload};

The error thrown is: You may need an appropriate loader to handle this file type.

package.json

What else do I need to install in order to make this work. All the other ES6 is working but the spread attribute isn't.

webpack.config.js

• javascript
• ecmascript-6
• redux
• atom-editor

Share Improve this question Follow edited Jun 7, 2018 at 6:17 EugenSunic asked Feb 28, 2017 at 11:03 EugenSunicEugenSunic 13.7k1515 gold badges6666 silver badges9595 bronze badges 2

• Can you share your webpack configuration? There you will see the loaders that may be needed. – Deividas Commented Feb 28, 2017 at 11:04
• So package.json isn't enough... I have no loaders whatsoever in my webpack.config.js I' ll ad them now – EugenSunic Commented Feb 28, 2017 at 11:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

To use ecmascript-6 you need to (1) add .babelrc file with the following presets

{
  "presets": [ "es2015" ]
}

es2015 is the particular one you need.

And then (2) configure your webpack to include

module.exports = {
  ...,
  loaders : [
    { test: /\.js$/, exclude: /(node_modules)/, loader: 'babel-loader' }
  ]
}

You need have configured babel-loader for js files to transpile

webpack config snippet :

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: [
      'babel-loader'
    ]
  }

Inside module rules.

Also add .babelrc file in your projects home directory with below contents

{
   "presets" : [
     "latest"
   ]
}

Installing loaders via npm isn't enough. You have to configure that loaders in your webpack.

Add following in your webpack.config.js

loaders: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_ponents)/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }
  ]

Using loaders in webpack

Code above means that, whenever it will find any file that matches \.js$ pattern (files that ends with .js), babel-loader will be used. (You have already installed babel-loader into your dependencies.

You can also use loader: 'babel' instead of `loader: 'babel-loader'. It's the same.

本文标签： javascriptYou may need an appropriate loader to handle this file typeerrorStack Overflow