面对@多个错误与反应，反应和反应路由器

我遇到了错误，试图用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

这不起作用。 –

面对@多个错误与反应，反应和反应路由器

回答

相关问题