I was using socket.io and node.js for my application where I'm trying to use socket.io package and to import io package in my client.js I added the following script with my backend running at 3008 port as per documentation :
index.html:
<script defer src="http://localhost:3008/socket.io/socket.io.js"></script>
<script defer src="js/client.js"></script>
client.js:
const io2 = io.connect("http://localhost:3008");
but it kept showing the error that
ReferenceError: io is not defined
after reading some documentation I added the following script to my html file.
<script defer src=""https://cdn.socket.io/4.4.1/socket.io.esm.min.js""></script>
But the error persisted.
What should I do?
While importing the script, you added defer and
The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM.
Just remove that attribute for socket.io script tag and keep it as it is for another js tag.
Like this :
Make sure you get js code loaded when you get http://localhost:3008/socket.io/socket.io.js in the browser.
Hope this helps!! Please comment if you get any issues or doubts later.
Related
I've been trying to embed an external JavaScript source into my Next.js application and keep receiving following error:
Failed to execute 'write' on 'Document': It isn't possible to write
into a document from an asynchronously-loaded external script unless
it is explicitly opened.
The code I am trying to use can be found here - The map with the vessel has an option to embed it. So far the component that generates this error looks like this:
<div className={styles['container']}>
<Script type="text/javascript">
var width="100%";var height="400"; var mmsi=228402900;
</Script>
<Script
type="text/javascript"
src="https://www.vesselfinder.com/aismap.js">
</Script>
</div>
If I copy the embed code into CodePen it works just fine - link to my codepen with the embedded map here.
Does somebody know what could be the problem here?
The issue occurs because the external script is being loaded asynchronously by next/script, thus ignoring the document.write() call present in the script.
From Document.write() MDN documentation:
Note: Using document.write() in deferred or asynchronous scripts will
be ignored and you'll get a message like "A call to document.write()
from an asynchronously-loaded external script was ignored" in the
error console.
You'll need to set the Script strategy to beforeInteractive so the script is added to <head>, and explicitly set the defer property to false to prevent the script from being loaded asynchronously.
<Script
type="text/javascript"
src="https://www.vesselfinder.com/aismap.js"
strategy="beforeInteractive"
defer={false}
></Script>
I want to use pouchDB in my WebApp so that when I click on a button, the data from a JSON file would be saved to pouchDB. In my index.html I imported these at first:
<script type="module" src="pouchdb/packages/node_modules/pouchdb/src/pouchdb.js"></script>
<script type="module" src="pouchdb-load/dist/pouchdb.load.js"></script>
<script src="js/pdb.js"></script>
I cloned pouchDB to my working html folder so the path should be fine. But in my js file it started to throw error from this line var PouchDB = require('pouchdb'); stating 'Uncaught ReferenceError: require is not defined', which I think it means that my WebApp failed to reach pouchDB from the src.
What I've tried:
Use <script src="//cdn.jsdelivr.net/npm/pouchdb#7.2.1/dist/pouchdb.min.js"></script> in the html file instead of using pouchdb.js in the js folder as the source.
This is also the only source this PouchDB official guide uses in its todo demo. This demo worked perfectly on my laptop, but when it comes to my own WebApp it no longer works and still throws the same error.
Another problem for this method is that even if the cdn link worked and I could reach pouchdb.min.js, I still need the pouchdb.load.js to be able to work since I want data in the JSON file to be saved to pouch.
In the PouchDB official guide, it doesn't even included this line var PouchDB = require('pouchdb'); in its app.js, but directly says var db = new PouchDB('todos');. But when I attempted to do it this way, a new error occurred: 'ReferenceError: PouchDB is not defined'.
I also tried npm install pouchdb-browser and then in the js file I wrote:
var PouchDB = require('pouchdb-browser');
var pouchdb = PouchDB.default.defaults();
but it throws the same error associated with require.
I think the problem is still that the sources in the html failed to created this connection between pouchdb.js with my WebApp. Meanwhile everything seems fine when I followed the official guide to make the todo Demo. Any idea what might have caused this problem and how to solve it?
I think you're mixing up client side and server side programming. You can't do "require" natively in client-side JavaScript code. Here's a very simple example of taking data from a form and writing it to local PouchDB:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/pouchdb#7.2.1/dist/pouchdb.min.js"></script>
</head>
<body>
<textarea id="doc" rows="10">
{
"a": 1
}
</textarea>
<br>
<button onclick="save()">Save</button>
<div id="response"></div>
<script>
const db = new PouchDB('todos')
const save = async function() {
const el = document.getElementById('doc')
const doc = JSON.parse(el.value)
const response = await db.post(doc)
document.getElementById('response').innerHTML = JSON.stringify(response)
}
</script>
</body>
</html>
It gets PouchDB from the CDN - notice that I'm using https:// instead of // as the protocol because we always want to fetch PouchDB using https even if the hosted page is served out on http.
Once PouchDB is loaded, we write the document to PouchDB database using the post function and write the response back to the page.
As this answer suggested, I want to modify a little bit office.js.
So I copied the content of https://appsforoffice.microsoft.com/lib/1/hosted/office.js to local, such that https://localhost:3000/static/office.js shows well the content.
Then, I make a very simple file test.html:
<html>
<head>
<!--<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>-->
<script type="text/javascript" src="https://localhost:3000/static/office.js"></script>
</head>
<body>
haha
</body>
</html>
Loading https://localhost:3000/static/test.html with remote office.js in a browser shows Warning: Office.js is loaded outside of Office client
o15apptofilemappingtable.js:11, and loading it in an Office add-in works well.
However, loading https://localhost:3000/static/test.html with local office.js in a browser shows Uncaught SyntaxError: Unexpected token <
o15apptofilemappingtable.js:1, and loading it in an Office add-in gives an error Add-in Error Something went wrong and we couldn't start this add-in. Please try again later or contact your system administrator.
So does anyone know what's wrong here? Is it possible to make our own local version of office.js?
See my answer in the linked question. Essentially, no, you should not be making your own local copy of "office.js". But if you did want a local copy -- which we already offer on NuGet and, more recently, on NPM (https://www.npmjs.com/package/#microsoft/office-js) -- you would need all the associated files in that directory as well, not just Office.js itself.
See https://unpkg.com/#microsoft/office-js#1.1.1/dist/ for a listing of the files and folders that make up Office.js. Not all (in fact, not most) are used in any given session, but you do want the whole set of files since different ones are loaded in different circumstances.
I am using the jsplumbtoolkit framework in order to load in several script html templates into my meteorjs application in order to create the appropriate divs/dialogues options necessary as a part of the api. After some troubleshooting I determined the issue seemed to be that Meteorjs was not loading my html script through the onRendered function that I supplied it with.
To give you a better idea of the problem
//Due to Meteorjs not able to load scripts directly in the template, I added the script load to my onRendered function in my template js
Template.mytemplate.onRendered(function(){
$(document).ready(function() {
var script = document.createElement("script");
script.type="text/x-jtk-templates";
script.src = "templates/workflowtemplate.html";
$("#rulesscripttemplate").replaceWith(script);
});
})
workflowtemplate.html is in the appropriate meteorjs directory /public/templates/workflowtemplate.html and I am assuming the directory is correct.
This is properly loaded when I check my client Mozilla developer kit as well
<script type="text/x-jtk-templates" src="templates/templaterulesworkflow.html"></script>
Is there a better way to confirm that this resource was infact loaded to the client through mozilla?
Figured it out. had to add the <script type="text/x-jtk-templates" src="templates/templaterulesworkflow.html"></script> to the tag of my application. That resolved the issue.
I'm new at nodejs and I want to write to a serial port using node but now I want it to be triggered by a button. And the data is coming from a textbox.
My node script is doing fine when I run it in the console/terminal. But can't do it with a button in a webpage.
Here's my nodejs embedded in html
<!DOCTYPE html>
<html>
<head>
<title>Node x HTML</title>
</head>
<body>
<script>
function write_serial()
{
var serialport = require("serialport");
var SerialPort = serialport.SerialPort;
var sp = new SerialPort("/dev/ttyACM0", {
baudrate: 9600,
parser: serialport.parsers.readline("\n")
});
var text = document.getElementById("textbox1").value;
sp.on('open', function()
{
sp.on('data', function (data)
{
sp.write(name);
});
});
}
</script>
<Input Type = "text" id = "textbox1" >
<BR>
<br><button onclick="write_serial();" href="javascript:;">Go!</button>
</body>
</html>
Here's the error I got when I open the console of the page (F12)
ReferenceError: require is not defined
Thanks in advance for your help. :)
Node.js is a hosting environment, that can execute JS and provides Node.js specific API. Browser, is a different hosting environment, with different API's. You can't use Node's specific API in a browser, and JS that uses Node API will result in an error in a browser.
For example, your script is using global require function, which is not available in a browser API's. And that's why:
ReferenceError: require is not defined
Conversely, your script can't be executed on Node as well, since it uses browser API:
document.getElementById("textbox1")
You've mixed API's from different environments in one script.
However, if your JS script doesn't use Node or browser specific API, it can be executed in both Node and a browser without an error. But it's not the case with your script.
The solution to your problem can be to split your script into two separate scripts, run one in a browser, and the other in Node.js, and to exchange data between them using XMLHttpRequest.
NodeJS is a non-browser JavaScript environment. You can't use most NodeJS features in a browser environment, because they aren't designed for it.
Instead, you'd have a local NodeJS process providing a web endpoint (e.g., a web server; perhaps using Express, but you don't have to) and run that NodeJS process so it's listening for web requests. Then you'd have a button on your web page that makes an ajax call to the NodeJS server, which performs the work.
Naturally, this would only allow you to perform the work on the machine where the server process is running.
Maybe import the serialport module from https://wzrd.in/standalone/serialport#latest
In other hand, try to seperate the logic from the view, i don't know if your app will grow or if it's just a POC, but use a messageBroker or sockets to bind your actions'view with the engine ?
Hope it helps