I searched whole stackoverflow to fix it, but cant. So... I need to use NPM module in browser (index.html).
Getting error "require is not defined" if using
<script src="./script.js"></script>
in html file, and using const { WebcastPushConnection } = require('tiktok-livestream-chat-connector'); in script.js.
Tried to use browserify, and when i use outputed js script getting error "require.resolve is not a function"
Can anyone help?
tiktok-livestream-chat-connector is described, by its website, as:
A Node.js module to receive and decode livestream events like comments and gifts in realtime from TikTok LIVE by connecting to TikTok's internal WebCast push service.
At no point in its documentation does it mention compatibility with web browsers.
Browserify (and similar tools) can bundle up CommonJS modules into a single file so that they can run in environments which don't support CommonJS modules (e.g. browsers). They can't polyfill all the Node.js features that browsers don't support (like the ability to make raw socket network connections).
If a module needs to run on Node.js then you can't just move it to the browser.
You could write a program for Node.js that runs as a web service and operates as a bridge to whatever the module does. The the browser could connect to your web service with WebSockets or Ajax requests. The project links to an example of one.
Related
I am making a small website for a buddy but he only has a Webserver from hostinger, for his website I want to use a Node.js Package. Is it still possible to use this hosting service if I just point the URL to the index.html file?
Or does the javascript not work anymore if I use Node.js?
tl'dr: Most likely not.
If the plan your friend has does not offer support Node.js you will not be able to use such package, but it will be hard to say for sure without knowing exactly the plan your friend has.
Webserver usually means static content (HTML, CSS and JS) hosting, and serving to the browser as-is. In this case no actual processing is done on the server - which is what node.js is for.
You could use other browser npm packages (or isomorphic ones, that support Node.js and browser environments), but in the case you described you won't be able to use node specific packages.
According to Hostinger's website, you can only use node.js if you are on VPS plan.
EDIT: It is worth mentioning that you could use a node package if you use it locally to generate or preprocess the assets before putting it in a webserver. But in this case the package will be executing in your machine instead of the server, during build time (not run time).
It depends on the package and what you want to do with it.
Node.js can be used to run server-side JavaScript. If you need to run server-side JavaScript then you need a hosting service that supports it. A service that supports only static files will not suffice.
The term “a Node.js package” might refer to a package available via NPM. Some such packages require Node.js (in which case see the previous paragraph). Others will run client-side in the browser. Typically, if you are using such a package in client-side code you will use a bundler (such as Webpack or Parcel) to convert your program (which imports said package) for use in browsers.
Some websites are generated programatically at build time and the resulting static files uploaded to a static hosting site. Node.js can be used to do that generation. It is, for example, the usual means by which sites using Gatsby.js are built.
I'm creating a meeting web application and at server side I'm using php sdk, everything is ok and I'm able to create meeting and attendees and get the returned data with ids, join tokens etc. Now I'm stucked on aws demo application client because it seems to work only with React. I've tried to embed amazon-chime-sdk-js via cdn(https://cdn.jsdelivr.net/npm/amazon-chime-sdk-js#2.10.0/build/index.min.js) but without success, console shows 2 errors:
Uncaught ReferenceError: exports is not defined at index.js:2
aws_meet.php:20 Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
I guess this is due to the absence of modules support on browsers, right? Is there any sample with no React needing or is it mandatory to use that?
As the Chime SDK is in typescript you can use the typescript compiler to compile it to Javascript and then bundle it using a module bundler such as Webpack.
You can find more about it here: Web application component architecture section
Example:
git clone https://github.com/aws/amazon-chime-sdk-js.git
cd amazon-chime-sdk-js/demos/singlejs
npm run bundle
It will generate an amazon-chime-sdk.min.js and amazon-chime-sdk.min.js.map in the build folder. Include both files in your project and embed amazon-chime-sdk.min.js
<script src="path/to/amazon-chime-sdk.min.js"></script>
You can find the complete example here: Chime SDK Single JS
Thank you #tahiaji for highlighting about the broken link.
I am trying to develop a Cordova based app that uses the ytdl-core node module. From my understanding, Cordova uses node-js for running the app on osx (or other non-browser platforms). The app builds successfully and it opens on my Mac, but the javascript won't work since it throws this error on open and/or refresh:
"modify in config.xml.
2020-05-23 20:11:32.639 Weather[11707:374910] JavaScript error: index.js:11: ReferenceError: Can't find variable: require"
index.js:11 is this line: const ytdl = require('ytdl-core');
Most people with this error are getting it because browsers do not support "require", but as I said, I'm running on osx platform. I already checked that node.js is installed and the ytdl-core is in the node_modules folder of my project.
Here is my git repository: https://github.com/FCjosh/JRMusicapp.git
I installed cordova exactly as it says on their website with xcode. One more thing worth mentioning is that I am using Jquery although I don't think that is problematic with node.js.
UPDATE
After tons of research, I have reason to believe that the reason the Javascript file cannot use the require function is because Cordova is treating it like a browser would. I have three ideas for solutions that may or may not work:
Cordova Plugins - A plugin runs natively and perhaps some sort of nodeJS plugin specific to the ytdl dependencies could be made.
Browserify, Webpack, or the like. From my understanding, these let you run serverside code on a browser. This seems pretty straightforward and a likely to work solution.
Create a native app and embed cordova. I don't know how to make a native app and if I did, I wouldn't be using Cordova. So I will not pursue this option, but I could understand situations where embedding Cordova in a native app is very useful.
I began making a plugin, but I got stuck when I got to the Objective C part and I have no idea how to implement nodeJS into the plugin. I am changing routes to the Browserify/Webpack solution because the plugin is over my head and making a native app is also over my head.
I will update again soon if the Browserify/Webpack solution works.
I am working on React Serverless App using AWS I want to access Node JS specific package into React js what are possible alternatives to access node js package without using Node JS on the backend
font-list is a Node.js package for listing the fonts available on your system.
I want to access this package on the frontend side.
Need Help!!
To answer the broader question, a package meant for node will more than likely work only in the node eco system.
In the case of font-list, it looks like it's running a vbs script to get available fonts (in the case of windows). Running external scripts like that, or accessing local file systems is not something you can do in a browser environment due do security constraints.
So to get a list of fonts in a browser will require a its own solution. You cannot just use a Node.js package, even though it's all still js.
****** EDIT *******
I do realize the mistake now, i was running my script in my terminal when i was testing my require.
****** OLD ****
The answer might all ready be here on the page, but i have not been able to find it, the general answers i see is that i cannot use "require" client sided.
The thing is the script i am trying to run works perfectly on my school laptop. But it doesnt want to run on my on Desktop at home.
I am trying to run a script where i want to require like this. "var fs = require('fs');"
But the console in my browser just gives me this error ( ReferenceError: require is not )
I am using Visual Studio Code, with Node.js.
I have a basic index.html file which uses 1 script.js file. Nothing else is being used for it.
A link for my files should you want to take a look (
https://drive.google.com/file/d/1VgEmwtcHkURFT1WmPOnEKr_OHLT_SY78/view?usp=sharing )
I am using Visual Studio Code, with Node.js.
I have a basic index.html file which uses 1 script.js file.
So you have two sets of JS.
JS that runs in Node.js
JS that runs in the browser (delivered via index.html)
var fs = require('fs'); is very much in the former category. require is a built-in in Node.js. fs is a core library of Node.js.
You are trying to run it in the browser, where it isn't supported and does not work. You need to run it in Node.js.
i see is that i cannot use "require" client sided.
There are browser-side implementations of require and tools (like Webpack) which will bundle modules into a browser compatible file, but neither of those approaches will help you here because fs itself depends on Node.js.
require() is not standard JavaScript, it's built into NodeJS to load modules.
Try using Express or similar to run a simple web server and it should work. Right now it's not working from home because it's not being compiled by the Node engine.
require() it's not an internal function of javascript in the front-end, you're going to need to import some library that realizes this for you, as for example require.js or browserify.
Otherwise fs is only supported in NodeJS you need to run in the server not in the browser.
this helped me, check your package.json for type:"module" and remove it.