2017-07-07 99 views
0

我npm安裝了jQuery,現在我看到一堆Module not found: Error: Can't resolve...錯誤。對根本問題可能是什麼以及解決方案有任何想法?安裝jQuery給出了webpack錯誤

ERROR in ./node_modules/jquery/lib/node-jquery.js 
 
Module not found: Error: Can't resolve 'jsdom'... 
 

 
ERROR in ./node_modules/jquery/lib/node-jquery.js 
 
Module not found: Error: Can't resolve 'xmlhttprequest'... 
 

 
ERROR in ./node_modules/jquery/lib/node-jquery.js 
 
Module not found: Error: Can't resolve 'location'... 
 

 
ERROR in ./node_modules/jquery/lib/node-jquery.js 
 
Module not found: Error: Can't resolve 'navigator'...

我敢肯定,這已是谷歌搜索的錯誤後做的WebPack 2,但沒有一個提出的解決方案解決錯誤。我見過,但是沒有奏效

一種解決方法是把下面的在我的WebPack配置:

plugins: [ 
 
    new webpack.ProvidePlugin({ 
 
     $: "jquery", 
 
     jQuery: "jquery" 
 
    }) 
 
],

這裏是我的index.html:

<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Title</title> 
 
    </head> 
 
    <body> 
 
    <div id="fb-root"></div> 
 
    <div id="app"></div> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> 
 
    <script src="common.js"></script> 
 
    <script src="bundle.js" type="text/javascript"></script> 
 
    </body> 
 
</html>

這裏是我的webpack.config.js:

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

 
var BUILD_DIR = path.resolve(__dirname, 'public'); 
 
var APP_DIR = path.resolve(__dirname, 'src', 'js'); 
 

 
var node_dir = __dirname + '/node_modules'; 
 

 
var config = { 
 
\t entry: { 
 
\t app: APP_DIR + '/index.js', 
 
\t common: ["jquery"], 
 
\t }, 
 
\t output: { 
 
\t \t path: BUILD_DIR, 
 
\t \t filename: 'bundle.js' 
 
\t }, 
 
\t resolve: { 
 
\t \t // This is so that you don't have to write the file extension while importing it. 
 
\t \t // Instead of import HomeComponent from './HomeComponent.jsx' 
 
\t \t // you can do import HomeComponent from './HomeComponent' 
 
\t \t extensions: ['.js', '.jsx','.json', '*'], 
 
\t \t alias: { 
 
     'jquery': node_dir + '/jQuery/src/wrapper.js', 
 
    }, 
 
\t }, 
 
\t externals: { 
 
    jquery: 'jQuery' 
 
    }, 
 
\t plugins: [ 
 
    new webpack.optimize.CommonsChunkPlugin({ 
 
     name: "common", 
 
     filename: "common.js", 
 
     minChunks: Infinity, 
 
    }), 
 
    new webpack.ProvidePlugin({ 
 
     $: "jquery", 
 
     jQuery: "jquery", 
 
     jquery: "jquery", 
 
     "window.jQuery": "jquery", 
 
    }), 
 
    ], 
 
\t module: { 
 
    loaders : [ 
 
\t \t \t { 
 
\t \t \t \t test : /\.jsx?/, 
 
\t \t \t \t include : APP_DIR, 
 
\t \t \t \t exclude: /node_modules/, 
 
\t \t \t \t loader : 'babel-loader' 
 
\t \t \t } 
 
\t \t ], 
 
\t }, 
 
}; 
 

 
module.exports = config;

這裏是錯誤:enter image description here

+0

你見過這個帖子嗎? https://stackoverflow.com/questions/44084544/jquery-with-webpack-2 –

+0

是的,不幸的是,錯誤仍然存​​在。 – chewchew

回答

6

是否安裝了jQuery NPM包,而不是jquery包?我使用已棄用的'jQuery'有同樣的錯誤。當我刪除'jQuery'並安裝'jquery'時,錯誤消失了。