I'm trying to run posenet off a python http server and encounter a syntax error in the camera.js file at this line.
import * as posenet from '#tensorflow-models/posenet';
The code is cloned from the GitHub repository: https://github.com/tensorflow/tfjs-models/tree/master/posenet/demos
I'm very new to javascript so any help will be much appreciated.
The import declartion itself is fine. I haven't seen that specific error, but it reads like the kind of error you'd get in an environment that supports dynamic import (import()) and you try to use a module script as though it were a non-module script. In a non-module script, import isn't a declaration, so the JavaScript engine (or whatever's parsing the script) assumes you're trying to use dynamic import (since unlike import declarations, you can use dynamic import in non-module scripts).
You haven't said how you're running this script, but be sure you're running it as a module, not as a non-module script:
In a browser, either import it from another module or run it via <script type="module" src="./your-file-name.js"></script>
In Node.js, be sure package.json has "type": "module" (or use .mjs instead of .js on your filename). Details here.
If using a bundler, be sure the bundler knows that the script where that declaration appears is a module script (how you do that will vary by bundler).
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
I read a lot about module and thought that i really understand it.
But later i had a simple example with two java script files:
1.js file:
import './2.js';
console.log('importing');
2.js:
console.log('exporting module');
const a = 10
export const b = [];
and it the html file it was declared:
<defer src="1.js">
Then when running the code i got the following Error:
uncaught syntax Error: Cannot use import statement outside of a module
Now i'm trying to understand, if i added a type="module" to the above brackets, is it the thing which make the 1.js to be a module?!? If the answer is yes, so what make 2.js a module and not just a script?
In addition does importing this way:
import './2.js'
will import the const b from 2.js or not? i know that it will print to console but i can't understand if const b will be imported or not and from an unclear reason when running the code in my browser i'm getting two erros:
1.Access to script at 'file:///C:/Users/Dor/Desktop/17-Modern-JS-Modules-Tooling/starter/script.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
2.GET file:///C:/Users/Dor/Desktop/17-Modern-JS-Modules-Tooling/starter/script.js net::ERR_FAILED
The differences between modules and scripts mostly come down to how it is loaded.
If you load something as a module then the rules for modules (in particular those of scope) apply to it, and it you can import and export inside it.
Using type="module" loads a resource as a module. Using import loads a resource as a module.
Your second problem is a duplicate of javascript modules and CORS
Javascirpt Modules work only via HTTP(s), not in local files
A JavaScript module encapsulates code into a useful unit that exports its capability/value. This makes it easier to see the broader scope, easier to find what you’re looking for and keeps related code close together. A normal web page usually loads JavaScript files via HTML script tags. That’s fine for small websites, but when developing large scale web applications, a more robust organization and the loader is needed. A module loader lets an application load dependencies easily by specifying a string that identifies the JavaScript module’s name.
Modules can load each other and use special directives export and import to interchange functionality, call functions of one module from another one:
export keyword labels variables and functions that should be accessible from outside the current module.
import allows the import of functionality from other modules.
The vbery first step to use a module is to create one, which is done with the help of the export keyword. We export all the variables and functions in the module so they are available for use in other files.
Example-
//export this file
export function hi(shyam) {
return `Hello, ${shyam}!`;
}
The next step is to use the module in our program by the import statement. We import the module in the document and use its variables and functions, without having to redefine them.
Example-
<script type="module">
//import the JavaScript module from the file
import {hi} from './hi.js';
//use the hi() function, defined in the module
document.body.innerHTML = hi('Keshav');
</script>
I have a js file called project specific js.js and in that file I want to import another js file for general js called logic.js in the js folder
import 'js/logic.js';
in devtools when I run the html that imports project specific js i get
Uncaught SyntaxError: Cannot use import statement outside a module
issue fixed it turns out because I wasn't running a localhost for some reason you cant import other js files except modules like react. now I am running localhost and in the script tag importing projectSpecificJs.js i have type set to module so :<script type="module" src="projectSpeceficJs.js></script>"
Just for further information:
import 'file.js'
Is only for nodejs / module html attribute
Also here's some quick info related to the topic:
The whole concept behind using the “import” statement instead of “require” in Node.js is to shift from the CommonJS module system to the ECMAScript Module System. Reference
I was out of the loop when JavaScript got all fancy - I'm used to a <script src="https://somecdn/stuff.js"></script>, unsure about the package.json file, and have almost no experience with module packaging.
Sometimes I can move from a <script src="..." to import {functions} from 'https://somecdn/stuff.mjs'; without an issue. But other times it doesn't work.
Can everything be loaded through the new import statement, or are some scripts so module-unfriendly that I shouldn't bother?
To make it easier
I'm only on latest Chrome
My main script has the module tag: <script type="module" src="js/main.js"></script>
Successfully moved from script tag to import:
import {clear, del, get, keys, set} from 'https://cdn.jsdelivr.net/npm/idb-keyval#3/dist/idb-keyval.mjs';
But when I try to migrate
<script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/3.0.0-alpha.6/dexie.js"></script>
it throws
Uncaught SyntaxError: The requested module 'https://cdnjs.cloudflare.com/ajax/libs/dexie/3.0.0-alpha.6/dexie.js' does not provide an export named 'default'
I'm assuming the "mjs" isn't the issue, as long as everything is being served as the right JS mimetype.
You can only import things from files that export them.
https://cdnjs.cloudflare.com/ajax/libs/dexie/3.0.0-alpha.6/dexie.js seems to only be exporting anything (by assigning to module.exports) when running in an environment where module is defined (i.e. Node).
When run in the browser, it just adds Dexie to the global object, without exporting anything.
I'm trying to use import and export to create modules and it's not working.
I added https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js to the index.html header and tried to import a js file and get an error message saying SyntaxError: import declarations may only appear at top level of a module. What can I possibly be doing wrong?
I know I can use require.js but rather use import and export.
HTML
script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js"></script
JS File
import Mymodule from './modules/mymodule';
Babel cannot perform client-side transpiling of modules, or rather it is not universally supported by browsers. In fact, unless you use a plugin, Babel will transform import into require().
If I run the following code:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script defer type="text/babel" data-presets="es2015">
import Mymod from './modules/module';
Mymod();
</script>
</head>
I get the following error:
Uncaught ReferenceError: require is not defined
From Babel Docs:
Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side. See setup build systems for more information.
Most people choose a pre-compiled module bundler like Webpack or Rollup.
If you really want to perform this client-side, use RequireJS with Babel run via a plugin, though you may need to use AMD syntax.
Native browser support for ES6 modules is still in early stages. But to my knowledge there isn't a preset/plugin available yet for Babel to tell it not to transform import/export statements.
The scripts that babel-standalone translates execute by default in global scope, so any symbols defined by them are automatically available to every other module. From that perspective, you don't need import/export statements in your modules.
However, you might be trying to maintain source files that can be used both by babel-standalone (e.g. for quick test environments, feature demonstrations, etc) and via bundlers such as webpack. In that case, you need to keep the import and export statements there for compatibility.
One way to make it work is to add extra symbols into the global scope that cause the import and export code that babel generates to have no effect (rather than causing an error as usually occurs). For example, export statements are compiled into code that looks like this:
Object.defineProperty (exports, "__esModule", {
value: true
});
exports.default = MyDefaultExportedClass;
This fails if there is no existing object called "exports". So give it one: I just give it a copy of the window object so anything interesting that gets defined is still accessible:
<script>
// this must run before any babel-compiled modules, so should probably
// be the first script in your page
window.exports = window;
import statements are translated to calls to require(). The result (or properties extracted from it) is assigned to the variable used as the identifier in the import statement. There's a little bit of complication around default imports, which are different depending on whether or not the result of require() contains the property __esModule. If it doesn't, things are easier (but then you can't support having both default and named exports in the same module ... if you need to do this, look at the code babel produces and figure out how to make it work).
So, we need a working version of require(). We can provide one by giving a static translation of module name to exported symbol/symbols. For example, in a demo page for a React component, I have the following implementation:
function require (module) {
if (module === "react") return React;
if (module === "react-dom") return ReactDOM;
}
For a module returning multiple symbols, you'd just return an object containing the symbols as properties.
This way, a statement like
`import React from "react";`
translates to code that is effectively:
`React = React;`
which is roughly what we want.