I'm using Laravel and in my bootstrap.js file I have
window.ProgressBar = require('progressbar.js');
and then I require the bootstrap.js file into app.js
require('./bootstrap');
And I use webpack.mix.js to compile it
mix.js('resources/assets/js/app.js', 'public/js')
If I attempt to access progressbar.js inside of app.js it works perfectly.
However, If I attempt to use it outside of app.js in script tag that comes after app.js on my pages, ProgressBar is undefined.
How can I access ProgressBar outside of my app.js but keep it imported via app.js ?
Example on index.blade.php
<script src="app.js" defer></script>
<script>
const progress = new ProgressBar; //undefined...
</script>
I had defer on the script tag and for some reason that stopped it from working.
Solution:
<script src="app.js" defer></script>
change to
<script src="app.js"></script>
I think, that Webpack hides ProgressBar from you, even if you have ProgressBar assigned to the window. Because you know, Webpack thinks that the bundle has all the code of your app. Solution? Not to bundle it! Instead use minified version of ProgressBar and just load it like in good old times. It is perfectly OK, few nanoseconds better or worse, not noticeable.
Related
I included my external Javascript files in my index.html file, and for whatever reason it doesn't load, and no error is thrown.
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
I used the react-script-tag library.
I created a component that used the react-script-tag to include all the js files, and imported them in other components that needs them.
I am using Laravel for a project, with Laravel Mix compiling my JS and SCSS.
On one of the pages I have a portfolio filter, I want to use Metafizzy's Isotope as it has worked perfect in previous projects.
I included jQuery, followed by the isotope package locally, and finally my main.js file, all of which are before the closing body tag.
I'm using the exact same javascript code from this Codepen Demo in my main.js file: https://codepen.io/desandro/pen/JEojz
However I get the following error in my console:
Uncaught TypeError: $(...).isotope is not a function
I have tried placing my main.js file before and after the isotope package:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
I have also tried installing via npm and adding the following to my main.js file:
var Isotope = require('isotope-layout');
No matter what I do, I get the same error and I'm not sure how to get this working with my Laravel project. Any help would be appreciated.
Looks like I forgot to wrap it in $(document).ready(function() {...})
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 downloaded this d3 JavaScript project from GitHub https://github.com/mcaule/d3-timeseries, and then I created an HTML page (index.html) to run the project. This is index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./d3_timeseries.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<script type="text/javascript" src="./d3_timeseries.js"></script>
<script type="text/javascript" src="https://mcaule.github.io/d3-timeseries/dist/create-example-data.js"></script>
<body>
<div id="chart"></div>
<script>
var data = createRandomData(80,[0,1000],0.01)
var chart = d3_timeseries()
.addSerie(data,{x:'date',y:'n',diff:'n3'},{interpolate:'monotone',color:"#333"})
.width(820)
chart('#chart')
</script>
</body>
</html>
I have a problem in d3_timeseries.js with this two errors:
NOTE: I don't want to use min files
The exact file that you have linked, d3_timeseries.js, is not written in such a way that it can be used, without processing, in a browser.
Its very first line import * as d3 from "d3"; will fail, no matter what browser, because "d3" is not a URL that can be evaluated correctly from a browser context. It is not a relative URL, it is not a
It looks like it is intended to be utilized by webpack or some other script bundler. If you used this in a webpack context to bundle your code, it would load "d3" from node_modules.
I know that you said that you "don't want to use min files", so your options are either compile your own bundle or just use the min files in the /dist folder.
I'm assuming you used the file in the src directory. This isn't a regular javascript file, it's node. Luckily the author is buidling what looks to be a web safe version in the dist folder. That version is minified, uglified, and ran through babel.
You rarely want to include files from src or files that aren't uglified. That will cause your webpage to load extra white space data that it does not need.
In the Jangaroo tutorial using Maven it states"include a Jangaroo application script generated by the Maven build process". This should be created in src/main/webapp/index.html, it isn't. Can anyone explain this, or what in the pox.xml is missing?
Thanks
The misunderstanding here is that actually, the Jangaroo application script is generated, not the index.html file.
The idea is that your index.html usually contains custom HTML, e.g. loading your CSS or setting up some context. The only Jangaroo-specific things your HTML code has to do is load the generated joo/jangaroo-application.js script and run the application's main class, using its fully-qualified name (in this example, HelloWorld is in the top-level package):
<script type="text/javascript"
src="joo/jangaroo-application.js"></script>
<script type="text/javascript">
joo.classLoader.run("HelloWorld");
</script>
https://github.com/CoreMedia/jangaroo-tools/wiki/Tutorial-~-Deployment