I'm learning React, and I have a php project set up like this:
In the head of index.php I load:
<script type="text/javascript" src="js/libs/react.js"></script>
<script type="text/javascript" src="js/libs/react-dom.js"></script>
<script type="text/javascript" src="js/libs/browser.min.js"></script>
and at the bottom:
<script type="text/babel" src="jsx/index.jsx"></script>
<script>
window.onload=function(){
site.init();
}</script>
</script>
I'm not doing any transpiling. Everything runs fine on Apache+Firefox.
Then I wanted to add some transitions, like images fading in and out when clicking a button instead of just switching. So I:
1- downloaded react transition from here: https://github.com/reactjs/react-transition-group
2- added the content of its src folder to js, which now looks like this:
js/
../<some vanilla.js files>
../libs/
../libs/react.js
../libs/react-dom.js
../libs/browser.min.js
../libs/react-transition-group/
......./react-transition-group/index.js
......./react-transition-group/CSSTransitionGroup.js
......./react-transition-group/CSSTransitionGroup.js
......./react-transition-group/TransitionGroup.js
3- loaded index.js like this:
Now, on Chrome, I get this error when I run the site:
index.js:1 Uncaught SyntaxError: Unexpected token import
On Firefox:
SyntaxError: import declarations may only appear at top level of a module index.js:1
Any idea about what am I missing?
Thanks
to use import, you should not use the babel polyfill, but transpile the code with babel. Therefore, it's highly encouraged to use webpack in your react project with a babel plugin.
This blog might help you further with setting up a react/webpack/babel project: https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel
As Andy Ray stated here http://blog.andrewray.me/webpack-when-to-use-and-why, it looks like I was doing things the old way; the wheel has been reinvented and the php-webpacker-of-sorts I use seems to start to lag behind.
It seems that I was unfortunately lucky to use a set of libraries that posed no conflict when imported just as <script src=library.js>, and react-transition dispelled that illusion. Following dejakob advice, I've integrated transpiling in the process and, at least for the moment, things seem to work seamlessly again.
Thanks
Related
I have a problem that confused me!
I am creating a desktop app based on javascript and HTML/CSS in the frontend and using tauri for providing Rust as the backend. the Tauri just provides backend and some works to app be able for running on desktop, and we can use what we prefer in frontend. so I use jquery as js library. it works with some js package managers like npm or yarn. I use yarn for it.
WHAT IS THE PROBLEM:
In a piece of code, I need to import some Tauri modules into my script.js file.
but, there is some problem that I try to resolve them but they made me confused.
this is my script tags in the main HTML file:
<script src="../node_modules/#fortawesome/fontawesome-free/js/all.js"></script>
<script src="./app/Jquery.js"></script>
<script src="./chart/apexcharts.js"></script>
<script src="./script.js"></script>
the script.js is my main js file.
WHICH METHODS I TRIED:
so in script.js I use import statement as below:
import { appWindow } from "../node_modules/#tauri-apps/api/window.ts";
const childwin = appWindow.open("new.html");
so the first error will show itself now:
SyntaxError: Unexpected token '{'. import call expects exactly one argument.
I don't know why this error, but I removed {s:
SyntaxError: Unexpected identifier 'appWindow'. import call expects exactly one argument.
Oh God! what is it?! I search it, somebody says use type attribute in script tag. OK:
<script src="./script.js" type="module"></script>
result:
TypeError: 'text/html' is not a valid JavaScript MIME type.
damn! so I search it and some others say: oh, do you use type attribute?? go and remove it :(
and now I'm confused and I'm thankful if somebody help me :)
EDIT:
A friend said the problem is with the .ts file I am importing because the browser (or web engine) cannot support it. but I also try importing .js file and it leads to the same error too:
SyntaxError: Unexpected identifier 'loadReport'. import call expects exactly one argument.
browser can't read typescripts .ts file. you must import the compiled version
For a personal project, I'm trying to use ES6 import to write cleaner code. As first test, I'm writing an object that should generate a menu. The whole code is working when I'm directly loading up the class, yet when using the import and export in ES6, it gives an "Uncaught SyntaxError: Unexpected identifier" error on the import line in main.js
I've got the following files:
assets/js/menu.module.js
'use strict';
export default class Menu
{ ... }
assets/js/main.js
import Menu from "./menu.module.js";
window.addEventListener('DOMContentLoaded', () => {
const menu = new Menu();
});
index.html
<script type="module" src="assets/js/menu.module.js"></script>
<script src="assets/js/main.js">
Note that these are only the relevant lines of code.
Using the <script type="module"> line or not did not seem to make any difference for me. I do have both the chrome flags for experimental and ES6 Modules enabled, as without them I received an error about import not being defined.
Chrome version would be 62, so according to different sources (including google's update log itself) this should be working, even without the flags.
Can anyone enlighten me as of why this is not working, and what I am doing wrong?
As #Bergi mentioned in the comment, adding type="module" to the main.js import line in the HTML solved the issue. All is working now. I.e.
<script type="module" src="assets/js/main.js">
Thanks to all of you who responded and tried to help.
From what I can see you are trying to load the file menu.module.js while it's actually named menu.js.
PS: From what I recall you could also drop the .js from the import statement.
you can use any module bundler, one of the simple flexible solutions is parcel 2, it's beta right now but you can play with it.
- npm i -D parcel#next
- parcel index.html
I apologize for the simple question, but I'm pretty new to web development and JavaScript.
I want to import a package I've installed using npm, specifically shopify-buy following the guide here: https://shopify.github.io/js-buy-sdk/
The package is in my node_modules folder and I'm trying to import it into a JavaScript document using import Client from 'shopify-buy';
When I try to load everything up in Chrome, I get an error on the import line
Uncaught SyntaxError: Unexpected identifier
The Firefox error is a bit different: import declarations may only appear at top level
What am I doing wrong?
Edit:
The import line is the first line in my JavaScript file. And my HTML file is properly linked to the JS file (I think).
shopify.js
// Functions for SHOPIFY
import Client from 'shopify-buy';
const client = Client.buildClient({
domain: 'xxxxx.myshopify.com',
storefrontAccessToken: 'xxxxx'
});
index.html
<script src="javascript/shopify.js"></script>
If you want to use npm modules via the syntax, like import sth from "something" for browsers, you'd need to set up a module bundler and ES6 compiler, such as Webpack and Babel. You'd need to google them and find tutorials for setting up them accordingly.
An easy way to use the SDK seems to be using the CDN, since it's already been built for browsers to understand. Something like:
index.html
<script src="http://sdks.shopifycdn.com/js-buy-sdk/v1/latest/index.umd.min.js"></script>
<script src="javascript/shopify.js"></script>
shopify.js
const client = ShopifyBuy.buildClient({
domain: 'your-shop-name.myshopify.com',
storefrontAccessToken: 'your-storefront-access-token'
});
console.log(client);
JavaScript Modules can only be run in module-mode scripts. Change your HTML to the following:
<script type="module" src="javascript/shopify.js"></script>
For a personal project, I'm trying to use ES6 import to write cleaner code. As first test, I'm writing an object that should generate a menu. The whole code is working when I'm directly loading up the class, yet when using the import and export in ES6, it gives an "Uncaught SyntaxError: Unexpected identifier" error on the import line in main.js
I've got the following files:
assets/js/menu.module.js
'use strict';
export default class Menu
{ ... }
assets/js/main.js
import Menu from "./menu.module.js";
window.addEventListener('DOMContentLoaded', () => {
const menu = new Menu();
});
index.html
<script type="module" src="assets/js/menu.module.js"></script>
<script src="assets/js/main.js">
Note that these are only the relevant lines of code.
Using the <script type="module"> line or not did not seem to make any difference for me. I do have both the chrome flags for experimental and ES6 Modules enabled, as without them I received an error about import not being defined.
Chrome version would be 62, so according to different sources (including google's update log itself) this should be working, even without the flags.
Can anyone enlighten me as of why this is not working, and what I am doing wrong?
As #Bergi mentioned in the comment, adding type="module" to the main.js import line in the HTML solved the issue. All is working now. I.e.
<script type="module" src="assets/js/main.js">
Thanks to all of you who responded and tried to help.
From what I can see you are trying to load the file menu.module.js while it's actually named menu.js.
PS: From what I recall you could also drop the .js from the import statement.
you can use any module bundler, one of the simple flexible solutions is parcel 2, it's beta right now but you can play with it.
- npm i -D parcel#next
- parcel index.html
According to getting started I created a file called main.js:
export class q {
constructor() {
this.es6 = 'yay';
}
}
In my html file got:
<script src="system.js"></script>
<script>
SystemJS.import('main.js')
.then(null,(err)=>console.error(err))
</script>
When loading the page I get:
Error: Unable to dynamically transpile ES module A loader plugin
needs to be configured via SystemJS.config({ transpiler:
'transpiler-module' }). Instantiating http://localhost:8080/main.js
Loading main.js
at transpile (system.js:3650)
at system.js:3433 SystemJS.import.then # index.html:17
The system.js file I got from here: https://raw.githubusercontent.com/systemjs/systemjs/master/dist/system.src.js
Running static content from http-server (node) with cache killer plugin installed in Chrome.
Not sure what this is but I'll continue reading the docs and maybe find the solution. A bit sloppy for it to break at "getting started" though.
update
I guess this has something to do with it:
https://github.com/jspm/jspm-cli/issues/1312
But nothing there about how to make the error go away. Code works in Chrome and will be transpiled by babel, only part I need system.js for during development is to load the module.
update
https://youtu.be/5P04OK6KlXA?t=3m3s
Looks like the "getting started" should mention that for the example to work one needs traceur as well.
After some searching I found the traceur.js here: http://google.github.io/traceur-compiler/bin/traceur.js
Changed the html to:
<script src="traceur.js"></script>
<script src="system.js"></script>
<script>
SystemJS.import('./main.js')
.then(null,(err)=>console.error(err))
</script>
And it still the same error.
update
Installed systemjs and traceur with npm and added them to the html:
<script src="./node_modules/traceur/bin/traceur.js"></script>
<script src="./node_modules/systemjs/dist/system.js"></script>
Same error. I'm done with this and revert to requirejs for developing, r.js with uglify for distribution.
Was looking into this after reading something about rollup and how compiled code can be smaller when it only imports what you need instead of the entire file.