I am simply trying to access my common application variable/function from main.js file. using ES6- Import Export.
export var APP_NAME= "MyPOC"; - File main.js
Importing now in other javascript file- home.js,
import * as mainparams from './main.js';
console.log("variable_name:"+ mainparams.APP_NAME);
OR
import {APP_NAME} from './main.js';
console.log("variable_name:"+ APP_NAME);
Error: Uncaught SyntaxError: Cannot use import statement outside a module
The same thing is working while I am importing in my HTML page - index.html
<script type="module">
import {APP_NAME} from './js/main.js';
console.log("variable_name: "+ APP_NAME);
</script>
Result - Print in console - variable_name: MyPOC
What I did to fix the issue:
I checked the js file path, both js are in the same folder
Cross-check the cordova-plugin-whitelist package installed already
I tried to add "type" : "module" in package.json - Show me issue on terminal can't support ES6
Added <script type="module" src="main.js"></script> - Result: "unexpected token <"
None of the above action items working for me. I just want to normalize my code in different Javascript files for better code readability.
Using: HTML, CSS. JS, JQuery, Cordova, Phonegap Platform: Android, Browser
ES6- Java Script Import-Export
Cordova WhileList Plugin
Add module in package.json file or use module directly
Please help me out and thanks for your time to understand my issue.
Related
Is it possible to import, using only JavaScript ES6, modules from package like tippyjs (https://github.com/atomiks/tippyjs)?
I tried to locally install the package via npm and use the files like this:
import tippy from '../node_modules/tippy.js/dist/tippy.esm.js';
but the browser give me this error:
validation.ts:46 Uncaught ReferenceError: process is not defined
I have also tried, unsuccessfully, to "replicate" what the CDN is doing.
Thanks to what magic does the CDN work?
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
I know I am supposed to use CDNs, CDNs are great ecc., but I just want to have a single js module file in my HTML where all the import of my local files are:
<script type="module" src="js/modules.js"></script>
Can't rely only on CDNs.
What I am missing?
Please note that I'm not usign node.js, is just an html page and some JavaScript.
I don't think this can work with ES6 modules in the browser because of the way that tippy.js references popper. It uses the syntax import { createPopper, applyStyles } from '#popperjs/core'; which the browser can't understand. There's an issue about this on Github with regard to bootstrap, which has the same problem apparently.
I don't get the error you're getting by the way, I get the one in the issue. My HTML file is as below with tippy.js installed in the same folder:
<body>
<button id="myButton">My Button</button>
<script type="module">
import tippy from '../node_modules/tippy.js/dist/tippy.esm.js';
tippy('#myButton', {
content: 'Tooltip!',
});
</script>
</body>
Running this gives error:
Uncaught TypeError: Failed to resolve module specifier "#popperjs/core". Relative references must start with either "/", "./", or "../".
I don't think you can edit the import in tippy.js locally to fix this, either: popper's own imports then fail to work for me.
The workaround, as an answer to the issue says, is to use a module bundler like webpack if you want to create a .js file you can reference. This also begs the question of what the point is of an esm install if it can only be used from node.
I'm refreshing my old and low knowledge on VanillaJS using the latest best practices i found.
I recently did a tutorial on NodeJS doing API REST with ExpressJs and one with Socket IO.
Now I want to practice a little before going to REACTJS.
So I started a little project
I do one without NodeJs - just JS into HTML view - using Objects.
I want to use modules from Npm. I want to try Fakerjs but when i want to import it i have a 403.
The path is correct, no error.
So i'm wondering if it's possible without Nodejs to import modules when doing VanillaJs?
Am i doing it wrong ?
The structure of the project is :
js/
main.js
class/
node_modules/
index.html
Main.js:
'use strict'
//Importation of modules
import faker from '../node_modules/faker'
//Importation of Class Folder
import { Crypto } from "./class/crypto.class.js";
console.log(faker);
faker.locale = 'en_US';
I have this error in console:
GET http://crypto-market-js.local:8282/node_modules/faker/ net::ERR_ABORTED 403 (Forbidden)
If i write : import faker from 'faker' (like with node js but it's a require instead) i have this : Uncaught TypeError: Failed to resolve module specifier "faker". Relative references must start with either "/", "./", or "../".
If you could give me a hand on that plz :)
Trying to import with require is not supported without NodeJS, because require is a node-specific function. When trying to import modules into Vanilla JS, my recommendation is to first link to ths script with the <script> html tag, and then add another script with import faker from 'faker'
Hope that clarifies your issue.
I installed a few libraries, like toastr. In app.js file I imported that:
import 'toastr/build/toastr.min.js';
and compiled as:
npm run dev
Of course, I included an app file into app.blade view.
I tried using this library:
<script type="text/javascript">
$(function(){
toastr.success('Have fun storming the castle!', 'Miracle Max Says')
});
</script>
But I have this error in my console:
Uncaught ReferenceError: toastr is not defined
I know that I have included this script by <script> but I want to use app.js. How can I solve my problem?
I am trying to export node js modules to use in JavaScript. This is what I have done.
-Installed esm in node.
in my node file I did like this:
require = require("esm")(module/*, options*/);
export function Myjs(name, surname){console.log(name, surname)};
This does not give error.
In my js file I did:
1- import { Myjs } from '/javascripts/sockets/bases.js'; This gives error as "Uncaught SyntaxError: Cannot use import statement outside a module". I have been reading topics regarding this error, and it suggests that I should include "type: module" while including the file. But I do not include node js files as scripts on html.??
2- I try to import dynamically like this:
import('/javascripts/sockets/bases.js')
.then((module) => {
module.Myjs("bola", "carro");
});
This gives error if detects require() in the file and it gives error "require is not defined" or any node js module that js does not recognize.??
What I'm trying to achieve is: Based on an event on js file trigger the function (Myjs()) I'm trying to import. How could achieve this? I tried babel and I wasn't successful. Thanks
I have a class called "Snake" written in the file "Snake.js",
another file in the same directory is called "Game.js".
The Snake class has the export identifier: export class Snake{....}
I'm trying to import the "Snake" class in the "Game.js" file by writing the following code at the top of "Game.js" file:
import Snake from "./Snake.js";
Which gives the following error: Uncaught SyntaxError: Unexpected identifier
This code works in Intellij Webstorm IDE but does not in Netbeans8.2 . I have tried various ways of importing the class but none of them work.
This fixed it:
Put <script src="Game.js" type="module"></script> in the header and ignore the netbeans error on type="module".