I've tried reading over the "guide" on their website, and none of it makes sense to me. I thought it'd be the same thing as JQuery, but apparently I'm missing something.
I have this appended in my html document (where it's appropriate of course):
<script src="respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="app.js"></script>
<script type="text/babel" src="app_2.js"></script>
As you might have guessed, I'm using Adobe Dreamweaver to develop my webpage.
That is what the first script element is for. The second being for JQuery.
After running an "example" for ReactJS with JSX, I found the three following script elements in the html document. That, to me, tells me that all I had to do in order to get it working is link those in as well.
Long story short: it didn't work. I tested it on Firefox and Chrome.
The thing I'm still scratching my head over is the error I receive when trying to view the remote files for the ReactJS-related files (on DW):
Not found: package "filename%version"
Where filename is the name of the JS file and version is the version (I'm assuming).
This only occurs for those files and not for JQuery. DW still let's me know that the file is remote and cannot be altered, but I get nothing for the other remote files.
What gives?
I was able to get it working after some scrambling, reading, and random attempts.
Turns out I was getting in my own way.
Because of the tutorial I was learning react from, I had assumed I was required to always create a react object and react-dom object.
After removing those two declarations from my js file, I was able to then see the expected results in my browser.
The only thing I can think of as to why those declarations would cause an issue is either because one of the files I import already does so (which has to happen as I don't declare the "React" or "React-dom" instances anymore but am still able to use them) or it is no longer required explicitly. The tutorial I went through was a bit dated.
I'm gonna have so much fun with this!
Related
Recently I get to implement Stytch to a React based application. Implementation is pretty simple and strait forward. However got into an error or bug which become a big road block for me.
I tried Googling to find solution, if not even I find similar so that I can debug myself but unfortunately didn't find any. And the big surprise if Stytch GitHub repo link provided on NPM is invalid too.
The problem I'm facing is, it says:
Stytch has not been loaded.
Make sure the script tag exists in the document head:
<script src="https://js.stytch.com/stytch.js"></script>
If using Next.js be sure to load Stytch using the beforeInteractive strategy in pages/_app.jsx:
import Script from 'next/script';
<Script src="https://js.stytch.com/stytch.js" strategy="beforeInteractive" />
I'm following the Stytch doc here: https://stytch.com/docs/sdks/javascript-sdk/email-magic-links/methods
And created a Sample app here: https://codesandbox.io/s/react-stytch-login-auth-xmf5r4
here is the link
just install #stytch/stytch-react using npm.
in the code box you can add through dependencies tab.
just make sure you include the script tag in the public/index.html.
Previously I was using managed hosting but have recently been testing a VPS server setup running CentOs with Virtualmin.
I have moved over a website which works absolutely fine on the managed hosting, but moving it to the VPS gives me multiple JS errors. For some reason, it doesn't seem to be loading any of the JS scripts. When I replace the scripts with CDN links, it all works fine again.
I've checked the directory permissions and they're set the same as the previous hosting, I can also access and read each file using website.com/js/bootstrap.min.js for example. The only difference is the JS directory itself is "Forbidden". I'm not sure if that makes a difference when I can read the actual files?
My question is, why could this be happening if JS runs similar to HTML and works fine when using the CDN scripts? Also, what is the meaning of the random IDs contained in the JS SRC scripts right before text/javascript shown below, could this be the cause?
<script src="js/jquery-3.2.1.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/bootstrap.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/jquery.slicknav.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/owl.carousel.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/jquery.magnific-popup.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/circle-progress.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/mixitup.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/instafeed.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/main.js" type="7fb652456240e11add396d8d-text/javascript"></script>
<script src="js/rocket-loader.min.js" data-cf-settings="7fb652456240e11add396d8d-|49" defer></script></body>
</html>
It seems that you didn't put JQuery back on your new hosting.
There are a few clues:
'unexpected token': jquery uses $
'jQuery is not defined'
It could also be that you put jQuery in a different location than where it was on your managed hosting. It could also be that it's still pointing to your old hosting.
If that doesn't work, try removing the text before text/javascript (although I doubt that's the issue, considering it worked on your old hosting). Also, Javascript's mime type is application/javascript.
Try checking those. That should fix your problem.
I can also access and read each file using
website.com/js/bootstrap.min.js for example. The only difference is
the JS directory itself is "Forbidden".
This doesn't make sense. Either the folder is forbidden or it is not.
If you can access that folder through the browser url, then clearly it is not forbidden. If you get a 'Forbidden' message in your browser, then obviously the folder is forbidden and you found the problem.
My question is, why could this be happening if JS runs similar to HTML
and works fine when using the CDN scripts?
Go to the network tab in your browser and check the http status that you receive in the browser for the resource that you request, i.e. jQuery in this case. The error that bootstrap throws is probably just a consequence of the fact that jQuery isn't loaded. I guess there must be a dependency.
If not, in the absolute worst case you can load the unminified version of the script that throws, and debug the problem based on the original source code.
The reason why it works for a CDN is obviously because these domains allow you public access to the resource it hosts, if not you wouldn't be able to get it, and it is sort of the point of using a CDN.
Btw, you should use a CDN, there is no clear argument as for why you shouldn't for these common libs.
Also, what is the meaning of the random IDs contained in the JS SRC
scripts right before text/javascript shown below, could this be the
cause?
I assume that you mean in the type, not in the src attribute of the html.
This is your code:
<script src="js/jquery-3.2.1.min.js" type="7fb652456240e11add396d8d-text/javascript"></script>
This doesn't make sense. If anything, they look like generated hashes which often happen when you load chunks of Javascript asynchronously.
It must be framework related, although I have no idea what framework you're currently using. I don't know if you're using SSR, CSR, templating library, bundling library etc.
But it should be clear that something generates this string for you. You need to check your template, what generates your template, and either way, remove the type altogether if you can. It's really useless in that spot.
Issue description
I would like to have Visual Studio Code to hint autocompletion and provide documentation for a JavaScript project which includes libraries a module in a separate HTML file.
Context
I am using P5JS. It assumes we include the P5JS library and our script via the <script src="…"> tag in an HTML file. Autocompletion and documentation work after installing the p5.vscode extension. So, no problem here.
I am also using ml-matrix, which I'm including in the HTML via the <script src="…"> tag. The library constructors and methods can be accessed via mlMatrix.. (I figured this by toying around in the console, and I wouldn't know otherwise how to find out I need to prepend mlMatrix. to all functions in the library.)
index.html
<head>
<!-- script src="…" P5JS libraries -->
<script src="./node_modules/ml-matrix/matrix.umd.js"></script>
</head>
<body>
<script src="./script.js"></script>
</body>
script.js
A = mlMatrix.Matrix.eye(3) // no autocompletion or docs, code runs
console.log(A)
Workaround
Adding import * as mlMatrix from "ml-matrix" to the beginning of script.js makes autocompletion and documentation work, but the overall project does not run. So, I have to comment and uncomment the first line every time I save and preview my edits on the browser.
script.js
import * as mlMatrix from "ml-matrix"
A = mlMatrix.Matrix.eye(3) // autocompletion and docs work, code doesn't run
console.log(A)
When loading the HTML, the browser complains with script.js:1 Uncaught SyntaxError: Cannot use import statement outside a module..
Desiderata
I'd like to be able to save and preview my project while having a working autocompletion and documentation hint from VSC.
Debugging
After reading a few sections of David Flanagan's «JavaScript: The Definitive Guide», I started figuring out what's going on. So, I'm reporting here my current understanding.
JavaScript, or rather ECMAScript, used to be a scripting language.
Scripts loaded with <script src="…"> are "global" scripts, living on the current page, injecting vars and functions in the global scope (or window object).
In order to support proper software engineering relying on modularity, modules were introduced in 2015, in ECMAScript 6, or ES6 in short. To import a module in an HTML document one can use <script type="module" src="…">.
Now, to import a module in a JS file, the file itself needs to be a module. So, dealing with an actual script myself, I cannot do such a thing.
Even by <script src="…"> a module, it won't inject itself in the main namespace. It will create a whatever name where it will store everything it exports. So, now we are at the point where we need to instruct the IDE that a module has been loaded on the HTML side with a specific name and it's used in a JS script.
So, we have now a more articulate question.
Issue re-statement
How to inform VSC that a module has been loaded through the HTML page?
I believe a probable answer will include some custom jsconfig.json to be created. Right now I have zero clues about how to do this.
Another solution would be using some specific ///<reference path="…"/> at the beginning of the JS file. Also for this I have no specific knowledge.
I'm trying to build a firefox web-extension and I'd like to import another module (for code reuse) into the popup script. I've looked around and read that import might work, but eslint says its a reserved keyword.
I also read where someone recommended to import the second script straight onto the html page like so:
<script src="./js/utils/Listeners.js" type="module"></script>
<script src="./js/popup.js"></script>
I tried it just like this but didn't get anywhere. Also new to Javascript. Better at more traditionally OOP languages.
Is there a way to import a module into another using web-extensions?
I've been able to solve the problem using jQuery to load scripts/modules, though further testing might be required.
credit to this question on loading jQuery into a firefox webextension.
I have a Three.js page that I'd like to update from r42 to r55. A fair amount of the API has changed in that time.
Some of these changes were straightforward, but now I'm stuck on some gnarly details of the JSONLoader, for which the format has changed from JavaScript to JSON and possibly other changes are causing it to fail. An undefined value is tripping up the API somewhere internally, and I can't tell what the issue is because the top few layers of the stack are in minified code.
What technique works best for getting the full source here? Are there source maps available?
I tried swapping the three.min.js file for Three.js, however the minified file contains many other files too. I don't like the idea of having to load all those files into my workspace and reference each of them just to debug a single issue for a minute.
Is there a single file that contains the non-minified equivalent of three.min.js? Is there another approach that would work just as well?
EDIT So I'm cloning the three.js repo to get the source files, and will end up with a bunch of HTML like this:
<script type="text/javascript" src="three.js/src/Three.js"></script>
<script type="text/javascript" src="three.js/src/core/Object3D.js"></script>
<script type="text/javascript" src="three.js/src/core/Geometry.js"></script>
...
The repo is ~200MB and is taking an age to clone. There's no way to do partial clones with Git, apparently.
There has to be an easier way!
Actually that is what I do when I want to debug my code. Swap out three.min.js and put in three.js. The minified version contains the same code.
The non-minified version of the file is under version control:
https://github.com/mrdoob/three.js/tree/master/build
use non-minified builds
look at the commented out debugging points already present in three.js (i.e. console.log)
'use strict' if not already
add more console.log/debugs