Require function is not defined - javascript

I am working on a 3D viewer using express.
My problem is that I am trying to require the file system module in one (not the main one) of my JS files. When I try to load the browser, the console gives me the next message:
ReferenceError: require is not defined
My project structure is:
node_module
src
js
app.js // the problem is here
views
index.ejs
server.js

A short example of how to use importing with the browser:
Create index.html with next content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module" src="./main.js"></script>
</body>
</html>
Check script tag - we set type="module" - this instructs the browser that we are using module system
Create main.js script with:
import name from './name.js';
console.log(name);
Create name.js file:
const name = 'test';
export default name;
Now you need to run this app. The easiest way is to use WebServer For Chrome
Start the application and check the console. You should see that the 'test' is logged.
That's it. Please, keep in mind that this is just an example. We don't touch minification, caching and other important things.

Related

vitejs loading js file not correctly while typical web-server does

consider the next index.html file(which loading a script which allows running python code inside HTML 'py-script' tags):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Vite App</title>
<link rel="stylesheet" href="./pyscript-runtime/pyscript.css"/>
<script defer src="./pyscript-runtime/pyscript.js"></script>
<py-config>
- autoclose_loader: true
- runtimes:
- src: "./pyscript-runtime/pyodide.js"
name: pyodide-0.20
lang: python
</py-config>
</head>
<body>
<py-script>
print('hello world')
</py-script>
</body>
</html>
when serving this index.html file via a normal web server /pyscript-runtime/pyscript.js is being loaded as a script an the page loads correctly.
however, loading this HTML as an entry point from vite would result in injected import <> from <> at the top of the file, treating it as a module, resulting in the famous error Uncaught SyntaxError: Cannot use import statement outside a module:
I actually tried to load this script as a module from normal web server and it worked, while vite refuses to load this page correctly, and I'm having a hard time understanding why.
this is the source code, cloning and serving index.html would result in working page
https://github.com/Eliav2/pyscript-offline-example
loading the same index.html file as entry point from vite app would not work.
is there any reason why the same HTML file would be loaded differently from a web server and a development web server like vite?

Using Handlebars in the Browser as an ES6 Module

I am trying to use Handlebars in the Browser (client-side script). I am importing a js module templating.js (see below) and want to import the Handlebars library as an ES6 module but can't find any documentation.
In the example below I was lifting the contents of the following js library as handlebars.js
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.js
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Templating</title>
<meta name="description" content="example showing how to template content">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="templating.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js" integrity="sha512-zT3zHcFYbQwjHdKjCu6OMmETx8fJA9S7E6W7kBeFxultf75OPTYUJigEKX58qgyQMi1m1EgenfjMXlRZG8BXaw==" crossorigin="anonymous"></script>
<script type="module" src="templating.js"></script>
</head>
<body>
<header>
<h1>Templating</h1>
</header>
<main>
</main>
</body>
</html>
/* templating.js */
import { Handlebars } from './handlebars.js' // v4.7.6
document.addEventListener('DOMContentLoaded', event => {
console.log('DOMContentLoaded')
})
I'm getting the error: requested module './handlebars.js' does not provide an export named 'Handlebars'
Does anyone know:
What handlebars library to use?
How to import this into my script?
Any help greatly appreciated...
Loading handlebars via a script tag will expose it as a UMD (universal module definition). This just means that all functionality of the library is exposed via global variable(s). In the case of the library link you provided, the main global variable appears to be Handlebars.
If you would like to import handlebars directly into your script as a CommonJS/ES6 module, you would need to use a build tool such as Webpack.
Try rendering your HTML document in a browser and then typing Handlebars in the devtools console, you should see an object containing all of Handlebars' exported functions.

How does a Vue app get launched if the index.html doesn't load any javascript?

None of the resources I've read about Vue attempt to explain how a Vue application is launched.
There are three files involved: public/index.html, src/main.js, and src/App.vue. A scaffold created with vue cli 4.1.1 contains this index.html which apparently is the entry point:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>sample-vue-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but sample-vue-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The main.js file creates the Vue App itself, but the index.html doesn't load main.js. If I double click on index.html I get a blank page, so something else has to intervene to launch the App. The comment in index.html says that files will be auto injected, but what does that injection?
Is the Vue launch process documented somewhere?
The Vue Cli handles the injection when you are developing locally as your run command will be something like npm run serve for default configurations.
When you get round to putting the code into production you'll end up running a different command npm run build which will create a new set of files where the index.html file will include a script tag that references all your javascript code. Under the hood it uses webpack to do all the asset linking.
See the Vue Cli website for more details.

React boilerplate doesn't load js files in the index.html

I'm testing React-boilerplate and I'm trying to load some javascript files in the app/index.html file:
<!doctype html>
<html lang="en">
<head>
<!-- The first thing in any HTML file should be the charset -->
<meta charset="utf-8">
<!-- Make the page mobile compatible -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Allow installing the app to the homescreen -->
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<script type="text/javascript" src="myJScriptFile1.js"></script>
<script type="text/javascript" src="myJScriptFile2.js"></script>
</head>
<body>
<!-- Display a message if JS has been disabled on the browser. -->
<noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
<!-- The app hooks into this div -->
<div id="app"></div>
<!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
</body>
</html>
This is the default index.html file. I'm running it with npm or yarn and the server console shows me no error, but my browser console keeps telling me:
Uncaught SyntaxError: Unexpected token <
Just like this, there is no more error. These javascript files work fine because I'm using them into another React based project, and I'm calling them into the index.html file as well. The console prints that error per file. If I trace the error it leads me to the correspond .js file.
After almost a week searching the web I couldn't find a solution. So that's it, does anybody have any idea on how to solve this?
Well, I'm answering myself. I needed a little bit more of research in webpack. I achieve this through webpack:
installed npm i add-asset-html-webpack-plugin -D
then, in the webpack config file, under plugins I added:
new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') })
and that's it.

How do you render custom variables into HTML with webpack-dev-middleware?

I use Webpack to compile my JS which is then loaded via bundle.js via a template string sent via express.
The only problem is, I can't find information on how to render custom html while also using webpack-dev-middleware to watch and compile bundle.js.
My HTML is being sent with the following code:
app.use('*', (req, res) => {
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Title</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="main"></div>
<script type="text/javascript">window.__userData=${JSON.stringify(req.user)}</script>
<script src="/bundle.js" type="text/javascript"></script>
</body>
</html>`);
});
So, I have no idea how I can keep/use this while using webpack-dev-middleware for the bundle.js, since what I tried to do was just add app.use as per webpack-dev-middleware before the above snippet, though it did not work, failing with the error of bundle.js being of the wrong mime type text/html, thus not executable.
EDIT
The server-side rendering option for webpack-dev-middleware is experimental and not what I'm looking for, I don't need raw bundle.js to send with html.

Categories

Resources