面對@多個錯誤與反應，反應和反應路由器

我遇到了錯誤，試圖用webpack運行構建。似乎webpack無法解決反應，反應和反應路由器。我包括我的配置文件，錯誤和我的package.json。我不知道我要去哪裏錯。面對@多個錯誤與反應，反應和反應路由器

這裏是我的webpack.config.js配置：

var webpack = require('webpack'); 
var path = require('path'); 

function _path(p) { 
    return path.join(__dirname, p); 

} 
module.exports = { 
    entry: [ 
    './app/app.jsx' 
], 
externals: { 
    jquery: 'jQuery' 
}, 
plugins: [ 
    new webpack.ProvidePlugin({ 
    '$': 'jquery', 
    'jQuery': 'jquery' 
}), 
new webpack.LoaderOptionsPlugin({ 
    options: { 
    sassLoader: { 
    includePaths: [ 
     path.resolve(__dirname, './node_modules/foundation-sites/scss') 
    ] 
} 
} 
}) 
], 
output: { 
    path: __dirname, 
    filename: './public/bundle.js' 
}, 
resolve: { 
    modules: [__dirname], 
alias: { 
    'jquery': _path('node_modules/jquery/dist/jquery'), 
    'foundation': _path('node_modules/foundation-sites/dist/js/foundation'), 
    Main: 'app/components/main.jsx', 
    Nav: 'app/components/nav.jsx', 
    Timer: 'app/components/timer.jsx', 
    Countdown: 'app/components/countdown.jsx', 
    Clock: 'app/components/clock.jsx', 
    CountdownForm: 'app/components/countdownForm.jsx', 
    Controls: 'app/components/controls.jsx', 
    applicationStyles: 'app/styles/app.scss' 
}, 
extensions: ['*', '.js', '.jsx'] 
}, 
module: { 
loaders: [ 
    { 
    loader: 'babel-loader', 
    query: { 
     presets: ['react', 'es2015', 'stage-0'] 
    }, 
    test: /\.jsx?$/, 
    exclude: /(node_modules|bower_components)/ 
    } 
] 
}, 
devtool: 'eval-source-map' 
}

而這裏的錯誤：

ERROR in ./app/app.jsx 
Module not found: Error: Can't resolve 'react' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app' 
@ ./app/app.jsx 3:13-29 
@ multi ./app/app.jsx 

ERROR in ./app/app.jsx 
Module not found: Error: Can't resolve 'react-dom' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app' 
@ ./app/app.jsx 9:15-35 
@ multi ./app/app.jsx 

ERROR in ./app/app.jsx 
Module not found: Error: Can't resolve 'react-router' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app' 
@ ./app/app.jsx 11:15-38 
@ multi ./app/app.jsx 

ERROR in ./app/components/main.jsx 
Module not found: Error: Can't resolve 'react' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components' 
@ ./app/components/main.jsx 3:12-28 
@ ./app/app.jsx 
@ multi ./app/app.jsx 

ERROR in ./app/components/timer.jsx 
Module not found: Error: Can't resolve 'react' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components' 
@ ./app/components/timer.jsx 3:12-28 
@ ./app/app.jsx 
@ multi ./app/app.jsx 

ERROR in ./app/components/countdown.jsx 
Module not found: Error: Can't resolve 'react' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components' 
@ ./app/components/countdown.jsx 3:12-28 
@ ./app/app.jsx 
@ multi ./app/app.jsx 

ERROR in ./app/app.jsx 
Module not found: Error: Can't resolve 'style' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app' 
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. 
       You need to specify 'style-loader' instead of 'style', 
       see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed 
@ ./app/app.jsx 25:0-43 
@ multi ./app/app.jsx 

ERROR in ./app/components/nav.jsx 
Module not found: Error: Can't resolve 'react' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components' 
@ ./app/components/nav.jsx 3:12-28 
@ ./app/components/main.jsx 
@ ./app/app.jsx 
@ multi ./app/app.jsx 

ERROR in ./app/components/nav.jsx 
Module not found: Error: Can't resolve 'react-router' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components' 
@ ./app/components/nav.jsx 5:15-38 
@ ./app/components/main.jsx 
@ ./app/app.jsx 
@ multi ./app/app.jsx 

ERROR in ./app/components/clock.jsx 
Module not found: Error: Can't resolve 'react' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components' 
@ ./app/components/clock.jsx 3:12-28 
@ ./app/components/timer.jsx 
@ ./app/app.jsx 
@ multi ./app/app.jsx 

ERROR in ./app/components/controls.jsx 
Module not found: Error: Can't resolve 'react' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components' 
@ ./app/components/controls.jsx 3:12-28 
@ ./app/components/timer.jsx 
@ ./app/app.jsx 
@ multi ./app/app.jsx 

ERROR in ./app/components/countdownForm.jsx 
Module not found: Error: Can't resolve 'react' in '/home/kollie/Desktop/DevFolders/React/ReactTimer/app/components' 
@ ./app/components/countdownForm.jsx 3:12-28 
@ ./app/components/countdown.jsx 
@ ./app/app.jsx 
@ multi ./app/app.jsx

我的package.json：

"dependencies": { 
    "axios": "^0.15.2", 
    "express": "^4.14.0", 
    "react": "^15.4.2", 
    "react-addons-test-utils": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-router": "^3.0.3" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.18.2", 
    "babel-loader": "^6.2.7", 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "babel-preset-stage-0": "^6.16.0", 
    "css-loader": "^0.26.0", 
    "expect": "^1.20.2", 
    "foundation-sites": "^6.2.4", 
    "jquery": "^3.1.1", 
    "karma": "^1.4.1", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-mocha": "^1.3.0", 
    "karma-mocha-reporter": "^2.2.2", 
    "karma-sourcemap-loader": "^0.3.7", 
    "karma-webpack": "^2.0.2", 
    "mocha": "^3.2.0", 
    "node-sass": "^4.5.2", 
    "sass-loader": "^6.0.3", 
    "script-loader": "^0.7.0", 
    "style-loader": "^0.13.1", 
    "webpack": "^2.3.2" 
    }

來源

2017-04-03 Israel Z Kollie

你改變了resolve.modules到[__dirname]更多的調試。這意味着它只會在當前目錄中查找模塊，但react之類的依賴項位於node_modules中。 resolve.modules的默認值爲['node_modules']，如果更改它，還需要添加node_modules以保持從npm安裝的軟件包的常規模塊分辨率。

resolve: { 
    modules: [__dirname, 'node_modules'], 
}

來源

2017-04-03 18:00:34

這會帶走所有這些錯誤。但是如果你有時間看，我會遇到另一個。 ./~/css-loader!./~/sass-loader/lib/loader.js!./~/style-loader!./app/styles/app.scss中的錯誤模塊構建失敗： @import「鹼/變量「; ^ –

SCSS沒有相對路徑的特殊語法，所以它實際上與'@import「./base/variables」'相同。 Webpack允許通過添加'〜'來將其解析爲常規模塊。所以你需要改變它：'@import「〜base/variables」'。如['sass-loader' imports]（https://github.com/webpack-contrib/sass-loader#imports）中所述。 –

更改分機的WebPack決心以下

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

與顯示錯誤的細節選項來運行你的WebPack上啓用錯誤

webpack --progress --color --watch --display-error-details.

來源

2017-04-03 12:25:40

這不起作用。 –

面對@多個錯誤與反應，反應和反應路由器

回答

相關問題