Super simple example of using requirejs loader?

Question

0.00/5 (No votes)

See more:

Can some one show an exmple of the most simplistic minimalist working of requireJS loader?
Been struggling getting my data into chrome, finally managed to get it there in JSON format but I hit a BRICK WALL everytime there is the node 'require' statement ANYWHERE in the chain of dependencies (es6 will find it). Webpack sounded like a can of worms. There are lots of snippets like requirejs = require('requirejs) but they all miss fundamental diagrams or explanation of the structure or relationship of the files.
I would like to avoid script tags where ever possible but understanf they may be needed.
How does it work in lamens terms? I understand C and everything is a file but if I could find a SIMPLE example requireJs setup including any relevent code / scripts that would be amazing. Thanks. I just want to get my data in the browser dynamically but my data is made using 'require' so cant use es6 import / export ? And I really struggle with script tags atm. thanks

file structure-

data_retrieval.js

const requirejs = require('requirejs')

(top level)

sketch.js

const { GraphPlot } = await import("./data_retrieval.js")

// I refresh browser and get ERROR REQUIRE IS NOT DEFINED
// But I need to use 'require' to get 'requirejs'
// I know im being stupid but been trying this for a week now, really frustrated with // // it. I want to learnc the front end stuff but jeez its painful !

What I have tried:

<script data-main = "app.js" src = "require.js"></script>

const requirejs = require('requirejs')

Posted 26-Dec-21 12:11pm

cyber dean

Updated 26-Dec-21 13:27pm

v4

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Afzaal Ahmad Zeeshan · Answer 1 · 2021-12-26T13:27:00

Quote:
I refresh browser and get ERROR REQUIRE IS NOT DEFINED

That is because by default a browser does not know what a require method is supposed to do. There are of course various methods by which you can give the browser an idea of what a require call would do.

Side note, the require calls were popularized by Node.js, and Node.js works on the backend in a special process that knows the Node.js API and what methods mean in its context. So, the code that works just fine in a Node.js app, would most likely never work in a browser.

Your best bet would be to avoid using the require call, and try to inject the require.js directly with a script tag. Visit this website for require.js[^], and download the script. Once done, you can then link the script using the script tag in the HTML document; read the page that I have linked.

If you still wish to use this — maybe the tutorial is using, or maybe the app code uses require too much — then consider converting this code to the browser-understandable one. Webpack, browserify, etc. are a few of the examples that convert this kind of JavaScript (which is standard in a context, and ambiguous in another...) to a standard JavaScript that can work in a browser.

Read the following:
https://webpack.js.org/[^]
javascript - Client on Node.js: Uncaught ReferenceError: require is not defined - Stack Overflow[^]
Browserify[^]

Free tip: never assume that the code that works on your machine would work on your client's machine. They might have a totally different setup and would never be interested in downloading/installing plugins for you. If in the first 5 seconds (a very optimistic number) your website does not show a good page, they'll leave the website considering it as a broken page.