I'm very new to webpack and I followed tutorials to set up my config file. I managed to do all I wanted so far, except the lazy loading...
I just did a HMTL page with a button and linked the JS to it. When I click the button, it's supposed to import jquery and change the text color on the page, but i get this error:
Uncaught (in promise) TypeError: $ is not a function
at eval (app.js?cf22:5)
at <anonymous>
(anonymous) @ app.js?cf22:5
Promise.then (async)
(anonymous) @ app.js?cf22:4
Does anyone know what I'm missing ? did some research but nothing helped me so far :/ Thanks for your help !
Here's my files:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/app.css">
<title>Test Webpack</title>
</head>
<body>
<div>Hello</div>
<button id="button">Click me</button>
</body>
<footer>
<script src="assets/app.js"></script>
</footer>
</html>
app.js
document.getElementById('button').addEventListener('click', function() {
import('jquery').then(($) => {
$('body').css('color', 'yellow');
});
});
webpack.config.js
{
"name": "webpack-boilerplate",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "cross-env NODE_ENV=dev webpack-dev-server --hot",
"prod": "cross-env NODE_ENV=prod webpack"
},
"devDependencies": {
"autoprefixer": "^8.1.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.3",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.18",
"cross-env": "^5.1.3",
"css-loader": "^0.28.10",
"eslint": "^4.18.2",
"eslint-loader": "^2.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"img-loader": "^2.0.1",
"node-sass": "^4.7.2",
"postcss-loader": "^2.1.1",
"remove": "^0.1.5",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.2",
"uglifyjs-webpack-plugin": "^1.2.2",
"url-loader": "^1.0.1",
"webpack": "^4.1.0",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0",
"webpack-manifest-plugin": "^2.0.0-rc.2"
},
"dependencies": {
"jquery": "^3.3.1"
}
}
.babelrc
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7", "ie >= 7"]
}
}]
],
"plugins": ["syntax-dynamic-import"]
}
.eslintrc
{
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": true,
"codeFrame": false
},
"extends": "eslint:recommended",
"rules": {
"semi": ["error", "always"],
"no-console": "warn",
"no-unused-vars": "warn"
},
"env": {
"node": true,
"browser": true,
"es6": true
},
"globals": {
"console": true
}
}
What you get if you are using import().then()
is not jQuery directly, but an ES6 exported object. jQuery should be the default export, so try
import('jquery').then(({ default: $ }) => {
$('body').css('color', 'yellow');
});
This will take the default from the exported object and gives it the name $
.
This is the same as doing
import('jquery').then((jquery) => {
const $ = jquery.default;
$('body').css('color', 'yellow');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.