I have problems, importing a module to my index.js file. When I start debugging, I always get the error "Uncaught SyntaxError: Unexpected identifier"
My index.html file:
.
.
.
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/defines.js"></script>
<script type="text/javascript" src="js/jgestures.js"></script>
<script type="text/javascript" src="js/mdb.js"></script>
<script type="module" src="index.js"></script>
<script type="module" src="js/global.js"></script>
</html>
The module I want to import "modals.js":
class Modals{
let b = 0;
}
export {Modals};
First line of my index.js file (where the error occures):
import {Modals} from './modals.js'
Does anyone has an idea what's wrong with my code?
Looks like you are not using ES6 classes properly. Also, keep in mind not all browsers work with ES6, it might be better to use functions or a transpiler like Babel.
I'd recommend reviewing the docs to get a refresher, but here is a code snippet of what you'd need to do for your example to work with ES6 classes
Your modals.js file would become:
class Modals{
constructor (b) {
this.b = b;
}
}
export {Modals};
Your index.js:
import {Modals} from './modals.js';
let m = new Modals('something')
console.log('m', m)
Your index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="module" src="index.js"></script>
</body>
</html>
Good luck!
I would suggest first to check the browser support. ES6 modules have been around for a while now but it may be the case that your browser version does not support this syntax.
Then, you would need a transpiler like Babel to use this type of statements.
Related
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.
I have a following code and get "TypeError: Error resolving module specifier: solc/wrapper" error. I followed these instructions https://github.com/ethereum/solc-js#browser-usage to put the code together.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://solc-bin.ethereum.org/bin/list.js"></script>
<script type="text/javascript" src="https://solc-bin.ethereum.org/bin/soljson-v0.5.1+commit.c8a2cb62.js"></script>
<script type="module" defer>
import * as wrapper from 'solc/wrapper';
</script>
</head>
<body>
</body>
</html>
Please any suggestions where is the problem? Thank you.
I don't know what the problem was, since I've never seen that ES6 import syntax before, but I fixed it by specifying exactly where to import from:
<!DOCTYPE html>
<html>
<head>
<script type="module" defer>
// debugging
document.getElementById("runninate").addEventListener("click", function(e){var code=document.getElementById('miniconsole').value; console.log('> ' + code); console.log(eval(code))})
import * as wrapper from 'https://ethereum.github.io/solc-bin/bin/soljson-v0.5.0-nightly.2018.10.15+commit.b965fd6e.js';
const solc = wrapper(window.Module);
</script>
</head>
<body>
<input id="miniconsole" />
<button id="runninate">Runninate!</button>
</body>
</html>
I'm not confident enough to say that the syntax was wrong, but considering that they had a typo in the Node.JS example I doubt they tested this.
Note that this fails to import properly because the thing that's being imported doesn't quite work.
I have to install solc npm package
npm install solc
in order to make the code running.
I am very much new to React. The following is my first script.
But I am getting the following error.
Uncaught SyntaxError: Unexpected token <
I have even searched through google/SO. But I couldn't get it to work.
<!DOCTYPE html>
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
const name = 'John doe'
const handle = '#john_doe'
function NameComponent (props){
return <h1>{props.name}</h1>;//The problem is here using JSX syntax
}
function HandleComponent(props){
return <h3>{props.handle}</h3>;
}
function App(){
return (
<div id="container">
<NameComponent name={name}/>
<HandleComponent handle={handle}/>
</div>
);
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>
To make your code work as it is currently, you just need to add type="text/babel" to the script tag that contains the code that you intend to transpile using babel.
From the babel docs:
When loaded in a browser, #babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx
Working code with just this change
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
const name = 'John doe'
const handle = '#john_doe'
function NameComponent (props){
return <h1>{props.name}</h1>;//The problem is here using JSX syntax
}
function HandleComponent(props){
return <h3>{props.handle}</h3>;
}
function App(){
return (
<div id="container">
<NameComponent name={name}/>
<HandleComponent handle={handle}/>
</div>
);
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>
Though this works, using create-react-app or codesandbox is generally much simpler for beginners.
In order to have a bare minimum setup with react (with no compilation step), you need either to use React.createElement syntax instead of JSX tags (check https://reactjs.org/docs/add-react-to-a-website.html), or use something like htm
Personally I would just use Create React App to help with the initial setup. This will configure babel (among a lot of other things) for you and do the proper JSX transpilation. Although in the future it will be good for you to know exactly whats under the hood of create-react-app and maybe make your own setup.
Simply install babel using npm with this command:
npm install --save #babel/standalone
Also include this line in your HTML file:
<script type="text/babel" src="like_button.js"></script>
Example code:
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script type="text/babel" src="like_button.js"></script>
if you have script tag in your index.html give it a type="text/babel"
If that didn't fix it try:
Removing the homepage line entirely from the package.json in the react app directory fixed it somehow.
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.
When I'm editing the below example HTML page in Visual Studio Code (borrowed from Facebook's React tutorial and slightly edited), if I write any Javascript code in the script block, it is not syntax highlighted. But if I change the script block type to "text/javascript" then the syntax highlighting works. But then any React-y/JSX code doesn't work as it is wired to work through Babel.
Is there any way to have the script tag "type" attribute set to "text/babel" and at the same time have proper syntax highlighting in Visual Studio Code?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<script src="https://npmcdn.com/react#15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://npmcdn.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/remarkable#1.6.2/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
ReactDOM.render(
<div>Hello world!</div>,
document.getElementById('content')
);
</script>
</body>
</html>
I found a solution to this now.
Open up: (VS code home dir)\resources\app\extensions\html\syntaxes\html.json, and edit the regex for the script tag. That fixed the issue for me.
Well this is a workaround, probably will be better to change this in a post build process, but I found an easy way to do it with this new feature TagHelpers which will help to replace the javascript value by babel
So add a file TagHelpers/ScriptTagHelper.cs
[HtmlTargetElement("script", Attributes = "to_babel")]
public class ScriptTagHelper : TagHelper
{
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.Attributes.SetAttribute("type", "text/babel");
}
}
In your page Index.cshtml
<script type="text/javascript" to_babel>
And dont forget to import TagHelpers in _ViewImports.cshtml or in your Index.cshtml
#using app1
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#addTagHelper *, app1
And voila! this render as babel.