I am now developing JS in html, but I'd got following error: Uncaught (in promise) ReferenceError: require is not defined.
The code is just simple subs = require("./subscriptions.json").subs;.
To solve this problem, I first tried module with import and got another errors.
<script type="module" src="subscribe.js"></script>
import { subs as subs } from "./subscriptions.json"; → Uncaught SyntaxError: Unexpected token '{'import subs from "./subscriptions.json"; → Uncaught SyntaxError: Unexpected identifierimport * from "./subscriptions.json"; → Uncaught SyntaxError: Unexpected token '*'import "./subscriptions.json"; → Uncaught SyntaxError: Unexpected stringThis was same with "fs", a JS module, so I gave it up and tried to use require.js(2.3.6). But similarly, it threw errors.
<script data-main="subscribe.js" src="require.js"></script>
require(["./subscriptions.json"]); → Uncaught Error: Script error for "subscriptions.json"require(["json!./subscriptions.json"]); → Uncaught Error: Script error for "json", needed by: json!subscriptions.json_unnormalized2 , Uncaught Error: Script error for "subscriptions.json" , Uncaught Error: Load timeout for modules: json!subscriptions.json_unnormalized2require(["fs"]); → Uncaught Error: Script error for "fs"What could be the problem in my code? When needed, I can share my full code.
ps. Actually I don't need to require or import something. I just want my independent JS files to share a json data. If there is a better way, share yours please. Thank you.
You can't use require in es6 modules. require is used in node.js and to read a json file in your browser side javascript you can use the fetch api in your javascript file and can get data from .json file and use it in HTML
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));