モジュールが見つかりませんエラー：私が使用している場合、モジュールを解決することはできませんが「反応」のWebPACK

Question

はこの1に助けを本当に感謝：

： 私はWebPACKのを使用して構築することができないよ、私は始まるエラーの短いリストを取得

Module not found: Error: Cannot resolve module 'react' in ../client/front_desk.jsx 

、その後のように見える長いリストで終わる：

Module not found: Error: Cannot resolve 'file' or 'directory' ../node_modules/process/browser.js 

はここに私のwebpack.config.jsです：

const webpack = require('webpack'); 
const commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); 

module.exports = { 
    entry: { 
    front_desk: './front/client/front_desk', 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx'], 
    }, 
    output: { 
    path: 'front/public/js', 
    filename: '[name].js', // Template based on keys in entry above 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.(jsx|js)?$/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015', 'react'], 
     }, 
     }, 
    ], 
    }, 
    plugins: [commonsPlugin], 
}; 

そして、私の.babelrc：package.jsonで

{ 
    "plugins": ["syntax-jsx"], 
    "presets": ["react", "es2015"], 
} 

そして、私の依存関係リスト：

"dependencies": { 
    "aguid": "*", 
    "babel-plugin-syntax-jsx": "*", 
    "babel-preset-es2015": "*", 
    "babel-preset-react": "*", 
    "babel-register": "*", 
    "bcrypt": "*", 
    "eslint": "*", 
    "eslint-config-airbnb": "^8.0.0", 
    "eslint-plugin-import": "^1.6.1", 
    "eslint-plugin-jsx-a11y": "^1.0.4", 
    "eslint-plugin-react": "^5.0.1", 
    "hapi": "*", 
    "hapi-react-views": "^7.0.0", 
    "inert": "*", 
    "isomorphic-fetch": "*", 
    "mailparser": "*", 
    "mandrill-api": "*", 
    "mongodb": "*", 
    "nodemon": "*", 
    "react": "^15.0.2", 
    "react-dom": "^15.0.2", 
    "react-redux": "*", 
    "redux": "*", 
    "redux-thunk": "*", 
    "twilio": "*", 
    "vision": "*", 
    "webpack-dev-server": "^1.14.1" 
    }, 
    "devDependencies": { 
    "babel-core": "*", 
    "babel-loader": "*", 
    "faucet": "*", 
    "jsx-loader": "^0.13.2", 
    "nodemon": "*", 
    "tape": "*", 
    "webpack": "*" 
    } 

Answer 1

はそれを考え出しました！私は最初にwebpackを--display-error-detailsで実行しました。私の意見では、これはデフォルトで常にオンにすべきです。 webpack --progress --color --watch --display-error-details。

これは私が探すためにそれを告げた拡張子に何か問題があったのでWebPACKのは、このような苦労した理由があったことを私に言った：

resolve: { 
    extensions: ['.js', '.jsx'], 
    }, 

がreact.js.js探しと反応するであろう.jsxの代わりに.jsxを使用してください。だから私はそれを更新しなければなりませんでした：

resolve: { 
    extensions: ['', '.js', '.jsx'], 
    }, 

それを修正しました！ =）