How to add require() in HTML5 Boilerplate

Question

I am trying to add require() in HTML5 boilerplate but it doesn't work.
I get error - Uncaught ReferenceError: require is not defined in browser console.

I did npm i require, then -

.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "jquery": true,
        "mocha":true,
        "amd": true
    },
    "plugins": ["mocha"],
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
      "indent": ["error", 2],
      "quotes": ["error", "single"],
      "semi": ["error", "always"]
    }
};

main.js -

const Swal = require('sweetalert2');
// other stuff

Edit - Added this also to q Here's my package.json -

{
  // other stuff

  "dependencies": {
    "js-md5": "^0.7.3",
    "require": "^2.4.20",
    "requirejs": "^2.3.6",
    "sweetalert2": "^9.5.3"
  }
}

Are you running your code on a browser? https://stackoverflow.com/a/19059825/6852641 — ButchMonkey, Dec 12 '19 at 14:45
I checked that answer before and tried, didn't seem to work. — nkirit, Dec 12 '19 at 15:07
Can we see the rest of your code then (package.json, html files, webpack config or whatever other bundler you're using) — Shimmy568, Dec 12 '19 at 15:22
Added package.json Everything else is just the same as HTML5 boilerplate - https://github.com/h5bp/html5-boilerplate Whatever changes I made in code are above — nkirit, Dec 12 '19 at 15:30
You can use import instead of require see: https://jakearchibald.com/2017/es-modules-in-browsers/ I think you shouldn't add require by npm it should be already as part of node. Browser won't run require!!! You have to transpile the code first. — Zydnar, Dec 12 '19 at 15:42

How to add require() in HTML5 Boilerplate

0 Answers0