Error when using "import" statement in Javascript - javascript

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.

Related

Can't import ES6 module

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.

Uncaught SyntaxError: Unexpected token < with React

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.

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.

AngularJS error while using ngAudio

I am trying to play audio using AngualarJs
My HTML CODE:
<!doctype HTML>
<html>
<head>
</head>
<body ng-app="test" ng-controller="audioTest">
<button ng-click="playSound()"></button>
<script src="javascripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="javascripts/angular.audio.js"></script>
<script src="app.js"></script>
</body>
</html>
My app.js Code:
var app = angular.module("test",['ngAudio']);
var audio = app.controller("audioTest",function($scope,ngAudio){
$scope.playSound = function(){
$scope.audio = ngAudio.load("abc.wav");
$scope.audio.play();
}
});
While i load page i got error in console which lead me to
Error Details
The error you're reporting is due to an error resolving angular.audio.js script that can't be found by the name javascripts/angular.audio.js
I made a working fiddle: http://jsfiddle.net/en8x1nny/
This fiddle imports the script that the original demo from ngAudio is using.
The full path for that script is: http://danielstern.github.io/ngAudio/angular.audio.js.
You can download it and add it to your javascripts directory. Be sure not to use it by the URL mentioned above because github is not a CDN intended to serve scripts.
If you previously installed ngAudio by bower, the script should be in:
your_project_path/bower_components/angular-audio/app/angular.audio.js

can't covert css to rtl using javascript library

I am beginner in JavaScript and I am trying to use rtlcss library to conver css files from ltr to rtl. I am using this code but it displays 2 errors:
Uncaught SyntaxError: Illegal return statement
Uncaught ReferenceError: require is not defined
My code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>convert css to rtl</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/rtlcss/src/rtlcss.js"></script>
</head>
<body>
<textarea id="source_textarea" placeholder="place your css" ></textarea>
<button id="convert_btn">Convert</button>
<textarea id="result_textarea"></textarea>
<script>
(function myfunction() {
rtlcss = require('rtlcss');
var output = rtlcss.process('css/main.css');
console.log(output);
$("#result_textarea").val(output);
})();
</script>
</body>
</html>
I believe i am doing something wrong, it's not library problem.. so anyone can help?
This is a node package, as #haakym mentioned, you should be using NPM (node package manager). For more details on how to install and use NPM, follow the Getting Started guide.
If you want to use it in the browser, you can use Browserify; it lets you require('modules') in the browser by bundling up all of your dependencies.
After you have node/npm setup complete, do the following:
From the command line, run these commands to install RTLCSS and Browserify
npm install rtlcss
npm install -g browserify
Create a file with the following contents and save it as main.js :
rtlcss = require('rtlcss');
Run this command to create a browser usable bundle:
browserify main.js -o bundle.js
Include the resulting script in your page:
<script src="bundle.js"></script>
That's all, Now you'll be able to use it in the browser:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>convert css to rtl</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="bundle.js"></script>
</head>
<body>
<textarea id="source_textarea" placeholder="place your css" ></textarea>
<button id="convert_btn">Convert</button>
<textarea id="result_textarea"></textarea>
<script>
$('button').click(function(){
var output = rtlcss.process($('#source_textarea').val());
$("#result_textarea").val(output);
});
</script>
</body>
</html>
Online Demo

Categories

Resources