例外TypeError：element.loader.splitは、以下に定義するような構成と機能

Question

ないwebpackを実行したときにエラーがコンソールにスローされました：

TypeError: element.loader.split is not a function

webpack.config.js

module.exports = { 
    devtool: 'eval', 
    entry: { 
    chiffr: getEntrySources([ 
     './src/index', 
    ]), 
    }, 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/', 
    }, 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     loader: ['react-hot', 'jsx'], 
     include: path.join(__dirname, 'src'), 
     exclude: /node_modules/, 
    }], 
    }, 
}; 

を

インストールしたノードモジュール：

"dependencies": { 
    "react": "15.2.0", 
    "react-dom": "15.2.0" 
}, 
"devDependencies": { 
    "babel-eslint": "6.1.0", 
    "eslint": "2.13.1", 
    "eslint-config-airbnb": "9.0.1", 
    "eslint-plugin-jsx-a11y": "1.5.3", 
    "eslint-plugin-react": "5.2.2", 
    "jsx-loader": "0.13.2", 
    "node-sass": "3.8.0", 
    "react-hot-loader": "1.3.0", 
    "webpack": "1.13.1", 
    "webpack-dev-server": "1.14.1" 
} 

何エラーの原因とその修正方法を教えてください。

Answer 1

エラーは、最初のローダーのloader属性が配列ではなく文字列を必要とするために発生します。配列にはsplitメソッドがありません。

configのmodule.loaders属性の各オブジェクトには、loaderプロパティに設定された文字列が必要です。

module.loaders
An array of automatically applied loaders.

Each item can have these properties:

test: A condition that must be met
exclude: A condition that must not be met
include: A condition that must be met
loader: A string of “!” separated loaders
loaders: An array of loaders as string

構成ローダーの配列を必要とするので、キーが代わりloadersに設定されるべきである：documentationから

module: { 
    loaders: [{ 
    test: /\.js$/, 
    // Change the key to 'loaders' for an Array of loaders 
    loaders: ['react-hot', 'jsx'], 
    include: path.join(__dirname, 'src'), 
    exclude: /node_modules/, 
    }], 
},