My imports work fine within my javascript file, but they do not work when I start the webserver. I can access the functions of the imported module as expected, but the import statement itself fails when I boot up the nodejs server.
I added the following import statement without error to the top of a javascript class
import * as Ably from 'ably';
My HTML file has this at the end of the body tag
<script src="./app.js" type="module"></script>
I get the following error from inspect element (no errors in vscode)
Uncaught TypeError: Failed to resolve module specifier "ably". Relative references must start with either "/", "./", or "../".
I tried changing the file path
import * as Ably from './node_modules/ably/ably.js';
but this gave me 404 errors
GET http://localhost:3000/node_modules/ably/ably.js net::ERR_ABORTED 404 (Not Found)
Try using <script src="https://cdn.ably.com/lib/ably.min-1.js"></script> in HTML file
instead of import. Also, check this thread, looks similar to your problem Failed to resolve module
Related
I was able to use danfojs using
<script src="https://cdn.jsdelivr.net/npm/danfojs#1.1.2/lib/bundle.min.js"></script>
However, the .js file is too big (over 6MB) for production so I need some help with dead code elimination.
I read that webpack's tree-shaking is good for eliminating dead code
I therefore "npm install danfojs" per the official documentation.
In my html file, I tried to do a ES6 import
<script type="module">
import * as dfd from 'danfojs';
import { readCSV, DataFrame } from 'danfojs';
</script>
In Firefox, when I load the webpage, it throws an error of
Uncaught TypeError: Error resolving module specifier “danfojs”. Relative module specifiers must start with “./”, “../” or “/”.
Any help getting the import running OR doing dead code elimination in another way would be much appreciated.
The folder structure is like this, based on a flask project
root
node_modules
danfojs
app
templates
home
webpage.html
I have a minimal Sinatra app for testing out the Britecharts data visualization library (installed as a Node module) locally. I'm having trouble accessing the library files in my Sinatra views.
My public/js/chart.js has the following import:
import bar from './britecharts/node_modules/britecharts/dist/umd/bar.min.js';
The path to the file is valid (I can access it if I paste the path into the browser address bar). However in the dev console I get an error saying:
Uncaught SyntaxError: import not found: default
I then put brackets around the variable, as explained in this guide:
import { bar } from './britecharts/node_modules/britecharts/dist/umd/bar.min.js';
But then I get this error instead:
Uncaught SyntaxError: import not found: bar
Thanks for the help.
[EDIT 04.01.2022]: I've created a GitHub repo for the app:
https://github.com/fullstackplus/britecharts-demo
Unpack the Britecharts library files plus dependencies
Put them in a folder local to your app
Import them in your HTML as below:
<div class="bar-container"></div>
<script src="/js/britecharts/node_modules/britecharts/dist/umd/bar.min.js"></script>
<script src="/js/britecharts/node_modules/d3/dist/d3.min.js"></script>
<script src="/js/chart.js"></script>
This is my js:
import React from './node_modules/react';
import ReactDOM from './node_modules/react-dom';
let thePage = React.createElement(
'main',
null,
'lol'
);
ReactDOM.render(thePage, document.getElementById('app'));
But when I open its associated HTML page in my browser, I get this error:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
Here's what my React folder looks like for reference:
Link
Oh and the html and js files are in the 'my-app' folder.
It occurred to me that there doesn't seem to be a "react.js" or any such file, but I've tried reinstalling it and that's always what it comes out as, so I don't know if that's an issue or not.
Any idea how I can fix this error? What am I doing wrong?
You are probably not starting the application like you should (double-clicking on the index.html file?)
If you used react-scripts in order to create the app (like you probably should if you're a beginner), then use npm run start which will compile the code and the imports into one JavaScript bundle file and start a web page on http://localhost:3000
This will allow regular imports to work properly:
import React from 'react';
import ReactDOM from 'react-dom';
And when deploying to a remote web server, use npm run build and copy the content of the build folder to the server.
most likely scenario here is it can't find the script file so the script fetch is returning a 404 which would be a text page saying it cant find it.
Double check the location in the index.html is what it should be
I have a simple website with an index.html, and a script tag linked to a main.js file. The tag is of type module. I don't use any libraries or anything like that. I have tried solutions online, but they all use some kind of bundler, and it doesn't seem to work without them. I created my app with firebase init hosting.
When i try importing firebase with import firebase from 'firebase' or import * as firebase from 'firebase', i get the error message Uncaught TypeError: Failed to resolve module specifier "firebase". Relative references must start with either "/", "./", or "../".
What should i do here? This is my first time using firebase with javascript modules.
Firebase says to use script tags to access firebase, but i cannot do that.
import .. from 'firebase' will cause JavaScript to look in the node_modules folder. If I understand you correctly, you don't have one and you don't want one either.
Firebase doesn't need to be included like that, you can also just add scripts to the bottom of your body in your html like this:
<script src="/__/firebase/5.11.0/firebase-app.js"></script>
<script src="/__/firebase/init.js"></script>
If hosting is the only thing you want this should do it, even without a config object. Otherwise check this out:
https://firebase.google.com/docs/web/setup
Just went through the Tour of Heroes tutorial for Angular2 and was really enjoying the NPM system then I went to add my first package.
I added "eveonlinejs": "^2.0.0" to my package.json and ran "npm install"
The package installed and the folder is present in node_modules.
Running my server however results in.
app/eveapi.service.ts(2,29): error TS2307: Cannot find module 'eveonlinejs'.
The line in question is
import { eveonlinejs } from 'eveonlinejs';
From my research I believe that the import should hit the package.json in the "node_modules/eveonlinejs" directory and see the "main" property which is set.
I have tried deleting clearing the NPM cache and reinstalling the node_modules folder.
I have also tried using a require statement to point into the directory but then I get a missing module for "sax" which is installed inside the "eveonlinejs" directory.
Update:
Thanks to #nem035 I've gotten a bit futher and have stopped using import however found I was getting a 404 error when using require.
I was able to get a step further by adding this code:
systemjs.config.js
'eveonlinejs': 'npm:eveonlinejs/lib/eveonline.js'
Which got me back to having errors with "sax." I found that Sax has, for some reason, moved out of the eveonlinejs folder up to the root node_modules folder.
'sax': 'npm:sax/lib/sax.js'
This corrected the Sax issue however gave me all this!
zone.js:1382 GET http://localhost:3000/node_modules/eveonlinejs/lib/client 404 (Not Found)
dashboard:17 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/eveonlinejs/lib/client
zone.js:1382 GET http://localhost:3000/node_modules/eveonlinejs/lib/cache/cache 404 (Not Found)
zone.js:1382 GET http://localhost:3000/node_modules/eveonlinejs/lib/cache/file 404 (Not Found)
zone.js:1382 GET http://localhost:3000/node_modules/eveonlinejs/lib/cache/memory 404 (Not Found)
zone.js:1382 GET http://localhost:3000/stream 404 (Not Found)
zone.js:1382 GET http://localhost:3000/string_decoder 404 (Not Found)
Everyone of these I fix reveals another‽ If this is what NodeJS is like then I'm out. Haha!
First thing you should do is remove the {} around your import.
import { eveonlinejs } from 'eveonlinejs';
// ----^-------------^-------------------- Remove the curly braces
You probably want this
import eveonlinejs from 'eveonlinejs';
The reason is because wrapping {} around the import tries to extract a named export from the file, but you want the whole library.
// import { eveonlinejs } from 'eveonlinejs' expects export code as
export {
eveonlinejs
}
When you leave out the braces, the import tries to extract the default export.
// import eveonlinejs from 'eveonlinejs' expects import as
export default eveonlinejs
Now, if you're using the version of eveonlinejs that's is currently on github, this might not work depending on how you're transpiling your modules (and how this process deals with module.exports).
The safe way would be to just use require:
var eveonlinejs = require('eveonlinejs');