Question

0

60

Views

I cannot find a way to use 'require' in html

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 identifier
import * from "./subscriptions.json"; → Uncaught SyntaxError: Unexpected token '*'
import "./subscriptions.json"; → Uncaught SyntaxError: Unexpected string

This 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_unnormalized2
require(["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.

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-07-13T02:54:56.820Z

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));