require is not defined – Vấn đề: require() không phải là một tính năng được tích hợp sẵn vào trình duyệt. Đôi khi, JavaScript có thể đột ngột hiển thị lỗi require is not defined như sau: Hàm require() của Javascript gây ra ReferenceError: require is not defined
Uncaught ReferenceError: require is not defined
require is not defined – Cách khắc phục lỗi require is not defined?
Nội dung
Vấn đề: Lỗi Uncaught ReferenceError: require is not defined
require is not defined javascript
IE 6+ .......... compatible ✔
Firefox 2+ ..... compatible ✔
Safari 3.2+ .... compatible ✔
Chrome 3+ ...... compatible ✔
Opera 10+ ...... compatible ✔
// credit by : https://stackoverflow.com/
Điều này thường xảy ra vì môi trường JavaScript của bạn không hiểu cách xử lý tham chiếu hàm require(). Hàm require() chỉ có sẵn mặc định trên môi trường Node.js.
Nếu bạn muốn sử dụng nó trên trình duyệt, bạn cần thêm hàm require() vào trình duyệt bằng cách sử dụng thư viện RequireJS.
Sử dụng RequireJS trong tệp HTML của bạn.
Để thêm RequireJS vào ứng dụng của bạn, bạn muốn tải download phiên bản RequireJS mới nhất và đặt nó trong thư mục scripts/ của bạn.
Tiếp theo, bạn muốn gọi script trong phần tiêu đề HTML chính của bạn như sau:
<!DOCTYPE html>
<html>
<head>
<title>RequireJS Tutorial - www.paakinfo.com</title>
<script data-main="scripts/app" src="scripts/require.js"></script>
</head>
<body>
<h2 id="header">Best System Management system</h2>
</body>
</html>
Thuộc tính data-main là một thuộc tính đặc biệt được RequireJS sử dụng để tải một script cụ thể ngay sau khi RequireJS được tải. Trong ví dụ ở trên, tệp scripts/app.js sẽ được tải.
Trong thư mục app.js, bạn có thể tải bất kỳ script nào bạn muốn sử dụng trong ứng dụng của bạn. Ví dụ, bạn muốn bao gồm Lodash library trong tệp chính của bạn. Đầu tiên, bạn muốn tải script từ trang web, sau đó bao gồm script lodash.js trong thư mục scripts/.
Cấu trúc ứng dụng của bạn nên trông như sau:
├── index.html
└── scripts
├── app.js
├── lodash.js
└── require.js
Bây giờ, bạn chỉ cần sử dụng hàm requirejs để tải thư viện lodash, sau đó chuyển nó vào hàm callback.
Hãy xem ví dụ sau:
requirejs(["lodash"], function (lodash) {
const ElementHdr = document.getElementById("header");
ElementHdr.textContent = lodash.upperCase("welcome Pakainfo");
});
Trong mã nguồn ở trên, RequireJS sẽ tải thư viện lodash. Sau khi tải xong, phần tử h2 sẽ được chọn, và textContent sẽ được thay thế bằng văn bản “welcome Pakainfo”, được chuyển thành chữ hoa bằng cách gọi lodash.uppercase().
Bạn có thể đợi cho đến khi toàn bộ DOM HTML được tải xong trước khi tải các script bằng cách lắng nghe sự kiện DOMContentLoaded như sau:
document.addEventListener("DOMContentLoaded", function () {
requirejs(["lodash"], function (lodash) {
const ElementHdr = document.getElementById("header");
ElementHdr.textContent = lodash.upperCase("welcome Pakainfo");
});
});
Và bước cuối cùng, bạn cũng có thể loại bỏ hoặc xóa thuộc tính data-main cũng như thêm thẻ script ngay sau thẻ body trong HTML như sau:
<!DOCTYPE html>
<html>
<head>
<title>RequireJS Tutorial - www.pakainfo.com</title>
<script src="scripts/require.js"></script>
</head>
<body>
<h2 id="header">Best System Management system</h2>
<script>
document.addEventListener("DOMContentLoaded", function () {
requirejs(["scripts/lodash"], function (lodash) {
const ElementHdr = document.getElementById("header");
ElementHdr.textContent = lodash.upperCase("welcome Pakainfo");
});
});
</script>
</body>
</html>
require is not defined – Hãy tự do tổ chức mã script của bạn theo ý thấy phù hợp.
Đó là cách bạn có thể sử dụng RequireJS để thêm hàm require() vào trình duyệt. Bạn có thể tải ví dụ từng bước một tại source code trong kho lưu trữ requirejs-starter trên GitHub.
Hy vọng bạn đã có ý tưởng về javascript require is not defined.
- Bài viết blog này ban đầu được đăng tại: https://www.pakainfo.com
