Import classes into one main file shows error - javascript

I create many js classes and wanna import all of them to one main.js file where I want to invoke all of methods from these classes I need. Then, I want to use this main.js script in my index.html website file.
But shows me error like this: Failed to load resource: the server responded with a status of 404 (Not Found) in console for every method I want to use. I do not think that it's a problem with paths but I do not have any idea how to solve this.
main.js class
import NavigationAnimation from "./dom/navigation";
NavigationAnimation.stickyNav();
NavigationAnimation class
export default class NavigationAnimation {
//code
}
files structure is like this:
and my index.html is like that
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
</header>
<main>
</main>
</body>
<script type="module" src="js/main.js"></script>
</html>
Can anybody explain what is wrong?

The import statement isn't being transpiled so needs to be the full filename, including the extension, just like the call for main.js:
import NavigationAnimation from './dom/navigation.js' // <- add '.js' here
Also consider using the .mjs extension.

Related

how to Implement lit-element-bootstrap package in lit-lement

I would like to implement lit-element-bootstrap package in lit-element.
I am getting following error in console,
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec
//header.js
import { LitElement, html, css } from 'https://unpkg.com/#polymer/lit-element/lit-element.js?module';
import 'https://unpkg.com/lit-element-bootstrap#1.0.0-alpha.10/lit-element-bootstrap';
export class Header extends LitElement{
constructor() {
super();
}
render(){
return html`
<bs-alert primary>
<div>A simple primary alert—check it out!</div>
</bs-alert>
`;
}
}
customElements.define('header-element', Header);
//index.html
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#2.2.7/webcomponents-bundle.js"></script>
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#2.2.7/webcomponents-loader.js"></script>
<script type = "module" src = "../components/header.js"></script>
</head>
<body>
<header-element></header-element>
</body>
</html>
The URL you are trying to import from is getting redirected (302).
Current URL: https://unpkg.com/#polymer/lit-element/lit-element.js?module
Try changing it to:
https://unpkg.com/#polymer/lit-element#0.7.1/lit-element.js?module
Not sure if you should be loading it from this URL always, you can download the file and import it from your directory, rather than downloading it from this new URL. As this new URL can also change in future.
lit-element has been updated, the correct link would be https://unpkg.com/lit-element
or if you want to specify the extension
https://unpkg.com/lit-element/lit-element.js

Hassle with Javascript imports

