i want to know how i can import the #metaplex/js module into a js file connected to the html. If i use the import statement i get an error saying "Import identifiers must start with ".", "./"" and things like this. For solanaWeb3 i had to add a script tag with a unpkg link as src and its working. Id like to know where can i find the same script src for #metaplex.js so i can use that too ;).
import { programs } from "#metaplex/js"
this is the import statement used and this is the error i get
Uncaught TypeError: Error during the resolution of the module identificator “#metaplex/js”. Module identificators must start with “./”, “../” o “/”.
You could try:
<script src="https://unpkg.com/#metaplex/js#latest/lib/index.iife.min.js">
</script>
Related
Coming back to some old project, I discover nothing was loading. Checking the console log I see the following:
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
In my script I got the following:
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three/build/three.module.js"
import { OBJLoader } from "https://cdn.skypack.dev/three/examples/jsm/loaders/OBJLoader.js"
import { FirstPersonControls } from "https://cdn.skypack.dev/three/examples/jsm/controls/FirstPersonControls.js"
I try to step back some versions and not until I reach 0.136.0 does this error go away. Has the way one imports three.js changed, or is this a bug?
Also, would there be some way of catching this at runtime? Like I get the latest version number from Skypack and try an import. If failed, automatically step back a decimal and try again.
Edit
#Mugen87 offers using importmap. I change my code with the following:
<script type="importmap">
{
"imports": {
"three": "https://cdn.skypack.dev/three/build/three.module.js",
"three/OBJLoader": "https://cdn.skypack.dev/three/examples/jsm/loaders/OBJLoader.js",
"three/FirstPersonControls": "https://cdn.skypack.dev/three/examples/jsm/controls/FirstPersonControls.js"
}
}
</script>
<script type="module">
import * as THREE from "three"
import { OBJLoader } from "three/OBJLoader"
import { FirstPersonControls } from "three/FirstPersonControls"
I get the following error:
Uncaught SyntaxError: The requested module '/-/three#v0.137.5-HJEdoVYPhjkiJWkt6XIa/dist=es2019,mode=raw/build/three.module.js' does not provide an export named 'default'
The CDN you're using (cdn.skypack.dev) does some re-exporting on their side, which is causing the problem.
The file you're referencing in your import isn't actually the three.js module, but a re-direct.
That file does an export * (which is fine), AND an export {default}, which is where the failure is occurring. Three.js does not have a default export.
Skypack is likely applying this redirect universally to all modules, so it's not that they necessarily KNOW this is happening, but they should definitely be testing their system before hosting a specific module...
Try changing your importmap to reference the following URL, and it should work:
https://cdn.skypack.dev/-/three#v0.137.5-HJEdoVYPhjkiJWkt6XIa/dist=es2019,mode=raw/build/three.module.js
Example
<!-- index.html -->
<script type="module">
import 'someModule'
</script>
TypeError: Error resolving module specifier: someModule
Uncaught TypeError: Failed to resolve module specifier "someModule". Relative references must start with either "/", "./", or "../".
Q:
Is it possible to catch this error?
Who dispatch this error?
Context
In this case, the dependency can be caught and resolved using the service worker.
<script type="module">
import '/someModule'
</script>
You are not importing it in right way as per the error log.
Valid module specifiers must match one of the following:
A full non-relative URL. As in, it doesn't throw an error when put through new URL(moduleSpecifier).
Starts with /.
Starts with ./.
Starts with ../.
Other specifiers are reserved for future-use, such as importing built-in modules.
Just try this code:
<script type="module">
import {someModule} from './someModule.js';
</script>
You cannot catch that error, unless you use some non-standard uncaught exception handler, like window.onerror in browser or process.setUncaughtExceptionHandler in Node.js.
Catching that error is impossible because import statements are allowed only outside of any blocks, in the module-global scope. Therefore, if you try to wrap the import into a try..catch, it will throw a SyntaxError.
Instead, you could use the dynamic import() syntax proposal, which can be called anywhere; and handle its promise rejection.
I can't use npm, not familiar with the details, currently trying to learn 'redux'. What can be the problem here?
When executing this code, I'm getting a "Uncaught ReferenceError: createStore is not defined
at ind.js:5"
Below you can see the code snippet that I have a problem with:
function playlist(state=[]){
return state;
}
const store = createStore(playlist);
console.log(store.getState());
And I have this script tag in HTML file's head tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>
And the js file's script tag in body's end:
<script type="text/javascript" src="./ind.js"></script>
Ok, I'm sorry my previous answer was unhelpful! As it says in the redux docs you need to import the createStore function before you can use it. That is easily done in Node.js, but without it you need to use the ES6 module. Although support for it is supposedly growing, I've still had plenty of trouble with it. This should be supported in Chrome and Edge. To get this to work on Firefox below version 60, go to about:config and change dom.moduleScripts.enabled to true.
Change your script tag to this:
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>
and add this as the first line of your code: import { createStore } from 'redux'
I'm confused about scopes in Javascript and how to get a global function recognized. On my page I have
<script src="base64.js"></script>
defined. Then in another file, I have
var xhr = new XMLHttpRequest;
...
var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');
alert(Base64.decode("abc"));
xhr.open("get", full + "myotherfile.js", true);
xhr.send()
The alert executes without a problem. However in the "mytoherfile.js" references to the Base64 class result in a RerefernceError. So at the top of my myotherfile.js I tried
import {Base64} from 'base64';
but this results in a "Uncaught SyntaxError: Unexpected token {" error. What's the right way to include get my global function recognized in a JS file loaded through AJAX?
Edit: The remote loaded JS file is loaded using
this.worker = new Worker(xhrResponseText);
Scripts loaded in the main page are not available in web workers, you have to import them with importScripts not the import command
importScripts("base64.js");
In old-fashioned (non-module) javascript files, global variables are implied to be made on window. So in the first example, Base64.decode("abc") is the same as window.Base64.decode("abc"). In modules, however, this is not true. If you want to access a global variable on the window, it must be done explicitly.
In the module, try changing the reference to Base64 to window.Base64.
Sidenote: If the base64.js file works with a basic script tag import, then it will not work to import it as an es6 module like you have done (import {Base64} from 'base64';). You can read up more on how to import modules here!
Hope that helps!
Update
For clarity, here are a couple examples. Basically, what ever you put in the curly braces ({ Base64}) must be exported from the script being imported, not placed on the window.
<script src=".../base64.js"></script>
<script>
// both are accessible this way because this is NOT a module
// and global variables are assumed to be on the window.
console.log(Base64);
console.log(window.Base64);
</script>
<script type="module">
// Will not work:
// import { Base64 } from ".../base64.js
// import { window.Base64 } from ".../base64.js
// The same as importing view the script tag
// (not needed because the script tag already imported it)
// import ".../base64.js"
// the "global variable" is accessible on the window
console.log(window.Base64)
</script>
The issue is with the path you are referring to. Here are valid paths in type module.
// Supported:
import {foo} from 'https://jakearchibald.com/utils/bar.js';
import {foo} from '/utils/bar.js';
import {foo} from './bar.js';
import {foo} from '../bar.js';
// Not supported:
import {foo} from 'bar.js';
import {foo} from 'utils/bar.js';
Try referring to the path directly. something like this
import {addTextToBody} from '../../someFolder/someOtherfolder/utils.js';
here are valid pathName
Starts with ./ :- same folder
Starts with ../ :- Parent folder
Starts with ../../ :- above parentfolder
Lets say I import the following html file with
<link rel="import" href="somefile.html">
and the somefile.html looks like this:
<template>
<some-tags>...</some-tags>
</template>
<script type="module">
export default { some object }
</script>
Normally I would import a es6 module like so
import MyVariable from 'somefile.js'
but in this case I cannot point to the html file and I don't know how to import the module I imported through the link. Is that even possible or do I need to replace the export default with a global variable?
Module support in browsers is very new and being done in small bites. As far as I can tell from what specification we have for this so far, the only module specifiers currently supported are URLs that refer to a JavaScript resource. The export you've shown can't currently be imported. From that linked spec:
To resolve a module specifier given a script script and a JavaScript string specifier, perform the following steps. It will return either a URL record or failure.
Apply the URL parser to specifier. If the result is not failure, return the result.
If specifier does not start with the character U+002F SOLIDUS (/), the two-character sequence U+002E FULL STOP, U+002F SOLIDUS (./), or the three-character sequence U+002E FULL STOP, U+002E FULL STOP, U+002F SOLIDUS (../), return failure.
This restriction is in place so that in the future we can allow custom module loaders to give special meaning to "bare" import specifiers, like import "jquery" or import "web/crypto". For now any such imports will fail, instead of being treated as relative URLs.
Return the result of applying the URL parser to specifier with script's base URL as the base URL.
Instead, move that export into its own file and import it with a module specifier referring to the file.
You might extract the code into a another file, e.g. somefile.js :
export default {
//...
};
Then you can import that in your template:
<template>
<some-tags>...</some-tags>
</template>
<script type="module">
import somefile from "somefile.js";
//... Whatever
</script>
And in any other code... Note that you currently must use webpack or a similar system to convert your code to ES6. Javascript modules are not well supported yet.