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
Related
Let me start out by saying that I have very little experience with HTML, javascript and overall website creation and hosting, so sorry in advance if the information I am providing is lacking.
I am trying to make a website by using a 3d object from three.js, however, nothing is loading in the 'live server' (when I upload the entire website to Cpanel), however, when I use visual studio code to run it through my local server (through the command npm run dev) the website is showing as intended. I have screenshotted the pages:
correct page
incorrect page
When I open the element inspect on the broken page, I get the following error through the console:
Failed to load module script: Expected a JavaScript module script but the server responded with a
MIME type of "text/css". Strict MIME type checking is enforced for
module scripts per HTML spec.
and
Uncaught SyntaxError: Cannot use import statement outside a module
i have the following code in my script.js:
import './style.css'
import * as THREE from '../node_modules/three/build/three.module.js'
import { OrbitControls } from '../node_modules/three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from '../node_modules/three/examples/jsm/loaders/GLTFLoader.js'
import { HemisphereLight, Sphere, SRGB8_ALPHA8_ASTC_12x12_Format, sRGBEncoding, Texture, TextureEncoding } from '../node_modules/three/build/three.module.js'
import gsap from '../node_modules/gsap/all.js'
var gltfLoader = new GLTFLoader()
let tl = gsap.timeline()
var diamond = null
I am also using this to call the script in the index.html, however, I am uncertain if this is the correct way of calling the script.
<script type=module src="script.js"></script>
How would I be able to fix this? any help would be appreciated!
No.
Understand that the browser import functionality is very different than that of Node, or development with a bundler like Webpack. In browser imports, scripts have to be of type module (thus causing the cannot use import statement out of module error) <script type="module" ... (with the quotes!). You also need to reference an import file starting with ./, ../, or / (which you already are doing). Finally, you may only import JavaScript files, not CSS.
You have two options:
Use a bundler like Webpack to compile your files into a single one (and remove the import statements)
(preferred) Remove import './style.css' and add <link rel="stylesheet" href="./style.css" type="text/css" /> in your HTML <head>
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
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
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