I am a bit new to website hosting. I am currently running a locally hosted page that runs with webpack. I am running this server with react as well. Thus far when I required the usage of something such as JQuery, React, or other plugins, I would add them to my server through the terminal in a manner such as:
npm install react-dom --save-dev
This has worked for everything thus far, but I have run into JQuery keyframes. Normally JQuery and JQuery keyframes can be used by adding these script tags to your base html file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='/path/to/jquery.keyframes[.min].js'></script>
Of these two, I cannot load in jquery keyframes via a plugin, so I thought that my only solution was to add the the jquery.keyframes.js file to my folders. I added this file to my main folder and added the script tag to my index.html:
<script src='.../jquery.keyframes.js'></script>
This is the part where I am getting confused. I began by getting the issue:
Refused to execute script from 'http://localhost:3000/jquery.keyframes.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
I read up on this issue, and eventually I was able to "fix" this issue by changing my script tag to:
<script src='.../jquery.keyframes.js' type="text/js"></script>
I'm really not sure if this is a proper fix. I am certainly still uncertain about my issue because when I try to use the command:
$.keyframe.define(aKeyframe);
I get the error:
Cannot read property 'define' of undefined
This implies that I still haven't added the file correctly, or maybe I haven't imported properly into my JavaScript file. The only solutions I can see are:
1) The jquery.keyframes.js file should be in node_modules somewhere due to it being an extension of jquery which is there.
2) There was another way to fix the MIME type error.
3) I should have some import statement like:
import $.keyframe from "../jquery.keyframe.js";
At the top of my JavaScript file.
Thank you in in advance for reading and submitting to this question.
Related
I'm attempting to import a 3rd party SDK into a simple project with a very simple setup. I have an index.html file that looks like this:
<!DOCTYPE html>
<html lang="en-us">
<body>
<h1>SDK Test</h1>
<script type="module" src="/js/main.js"></script>
</body>
</html>
I have a main.js file that looks like this:
import MyAlgoConnect from '/#randlabs/myalgo-connect';
console.log("It Worked!");
I also have the #randlabs directory in my project running on an Apache server, so that in Apache's htdocs directory, it looks like this:
But I always get an error in my browser console that says:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
I originally tried using <script src="/js/main.js"></script> in the index.html file, but it returned with the error:
Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:3:1)
There's a whole bunch of different files and additional folders within the myalgo-connect folder, so when I try going to my local apache server at 127.0.0.1:8080/#randlabs/myalgo-connect in my browser it just returns an html document showing the contents of the folder, which is why I assume I'm getting an error in the first place.
According to the SDK's documentation, I think I'm following its Quick Start steps exactly: https://connect.myalgo.com/docs/getting-started/quickstart
I've been searching the internet for days trying to figure out why I can't get this to work. I've also asked a question on the associated discord server but haven't had a response. My experience with web development is very limited, so this is probably just an issue of inexperience on my part, but I cannot figure out what I'm doing wrong. If anyone can shed some light on this, I would be very grateful!
I recommend to setup basic node processor which then compiles application into js file.
https://vuejs.org/guide/quick-start.html
https://reactjs.org/docs/create-a-new-react-app.html
https://nextjs.org/docs/getting-started
I recommend also to setup the TypeScript as it helps a lot with data types and recommendations.
This is example how you can use the MyAlgoConnect by Randlabs (React): https://github.com/Diatomix/Diatomix-frontend/blob/dff9a531ceac4341a3780c004f2bc2206b255ed4/src/components/Authenticate.tsx#L163
Example how to use Algorand with Vue.js : https://github.com/scholtz/wallet
I am working through the Odin Project and am stuck on the first lesson where we must build a webapp using webpack. I followed the tutorials here and hereon webpack's website, and I was able to get them to work. However, when I try to set up my own files to build my own project, I can't get CSS to load or a function in my index.js file.
I have the same directory style set up, and have even tried using the exact same index.js file they use in the tutorial.
I expect to get: a webpage to load that says "hello webpack" in red text.
Instead, I get this error: when I run $npx webpack, it says:
ERROR in ./src/style.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .hello{
| color: red;
| }
# ./src/index.js 1:0-21
Upon googling the error, I found a stack overflow article and I tried renaming my rules array to 'loaders' in my .config file as this article suggests, but I still get the same error.
“You may need an appropriate loader to handle this file type” with Webpack and CSS
Also weird is the fact that some of the code in my index.js file works, and some does not. To elaborate, my console.log and alert works just fine after I run $npx webpack and load the page. However, they function that is supposed to add "hello webpack" to the DOM, does not, as evidence by the fact that nothing shows up at all. The page itself is blank.
My index.js code:
import './style.css';
console.log("console works");
alert("alert works");
function component() {
const element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
return element;
}
document.body.appendChild(component());
You will notice that it is nearly the exact same as the asset management index.js file from the webpack tutorial. I did this purposely to have as little variance as possible between my stuff and the tutorial.
I don't know if it is too much information, but a link to the whole repo as it currently is set up can be found here
Update:
I re-setup the file from the ground up and noticed that the CSS stopped working when I went out of my way to change the bundle.js link they had in their example to main.js. While I double-checked to make sure that I made the correct corresponding changes to output in my config file, making this change had the sum total outcome of not allowing my CSS to work for some reason.
What this reason is? I have no idea, and would be very interested to learn why this happened if someone has a suggestion
But on the offchance that one of my fellow Odin learners googles this problem, I kept the example's bundle.js instead of changing to main.js as my output script and it worked fine.
I'm going to update my github now so my original github link will likely be out of date going forward.
Going through your GitHub repo commit history, I see that at some point you named your Webpack configuration file weback.config.js instead of webpack.config.js (the p was missing). This was likely the source of the problem, as Webpack couldn't find a loader configuration for the .css file you're importing.
I'm trying to host a website, and I use a .wasm file with .js scripts created by the wasm-pack tool.
I tested the project locally with npm and node.js and everything worked fine.
But Then I hosted it on a raspberry (apache2), and when I try to access it, I get in the following error:
Failed to load module script: The server responded with a non-JavaScript MIME type of "application/wasm". Strict MIME type checking is enforced for module scripts per HTML spec.
details
There are multiple files, but here is the idea:
my index.html loads the module bootstrap.js
// bootstrap.js content
import("./index.js").catch(e => console.error("Error importing `index.js`:", e));
my main code is in the index.js, which calls test_wasm_bg.js
And finally, test_wasm_bg.js loads the wasm file with this line:
// test_wasm_bg.js first line
import * as wasm from './test_wasm_bg.wasm';
Where is the problem?
What is the right way to load a web assembly file?
I finally found what is the right way to load a wasm application in a wasm-bindgen project!
In fact, everything was on this page
When you compile the project without wanting to run it with a bundler, you have to run wasm-pack build with a --target flag.
wasm-pack build --release --target web.
This creates a .js file (pkg/test_wasm.js in my example) with everything you need to load the wasm-application.
And then this is how you use the functions created by wasm-bindgen (index.js):
import init from './pkg/test_wasm.js';
import {ex_function, ex_Struct ...} from '../pkg/test_wasm.js';
function run {
// use the function ex_function1 here
}
init().then(run)
You include your index.js in your HTML file
<script type="module" src="./index.js"></script>
And then it work's !
Edit:
Now that's I understand the javascript ecosystem a bit more, I cab try to explain what I understand:
There are many ways to do imports in js, here is a list :
https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm
You don't need to know much about that, except that the default target of wasm-pack is a node style ecmascript module. This import will work in node.js, but not directly in the browser. So in node, you can import a function from a wasm file directly, like so:
import {ex_function} from "./test.wasm"
But these styles of import don't work in the browser right now. Maybe it will be possible in the future
But for now, your browser only knows about js modules. So if you try to import a .wasm file directly in the browser, it will throw a mime type error because it doesn't know how to deal with webassembly files.
The tool you use to go from ecmascipt modules (with a lot of nmp packages for example) to a single js file is called a web-bundler (webpack, rollup, snowpack ...). If you work on a big project with npm, you probably need one. Otherwise, the "--target web" will say to wasm-bindgen to instantiate the wasm module the right way (look at the pkg/test_wasm.js)
Stack: Webpack 4.16.0, Node8, Vuejs2
I am seeing the below error, whilst serving my Vuejs application.
Error: Loading chunk 4 failed.
(missing: https://myapp.com/ui.chunk.bundle.js)
at HTMLScriptElement.s (demo:1)
This error is consistent across builds, the actual file itself is accesible via the URL.
I am using code splitting via import() and the initial app loads fine, but then the flow will break when another chunk is loaded, it can also vary between ui.chunk.bundle.js & vendors~ui.chunk.bundle.js.
When building for production, a new error is shown, but it seems related as also linked to loading modules:
demo:1 TypeError: Cannot read property 'call' of undefined
at o (demo:1)
at Object.349 (ui.chunk.bundle.js:1)
at o (demo:1)
at o.t (demo:1)
I have tried upgrading webpack and babel, but am at a loss as to what this could be down to as it was working perfectly fine before.
When running the application on my local machine and not Google App Engine, everything seems fine.
How the app is loaded:
It is loaded into other website via a script tag, so domainA.com runs the script tag which calls myapp.com/js and the flow begins, i.e the app loads various chunks based on some logic.
When accessing the webpack generated index page bundle at myapp.com everything loads correctly.
Please help!
That is rather deep and surely not easily fixed in two steps, best you create a new project using cli, if convenient with recommended presets, and if it still persist check the npm packages you installed and make sure none of them are discontinued and are up-to-date at least according to your version of vue.
Its might be due to "webpack.config.js" where you can just try with updating output object
module.exports = {
output: {
chunkFilename: '[id].chunk.[chunkhash].js',
}
};
Hope it should work!
This might be a cross site scripting problem.
Make sure that myapp.com sets the correct headers.
On myapp.com, set this header:
Access-Control-Allow-Origin: https://domainA.com
You should also make sure, that your script tag has async set to false:
<script async="false" …
I would like to use valid-url to validate some URLs using JSFiddle so that I can share it later. I tried adding a link to the index.js file from Github (https://raw.githubusercontent.com/ogt/valid-url/master/index.js) but Fiddle says:
Github is not a CDN, using it as such will cause issues with loading the file. Do you still with to it?
And obviously when I try to use it, an error is thrown:
Refused to execute script from [...] because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
So, is there any way to use npm packages in a JSFiddle? Or any workaround to achieve this?
Use unpkg.com. They allow you to load any npm module from the browser like a CDN.
Using UNPKG you can load any file from any package following this pattern
https://unpkg.com/:package#:version/:file
So, if you add
https://unpkg.com/valid-url#1.0.9/
Then you'll get this (as shown in the next image)
If you specify the index.js file
https://unpkg.com/valid-url#1.0.9/index.js
Then you'll get this (as shown in the next image)
You'll then be able to use it in your fiddles by adding the Resources you want to.
If you want to import something from npm on the frontend, you can use https://www.skypack.dev/ which converts npm modules to ES Modules, example:
<script type="module">
// Use 'https://cdn.skypack.dev/' + 'npm package name' + '#version its optional'
import random from 'https://cdn.skypack.dev/canvas-sketch-util#1.10.0/random'
console.log('A random number: ', random.range(1,10))
</script>
Here's a JSFiddle using SkyDev to load an npm module.
There are many cases that https://unpkg.com/ wouldn't handle that https://www.skypack.dev/ can, so I recommend using it whenever it's on the front-end
I wrote a slightly more complete answer here about this:
How can I use a CommonJS module on JSFiddle?