This import of a folder (#terra-money/terra.js/)
import {LCDClient, Coin} from "#terra-money/terra.js"
works without problems when running the file with node.js
But when I want to use the same expression in a web app I get the error message
"Uncaught TypeError: Failed to resolve module specifier "#terra-money/terra.js". Relative references must start with either "/", "./", or "../"."
... so the problem seems to be that the import does not point to a single .js-file, right? Is there a way to make this work?
Related
Everytime I try to import a module I get this error Failed to resolve module specifier "mongodb". Relative references must start with either "/", "./", or "../". and I cant seem to find the answer anywhere. Im just trying to import mongodb import { mongoClient } from "mongodb";. Is there any solution to this?
I tried doing what the error says or tried using require keyword but nothing works. I cant use any module
Not sure if this will help, I was having the same exact problem and I was just trying to run this all from JS files getting loaded into a static html page. Needed to setup an Express.JS server run with NodeJS and managed by PM2 that creates the connection and makes all the calls when certain endpoints are reached.
import fetch from 'node-fetch';
... works perfectly fine in node.js, except that I am obliged to name the file iss.mjs instead of iss.js, otherwise it throws an error.
After attaching the mjs file to html (<script type="module" src="./iss.mjs"></script>), I get an error in browser's console:
Error resolving module specifier “node-fetch”. Relative module specifiers must start with “./”, “../” or “/”
rewriting to: import fetch from './node_modules/node-fetch/src/index.js'; still works okay in node.js, but now browser complains:
Error resolving module specifier “data-uri-to-buffer”. Relative module specifiers must start with “./”, “../” or “/”.
which is I guess something internal in the structure of imported module? (Nothing in my code.)
The only working advise I found is to omit import from node-fetch completely in case of browser testing. That works fine then.
Is there some smart technique programmers use to test the same code (with things like fetch) in node.js & browser easily, without fiddling with deleting import lines?
Putting import inside if (typeof window === "undefined") {} fails obviously.
I am trying out Laravel 9 with Vite, but without(!) a frontend framework (like Vue or React).
I am trying to make a reusable js module that I could use/load in different Blade templates.
So I created a file 'menu-btn-toggle.js' in 'resources/js/components/utilities'.
export class MenuBtnToggle
{
constructor() {
console.log('MenuBtnToggle');
}
}
I then created a 'utilities.js' file in 'resources/js/components'.
import './utilities/menu-btn-toggle';
I then updated the 'app.js' file in 'resources/js'
import './bootstrap';
import './components/utilities';
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
So far, this seems to be working (?). Atleast, i think so. Vite is not giving me any errors so far (yay!)
But then I try to import the module in a blade template, but I can't get it to work.
So at the bottom of my blade template, I added this:
<script type="module">
import MenuBtnToggle from 'menu-btn-toggle';
new MenuBtnToggle();
</script>
But this gives me the following error:
Uncaught TypeError: Error resolving module specifier “menu-btn-toggle”. Relative module specifiers must start with “./”, “../” or “/”.
But when I add one of the examples, the error changes to:
Loading module from “[local_dev_url]/menu-btn-toggle” was blocked because of a disallowed MIME type (“text/html”).
as it isn't be able to find the module. It returns a 404.
Is it even possible do to want I want without a frontend framework? Or am I not seeing something obvious? I have experience with php, unfortunately not (enough) with Laravel and Vite.
I was stuck into almost same situation where we are not able to use import statement inside our blade files using Vite. We commonly get
Uncaught TypeError: Error resolving module specifier
“menu-btn-toggle”. Relative module specifiers must start with “./”,
“../” or “/”.
or We get 404 Blocked error nearly same as
Loading module from “[local_dev_url]/menu-btn-toggle” was blocked
because of a disallowed MIME type (“text/html”).
When importing external npm packages or modules, we need to put them in windows object just like you did above for Alpine
window.Alpine = Alpine;
But for your specific case problem you must do following
1)Inside menu-btn-toggle.js
export class MenuBtnToggle
{
constructor() {
console.log('MenuBtnToggle');
}
}
2)Inside utilities.js
import {MenuBtnToggle} from "./utilities/menu-btn-toggle";
window.MenuBtnToggle = MenuBtnToggle;
And then finally inside your app.js
import './components/utilities';
Now inside your .blade file, there is no need to import the MenuBtnToggle
instead just do it like
new MenuBtnToggle();
No need to use import MenuBtnToggle from 'menu-btn-toggle'; in blade.
Important thing is to import your app.js file properly inside .blade file through vite
#vite(['resources/css/app.css','resources/js/app.js'])
And it works. It has worked when reproducing same files/setup as yours.
I am trying to import inside my main.js file a function from the module mapbox-gl-draw-rotate-mode with the following statement: import RotateMode from 'mapbox-gl-draw-rotate-mode'.
I get this error:
Uncaught TypeError: Failed to resolve module specifier mapbox-gl-draw-rotate-mode. Relative references must start with either /, ./, or ../. when import in javascript
What I tried to do next is to point the import to the js file of the module. The previous error disappear, but since mapbox-gl-draw-rotate-mode has other dependencies (i.e. #turf), I get back a relative reference error.
I previously created a new project with npm, and then installed the module with npm install.
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.