How to load a javascript module in html - javascript

I receive an error whenever I import a library in my index.js file and try to use it in index.html file.
script tag in index.html:
<script src="index.js" type="module"></script>
import statement in index.js: import axios from './node_modules/axios';
The error I receive:
*I am running the app on a local server, not on the file system.

if you use just vanilla JavaScript and you want to use module you have to add in script tag type module for index.js by this way you tell browser you have to support module in index.js, and after you use module normally with exception you have to add extension name like ".js" for each import Good Luck
<script type="module" src="main.js"></script>

You need to provide the URL to an ES6 module file, not the URL to an automatically generated HTML document showing an index of files in the axios directory.
The Axios distribution includes:
node_modules/axios/dist/axios.min.js
… but that appears to be a hybrid "Load with a regular script tag in the browser" and CommonJS module — not an ES6 module, so you can't import it.
Consider using a tool like Webpack instead.

You can use CDN instead of that.
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
Thank you

Related

Unable to add type="module" script in my HTML page

Following this tutorial, I converted my custom downloaded font to a Javascript file. Now I am trying to include it in my HTML page so that I can use the font, like this:
<script type="module" src="/ZillaSlab-Medium-normal.js"></script>
<script type="module" charset="utf-8">
// here is my code...
</script>
But upon executing the HTML script, I keep getting this error:
Uncaught TypeError: Failed to resolve module specifier "jspdf".
Relative references must start with either "/", "./", or "../".
How do I fix this?
EDIT: I am using the latest jsPDF library:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
The file generated from the service you are using starts with:
import { jsPDF } from "jspdf"
This is using Node.js-style module resolution which isn't supported by web browsers.
To use it, you'll need to build your code using a toolchain that includes a bundler (such as Webpack or Parcel) which implements Node.js-style module resolution and outputs a bundle of JS suitable for running in a browser.

Import local module inside of script from external html

I've got frontend and backend. From backend I get prerendered html (Symfony form) which includes script with source tag. Origin is localhost:8001.
<html>
<head>
...
</head>
<body>
...
<div class="container">
{% block javascripts %}
<script type="module" src="http://localhost:8020/build/form_generator/script.js"></script>
{% endblock %}
</div>
</body>
</html>
In frontend (localhost:8020) script.js is located in Public folder. The script loads fine, but inside script I want to load another module from frontend (Select2, which is installed to node_modules) but I am not able to load it correctly. Select2 is imported correctly within other scripts in frontend. script.js:
/** #module script*/
import 'select2'; // gives log error 1
import select2 from "../../../node_modules/select2/dist/js/select2"; // gives log error 2
log error 1: Uncaught TypeError: Failed to resolve module specifier
"select2". Relative references must start with either "/", "./", or
"../".
log error 2: GET
http://localhost:8020/node_modules/select2/dist/js/select2
net::ERR_ABORTED 404 (Not Found)
Modules loaded by the browser cannot use Node.JS module resolution rules.
They do not have access to the file system. They cannot search a node_modules directory.
You need to:
Ensure the module you want to use does not depend on APIs that are available in Node.js but not in browsers
Ensure the module you want to load has a URL (how you do this depends on your HTTP server)
Import that URL
e.g.
import select2 from '/static/js/select2.js';
An alternative to steps 2 and 3 is to use a bundler (such as Webpack or Parcel) which can do Node.js module resolution to bundle all the modules up into a single JS file that you can load as a regular script.

ElectronJS: Renderer can't resolve module require("./index.js") over HTTP

I have my folder structure set up like this:
assets/
logo.png
other_web_assets.png
electron/
node_modules
main.js
package-lock.json
package.json
src/
index.js
otherJavascriptFiles.js
index.html
style.css
The reason I've separated ElectronJS from the website is that the website is intended to be served via HTTP (it's not supposed to work without Electron though, I only need the HTTP protocol for Firebase Authentication). Currently I'm serving index.html via the LiveServer VSCode extension on port 5500.
In my index.html I'm using require("./src/index.js") to load index.js, and in the index.js file I use require to communicate with the other javascript files and other node modules.
However, the require("./src/index.js") doesn't work from index.html, I always get the error Uncaught Error: Cannot find module './src/index' in the dev tools console.
I've tried importing index.js with <script src="./src/index.js"></script>, but that results in the same error, with a different javascript file that my index.js tries to import using require.
I can however require normal node modules (for example require("request")) without any errors.
Is there any way to fix this?
To import functions from a js file I use
import {functionName} from 'path to js file where function is defined'
I use Require for pictures, etc. but not for js files.
I suggest you to use import. Also, define the functions you need to import into other files using the word export

