2017-07-07 2 views
0

I npm installiert jQuery und sehe jetzt eine Reihe von Module not found: Error: Can't resolve... Fehler. Irgendeine Idee von dem, was das Wurzelproblem sein könnte und eine Lösung?Installation von jQuery gibt Webpack-Fehler

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'...

Ich bin mir ziemlich sicher, dass dies etwas mit webpack 2 nach googeln um die Fehler zu tun hat, aber keine der vorgeschlagenen Lösungen, um die Fehler zu beheben.

Eine Lösung, die ich gesehen habe, aber hat nicht funktioniert ist die folgende in meiner webpack Config setzen:

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

Hier ist meine 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>

Hier ist meine 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;

Und hier ist der Fehler: enter image description here

+0

Haben Sie diesen Beitrag schon gesehen? https://stackoverflow.com/questions/44084544/jquery-with-webpack-2 –

+0

Ja, leider sind die Fehler immer noch vorhanden. – chewchew

Antwort

6

Haben Sie den jQuery npm Paket anstelle des jquery Paket installieren? Ich hatte die gleichen Fehler mit der veralteten "jQuery". Als ich "jQuery" entfernte und "jquery" installierte, verschwanden die Fehler.

Verwandte Themen