2016-05-03 3 views
4

был бы очень признателен помощь по этому вопросу один: Я не в состоянии построить с помощью Webpack, получить короткий список ошибок, начиная с:модуль не найден: Ошибка: Не удается разрешить модуль «реагировать», когда я использую 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:

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

И мой список зависимостей в package.json:

"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": "*" 
    } 

ответ

18

Фигурные это! Я сначала запустил webpack с параметрами -display-error-details, которые, на мой взгляд, всегда должны быть по умолчанию все время. webpack --progress --color --watch --display-error-details.

Это сказал мне, что причина WebPack имел такое трудное время, потому, что там было что-то не так с расширениями я сказал это, чтобы искать:

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

Посмотрел бы для react.js.js и реагирующих .js.jsx вместо того, чтобы просто реагировать.js. Итак, я должен был обновить это значение до:

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

Который зафиксировал его! =)

+0

Скрытая документация всегда скрыта и исследована удачей, испытайте с некоторым сочетанием логики и потраченными чашками кофе. Спасибо, что разделили его! –

Смежные вопросы