how to use webpack to load CDN or external vendor javascript lib in js file, not in html file

I am using react starter kit for client side programming. It uses react and webpack. No index.html or any html to edit, all js files. My question is if I want to load a vendor js lib from cloud, how to do I do that?
It would be easy to do that in a html file. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
However, in js file, it only uses npm installed packages. How can I import the above lib with no html file? I tried import and require, they only work for local files.
update 10/21/15
So far I tried two directions, neither is ideal.
#minheq yes there is a html file sort of for react start kit. It is html.js under src/components/Html. I can put cloud lib and all its dependencies there like this:
<div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
<script src="/app.js"></script>
<script dangerouslySetInnerHTML={this.trackingCode()} />
</body>
Good news is it works, I don't need do anything else in js file, no import or require. However, now I have two jquery libs loaded in different ways. One in here, the other through npm and webpack. I wonder it will give me trouble later. The react-routing I use give me 'undefined variable' error if I type a none home path in browser window due to the server side loading I guess. So this solution is not very good.
Use webpack externals feature. This is documented as: link. "You can use the externals options for applications too, when you want to import an existing API into the bundle. I.e. you want to use jquery from CDN (separate tag) and still want to require("jquery") in your bundle. Just specify it as external: { externals: { jquery: "jQuery" } }."
However, the documentation I found a few places are all fussy about how to do this exactly. So far I have no idea how to use it to replace <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> in html.
externals is not intended to let you do this. It means "don't compile this resource into the final bundle because I will include it myself"
What you need is a script loader implementation such as script.js. I also wrote a simple app to compare different script loader implementations: link.
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
You can create a script tag in your JS as
$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))
There is one html file that is definitely being used to serve to users with your js bundle attached. Probably you could attach the script tag into that html file
Use webpack's externals:
externals allows you to specify dependencies for your library that are
not resolved by webpack, but become dependencies of the output. This
means they are imported from the environment during runtime.
I have looked around for a solution and most of all proposals were based on externals, which is not valid in my case.
In this other post, I have posted my solution: https://stackoverflow.com/a/62603539/8650621
In other words, I finished using a separate JS file which is responsible for downloading the desired file into a local directory. Then WebPack scans this directory and bundles the downloaded files together with the application.

Using requireJS to initiate React component in Symfony2 template

I am having trouble getting React components to work in my Twig templates in Symfony2, using RequireJS to initiate them. I was trying to get this one to work: https://github.com/rackt/react-autocomplete
First I installed it, locally, in parallel to where I have my css files for my templates:
npm install react-autocomplete
Then, some selected parts from my twig template:
<html>
<head>
<script src="https://fb.me/react-0.13.1.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"> </script>
</head>
<body>
<div id="react_demo">
<script type="text/jsx">
require(["{{asset('/bundles/demobundle/js/node_modules/react-autocomplete')}}"], function (ReactAutocomplete) {
alert('react-autocomplete loaded');
});
</script>
</div>
</body>
</html>
And now, to the problem: it doesn't seem to find my React component - or doesn't understand that it is a React component I'm trying to load... for some background info I haven't done anything except for including the React and Require JS files, and install the component. Perhaps I've missed something?
Uncaught Error: Load timeout for modules: /bundles/demobundle/js/node_modules/react-autocomplete
That one looks like a CommonJS module and while those can be loaded with RequireJS it needs some additional configuration.
While the packages can have the CommonJS directory layout, the modules themselves should be in a module format that RequireJS can understand. Exception to the rule: if you are using the r.js Node adapter, the modules can be in the traditional CommonJS module format. You can use the CommonJS converter tool if you need to convert traditional CommonJS modules into the async module format that RequireJS uses.
Also see http://requirejs.org/docs/commonjs.html and https://stackoverflow.com/a/16522990/1630906

Categories

Resources