Most of the things I read online are either outdated or not precise enough.
I'm gonna try to expose my problem.
I was writing a d3 project comprise of 2 files, whose structure is like following
main.html :
<!DOCTYPE html>
<html>
<head>
<script src="./d3/d3.js"></script>
<script src="./KMeans.js"></script>
</head>
<body>
<script type="text/javascript">
<!--Some code -->
var kmeans = new KMeans();
</script>
</body>
</html>
KMeans.js :
class KMeans {
//class related stuff
}
Everything was working super fine, until I decided to add a new class named "Clustering" in a new file to be inherited by KMeans. The code became like this one :
main.html :
<!DOCTYPE html>
<html>
<head>
<script src="./d3/d3.js"></script>
<script type="module" src="./KMeans.js"></script>
</head>
<body>
<script type="text/javascript">
<!--Some code -->
var kmeans = new KMeans();
</script>
</body>
</html>
KMeans.js :
import {Clustering} from './Clustering.js';
export class KMeans extends Clustering {
//class related stuff
}
Clustering.js :
export class Clustering {
}
And I keep getting this error :
ReferenceError: KMeans is not defined
For info, I'm not using Babel or any transpiler.
For the life of me, I can't understand a thing concerning the module management in JS. Could someone help me shed the light on what's wrong, please ?
After a script is defined as a module the variables defined in it are no longer made public. So, you have two options.
Option 1
You can make both Clustering and KMeans regular, non-module files, and remove all import and export statements. This will solve your issue.
Option 2
You can move the final script tag to its own file and make it a module itself (maybe you can keep in inline and still make it a module but I'm not sure about this), and remember to import KMeans if you want to use it.

ES6 modules in Chrome

I'm trying to use ES6 modules in Chrome. From all the examples I've looked at the following seems to be the right way to do it, but when I run it in Chrome's developer tools I get this error message...
uncaught SyntaxError: Unexpected token {
...highlighting the import statement in the module (script1.js, below) that's trying to import the module. I've seen a lot of references to problems like this but none of the suggestions to remedy the situation have worked for me. If you could see what I'm doing wrong, I'd sure appreciate your help...
here's the html...
<html>
<head>
<script src="lib1.js" type="module"></script>
<script src="script1.js"></script>
</head>
<body>
</body>
</html>
here's the module (lib1.js)...
export function doSomething() {
alert("in module lib1");
}
here's the script (script1.js) that tries to import the module...
import { doSomething } from "lib1.js";
doSomething();
EDIT:
After about an hour of head scratching and finding out that my answer (pre-edit) was downvoted I got to this:
lib.js:
function doSomething() {
console.log('in module lib');
}
export {doSomething};
script.js:
import { doSomething } from './lib.js';
doSomething();
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="module" src="script.js"></script>
</body>
</html>
lib.js, script.js, and index.html are on the same directory.
I added .js to import { doSomething } from './lib.js'; because it didn't work otherwise. According to Mozilla certain bundlers may permit or require the use of the extension for the module-name.
But this only worked on Firefox Quantum (ver. 62.0.3).
I enabled Experimental JavaScript on Chrome (ver. 70.0.3538.77) on:
chrome://flags/#enable-javascript-harmony
with no signs of success, but considering this worked on Firefox and that
this compatibility table shows both Chrome and Firefox being on the same level of compatibility is making me more confused so I'll probably end up asking a question regarding this whole thing.
Your code won't work in any browser. This is the right way to do it:
index.html
<html>
<head>
<script src="script.js" type="module"></script>
</head>
<body>
</body>
</html>
lib.js
export function doSomething() {
alert("in module lib1");
}
script.js
import { doSomething } from "./lib.js";
doSomething();
<script src="script.js" type="module"></script> is the key ... shame on error message in Chrome
Thanks, it finally works for me, though this was really confusing to me at first!
In case anybody's interested, there are two confusing things that finally made it for me after walking around in circles for a while:
You add type="module" to the <script> into which you import the module, not the module itself. In fact, there is only one <script> in the index.html file. The modules are then only imported from within the index.js file.
you need to import the file in the index.js with extension, such as:
import search from "./search.js";
I tried this on Firefox.

React component rendering on server-side, but client-side does not take over

I have an EJS view which is served up to a client:
index.ejs
<!DOCTYPE html>
<html>
<head>
<title>Example app</title>
</head>
<body>
<div id="reactApp">
<%- reactContent %>
</div>
</body>
<script src="__res__/client/main.bundle.js" />
</html>
main.bundle.js is the bundle that I create using browserify:
gulpfile.js (partial)
function bundle(filename) {
var bundler = browserify('./app/client/' + filename + '.js');
bundler.transform(babelify);
bundler.transform(reactify);
return bundler.bundle()
.pipe(source(filename + '.bundle.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('./dist/client'));
}
And the client is ultimately served this code:
main.js (bundled into main.bundle.js)
import React from 'react';
import {Login} from './auth/login.react';
React.render(React.createElement(Login), document.getElementById('reactApp'));
alert('hi');
However, even though the browser requests and recieves the main.bundle.js script, the client does not run the alert('hi'); line, which leads me to believe that the React.render line does not work either. I can affirm that Javascript is enabled, and my browser is the latest version of Chrome. My react component (Login) is as follows:
login.react.js
import React from 'react';
export class Login extends React.Component
{
handleClick() {
alert('Hello!');
}
render() {
console.log('rendered');
return (
<button onClick={this.handleClick}>This is a React component</button>
);
}
}
So, very simple. However, none of the alerts that you see in the code is ever run. The console.log('rendered'); line is never run on the server, but when I check the source code for my page, I get:
HTML output of my page
<!DOCTYPE html>
<html>
<head>
<title>Example app</title>
</head>
<body>
<div id="reactApp">
<button data-reactid=".2fqdv331erk" data-react-checksum="436409093">Lel fuck u</button>
</div>
</body>
<script src="__res__/client/main.bundle.js" />
</html>
Which means that the server correctly renders my react component, but why does the client script not work? The handleClick function never runs, my console.log lines never run, and neither does the alert lines. What is happening? The reactid and checksum are rendered correctly, shouldn't it be working? Shouldn't the React code on the client-side be smart enough to find the component and run correctly?
In your index.ejs, adding a closing element to your script tag should fix the issue: <script src="__res__/client/main.bundle.js"></script>
On a separate note, in my testing, I was getting an error in login.react.js when loading the page until I added default to the export line: export default class Login extends React.Component. Not sure if you will need to do the same.

Require js not loading jquery

I am a newbie to require js and faced this strange problem while creating our first :
Following is the home page :index.html
<html>
<head lang="en">
<meta charset="UTF-8">
<title>My first JS app using require</title>
</head>
<body>
<strong> This is my first require js app</strong>
<span id="output"></span>
</body>
<script data-main="js/main" src="js/lib/require.js"></script>
</html>
main.js is as follows :
require(['lib/jquery','app/message'],function($,message){
$('#output').html(message);
});
message.js is as follows :
define(function(){
return "Message from message.js";
});
When i run index.html on browser, $ in main.js comes as undefined. It does not produce any other error on console. Also all files are loaded successfully(confirmed from networks tab in browser).
If i change the main.js to be as follows :
require(['jquery','app/message'],function($,message){
$('#output').html(message);
});
And accordingly place jquery.js in appropriate directory, everything works fine.
I am not able to figure out the reason here. Can anybody please help here. Thanks in advance.

Categories

Resources