We Keep Coding

Console error on import of non-existent file in vite

I am migrating from webpack using Vue2.7 and #vitejs/plugin-vue2.
So there was one problem.
await import(`${path}/${config || 'config'}`).catch(e => ({default: {}}))).default
Up to now, when the above code was executed, if the imported file was missing, the console would not display an error and it would be handled properly.
But when I move to vite, once I do import, I get a Not Found error and then run catch.
like this.
http://localhost:14400/src/User/config net::ERR_ABORTED 404 (Not Found)
Does vite have a way to handle a missing file without displaying an error in the console?

By default imports in rollup (Vite's bundler) are hoisted (put on the top of the file ignoring try/catch) so you need to pass rollup options to override the default behavior as described here:
https://github.com/rollup/plugins/tree/master/packages/commonjs#ignoretrycatch
commonjs options can be configured in Vite's config file in the build section:
https://vitejs.dev/config/build-options.html#build-commonjsoptions

ES6 import statements not working on web server

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

Why does the server return MIME type of 'text/html' when I import React?

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

Installing and Using React from React repo

I have a very basic question: I'm required to install and use react through the artifact files here. I downloaded the two files as seen in my directory. I'm using babel as my transpiler. I'm aware there are better ways to go about install react via npm, script file locations, etc but I have to do it this way. Here's a picture of my directory -
I feel like I have the relevant scripts and imports everywhere but I'm getting these errors -
app.js:1 GET http://localhost:3000/public/react.development.js net::ERR_ABORTED 404 (Not Found)
app.js:2 GET http://localhost:3000/public/react-dom.development.js net::ERR_ABORTED 404 (Not Found)
I seem to have an error from actually reading the two .js files I downloaded from the repo itself as well as the location of those files when calling them in my app.jsx. I've included the script files to run in my index.html file
<script src='react-dom.development.js'></script>
<script src='react.development.js'></script>
In my app.jsx I have these import statements
import React from '../public/react.development.js';
import ReactDOM from '../public/react-dom.development.js';
Obviously, I'm doing something wrong here. I'm not sure why I'm getting a 404 finding the files even though the given path is correct but it's still wrong somehow?

How to correct NodeJS Cannot find installed package?

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');