I have very simple question that I couldnt figure out for days.
I have 2 .js files. One is for configuration. I need to call the data from default.js into app.js. But it gives
Uncaught SyntaxError: Unexpected identifier
I checked all online platforms to find a solution, tried all different combinations of export/import but could not find any solution.
//default.js
export default (config = {
apiKey: "enterYourApiKeyFromOpenWeather"
});
//app.js
import config from "./config/default";
I am using vscode and (import config from "./config/default";) line has underlined with underscores with space. I might need to install a package maybe.
If i write:
const config = require("./config/default");
I get this error:
app.js:2 Uncaught ReferenceError: require is not defined
You need to specify .js on your default.js import, since this is vanilla JS and not part of a build process (such as Gulp) or an express.js app per se.
In your app.js
import config from "./config/default.js";
When including your app.js in your script element, as mentioned by jro in the comments:
...did you set type=module on your script element – jro
You need to set type=module on your script AND your module, e.g.:
<script src="app.js" type="module">
<script src="config/default.js" type="module">
If you don't specify type=module you will run into Uncaught SyntaxError: Unexpected identifier again.
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
Error I'm dealing with in the browser:
Uncaught SyntaxError: Cannot use import statement outside a module VM87 app.js:1857
Uncaught SyntaxError: Unexpected identifier app.js:1857
#section('js')
<script type="module" src="js/app.js">
...
</script>
I'm trying to run a javascript function inside my dashboard view (dashboard.blade.php) in my Laravel function but when I load the page and inspect using Chrome tools I get the two errors I posted above.
I've tried various things that were "supposed" to fix it like adding type="module" to the script tag. As well as adding "type":"module" to my package.json file (https://pastebin.com/R3hf7Vh5).
What could be the cause of this error/issue and/or how do I go about debugging it?
I have a project that I'm using Webpack for, and I am trying to use the autocomplete feature of jQuery-UI. However, whenever I import jQuery-UI into my app.js file using `import 'jquery-ui/ui/widgets/autocomplete', it breaks jQuery and I get the error:
Uncaught ReferenceError: $ is not defined.
The problem was fixed when I changed import 'jquery-ui/ui/widgets/autocomplete into require(jquery-ui/ui/widgets/autocomplete) in my apps.js file (or index.js or whatever your entry file for Webpack is).
Again, I have no idea why this works, but it does, and I can't argue with that.
Thanks to https://stackoverflow.com/a/42465244/10757677 for the inspiration.
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 have a ngDraggable.js library in my node_modules folder which must be included as dependency as follows:
import draggable from 'ngDraggable';
ngDraggable.js doesn't have exports so I used the work around from some SO answer which I cannot find any more. It was suggested to use an index.js file withing the same folder, which would import ngDraggable.js and export it. For some reason this file was lost and I can't remember that 2 lines of code doing this:( I tried this, but it doesn't work at all:
import ngDraggable from './ngDraggable';
export default angular.module('ngDraggable', [ngDraggable]);
Error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {"default":{"default":{"_invokeQueue":[],"_configBlocks":[],"_runBlocks":[],"requires":[{}],"name":"ngDraggable"}}} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
http://errors.angularjs.org/1.6.1/ng/areq?p0=module&p1=not%20a%20function%2C%20got%20Object
at http://localhost:3000/index.js:17216:12
Where 'app' is the main module representing the application and "default" must the module that imports ngDraggable and exposes it for main module
I found the copy of missing file. Here's the code snippet
require('./ngDraggable.js');
module.exports = 'ngDraggable';
you can try
import * as draggable from 'ngDraggable';