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.
Related
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.
I have a NodeJS project which uses Webpack for packaging and Express for serving. When a user visits my root domain, I serve them an index.html file which contains a <script> block inside the footer. This script block has a type of module.
index.html
<!DOCTYPE html>
<html lang="en">
<head><!--content--></head>
<body><!--content--></body>
<footer>
<script type="module">
import MyService from './services/my';
// Use MyService
</script>
</footer>
</html>
And of course, I have a my.js module at the directory specified:
export default class MyService { ... }
However, when I build, start, and visit my app (on localhost), I get the following error in my console:
GET https://localhost:3009/services/my.js net::ERR_ABORTED 404 (Not Found)
It appears my app is trying to locate that module via the URL, rather than the code tree.
Is there something I need to configure differently with my setup to make this work? Do I need a separate entry point with Webpack? Suggestions welcomed. Thanks.
Have to include the file extension.
import MyService from './services/my.js';
https://github.com/ChrisWong979/using-import-statement-inside-script-tag
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
I'm using Browserify to access a Node module from an index.html file (hosted on Google App Engine)
I import the module in a "main.js" file, as I see is the standard in the Browserify documentation, as follows:
var request = require('request');
var fs = require('fs');
I then bundle this up into a bundle.js file using the following command:
browserify main.js -o bundle.js
This successfully produces the required bundle.js file. I then include this at the top of the header in my index.html as follows:
<HEAD>
<script src="/scripts/bundle.js"></script>
<script src="/scripts/util/loader.js"></script>
<!-- More scripts below here -->
A script within the body of index.html then makes a call to a function within loader.js which uses the line
request('api.my-url.com/world').pipe(fs.createWriteStream('/resources/myMap.json'));
Which I use to attempt to create a file containing the contents of the response. However, when I deploy this on GAE, and access index.html, I am greeted by the error message:
loader.js:15 Uncaught ReferenceError: request is not defined
at loadWorld (loader.js:15)
at Object.create ((index):55)
If I try and move the request() call up into the script in index.html I get the same problem, but if I move the line into main.js, I no longer get this issue.
I assume this is down to a personal misunderstanding of Javascript, but I can't seem to figure out why the request object is not available in index.html after bundle.js has been included in index.html via a script tag.
Many thanks to anyone who can shed some light on the situation, thanks.
When you create a browserify bundle, it is intended to be the application's "entry-point". But it seems that here you have your entry-point in index.html, so what you want is to bundle a standalone library.
Browserify has an option called --standalone to do this, which generates a UMD bundle instead: https://github.com/substack/browserify-handbook#standalone
You invoke it in much the same way, but specify what name (in the global namespace) the UMD bundle should be given. Eg.
browserify foo.js --standalone mylib > bundle.js
Now when you include <script src="bundle.js"></script> in your html, subsequent scripts will have be able to reference the mylib object.
Here's an example of using the --standalone option:
https://github.com/joshwnj/react-visibility-sensor/tree/master/example-umd
https://github.com/joshwnj/react-visibility-sensor/blob/master/package.json#L9
Also, if you want something like request that can be used in the browser, https://www.npmjs.com/package/xhr has a very similar API.
I have angular-stripe.js in my project(not sure where it came from someone else included it) an excerpt of which is below
var Stripe = window.Stripe
module.exports = angular.module('angular-stripe', [
_dereq_('angular-assert-q-constructor')
])
.constant('Stripe', Stripe)
.provider('stripe', provider)
.name
when I include this file I get the below error
Error: Stripe must be available as window.Stripe
I downloaded angular-stripe in npm which gave me a structure like this
src/index.js has the same code in it as above and includes the other files in source with a require and when I include it I get this error
Error: [$injector:nomod] Module 'angular-stripe' is not available!
Can anyone see what I'm doing wrong or know how to properly include angular-stripe?
Update
I'm including one of the following scripts in my html like this
<!-- <script src="assets/libs/stripe/angular-stripe.js"></script> -->
<script src="assets/libs/stripe/index.js"></script>
I get the error for window.Stripe if I include angular-stripe.js and the error for the module not being available if I include index.js. I can see one or the other in chrome developer tools when I load the page. We are using grunt but in our gruntfile we don't include any files from node_modules we just use it to uglify and minify our static resources.
Update
When I include it like this
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="assets/libs/stripe/angular-stripe.js"></script>
it works, but when I minifiy it I get the below error
Error: [$injector:nomod] Module 'angular-stripe' is not available!
I think because it doesn't make that call to https://js.stripe.com(its not in the network data in chrome developer tools).
If I download the content of https://js.stripe.com/v2/ into a file stripe-v2.js and then include it like this
<script src="assets/libs/stripe/stripe-v2.js"></script>
<script src="assets/libs/stripe/angular-stripe.js"></script>
it works before minification but fails with the same module not available error when I try to use the minified js.
You're missing a reference to angular-stripe. The script either needs to be sourced in the HTML before your script is sourced.
<script src="scripts/angular-stripe.min.js">
<!-- source your script after this -->
Additionally, depending on whether you're using a build system (grunt, gulp, webpack, etc) that path would be included into the build instead, either from the bower_components or node_modules paths.
gulp.src([
'node_modules/angular-stripe/angular-stripe.js'
])
Note that both of those are examples, the paths may differ but they have to be set to suit your environment. Without it, the angular-stripe script won't be loaded and your script won't work.