React-如何解決模塊解析失敗錯誤：您可能需要適當的加載器來處理此文件類型

Question

我正在嘗試導入“ Cheerio.js”以進行網絡抓取。 當我嘗試運行它時。 我收到“模塊解析失敗錯誤：您可能需要適當的加載程序來處理此文件類型。” 似乎我必須安裝額外的加載程序或更改我的webpack.config.js中的配置，但是我很難解決這個問題。 誰能幫我解決這個問題？

這是我得到的錯誤：

 ERROR in ./~/har-schema/lib/log.json Module parse failed: /Users/taelee/Desktop/reactReduxBoilerPlate/ReduxSimpleStarter/node_modules/har-schema/lib/log.json Unexpected token (2:7) You may need an appropriate loader to handle this file type. 

這是我的webpack.config.js文件：

 module.exports = { entry: [ './src/index.js' ], output: { path: __dirname, publicPath: '/', filename: 'bundle.js' }, module: { loaders: [{ exclude: /node_modules/, loader: 'babel', query: { presets: ['react', 'es2015', 'stage-1', 'stage-0'] } }] }, resolve: { extensions: ['', '.js', '.jsx'] }, devServer: { historyApiFallback: true, contentBase: './' } }; 

這是我的package.json文件：

 { "name": "redux-simple-starter", "version": "1.0.0", "description": "Simple starter package for Redux with React and Babel support", "main": "index.js", "repository": "git@github.com:StephenGrider/ReduxSimpleStarter.git", "scripts": { "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js", "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test", "test:watch": "npm run test -- --watch" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.2.1", "babel-loader": "^6.2.0", "babel-preset-es2015": "^6.1.18", "babel-preset-react": "^6.1.18", "chai": "^3.5.0", "chai-jquery": "^2.0.0", "jquery": "^2.2.1", "jsdom": "^8.1.0", "mocha": "^2.4.5", "react-addons-test-utils": "^0.14.7", "webpack": "^1.12.9", "webpack-dev-server": "^1.14.0" }, "dependencies": { "axios": "^0.17.1", "babel-preset-stage-1": "^6.1.18", "cheerio": "^1.0.0-rc.2", "jsonp": "^0.2.1", "lodash": "^3.10.1", "moment": "^2.19.2", "prop-types": "^15.6.0", "react": "^0.14.3", "react-ace": "^5.10.0", "react-ace-editor": "0.0.2", "react-dom": "^0.14.3", "react-redux": "4.3.0", "react-router": "^2.0.1", "react-router-redux": "^4.0.8", "redux": "^3.0.4", "redux-promise": "^0.5.3", "request": "^2.85.0", "request-promise": "^4.2.2" } } 

誰能幫我解決這個問題？

謝謝。

Answer 1

試試看：1） configuration.resolve.extensions[0]不應為空2）使用loader: 'babel-loader' ，確保已安裝babel-loader

module.exports = {
context: `${__dirname}/src`,
entry: [
    './index.js'
],
output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
},
module: {
    loaders: [{
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            presets: ['react', 'es2015']
        }
    }]
},
resolve: {
    extensions: ['.js', '.jsx']
},
devServer: {
    historyApiFallback: true,
    contentBase: './'
}

};