We Keep Coding

How to import date-fns from node_modules in frontend file when 'type: module' is defined in package.json?

Previously, in an application where type:module was not specified in its package.json,
I could do this in a frontend JavaScript file:
import {
getYear,
getMonth,
getDaysInMonth,
startOfMonth,
getDay,
format,
parseISO,
} from 'date-fns';
Now, in an application where type:module is specified in its package.json, the above import statement returns:
Uncaught TypeError:
Failed to resolve module specifier "date-fns". Relative references must start with either "/", "./", or "../".
I understand that if I were importing my own module in this environment, I would have to specify the exact filename.
However, when I try this:
import parseISO from '../../../node_modules/date-fns/parseISO/index.js';
I get this error in chrome developer tools console:
GET http://localhost:3000/node_modules/date-fns/parseISO/index.js net::ERR_ABORTED 404 (Not Found)
The version of date-fns that is listed as a dependency in my package.json is:
"date-fns": "^2.29.3",
How do I import date-fns (and its various 'sub-packages') from node_modules in a frontend file when type: module is defined in package.json?
This scenario is not mentioned in the installation docs, so I must be missing something very obvious / basic:
https://date-fns.org/v2.29.3/docs/Getting-Started
(Also, in case it is relevant, I was using webpack in the previous application, but not in the new application, so perhaps that is the reason the original import statement worked in the previous application?)

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

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?

Angular Include Script From Node Modules Folder Using Angular CLI

I want to include a module which requires d3 and nvd3 dependencies. In my node_modules folder I installed a package which contains d3.min.js.
So in my index.html I tried to include this script like this:
<script src="./node_modules/ng2-nvd3/node_modules/d3/d3.min.js"></script>
But I'm getting a 404 File not found error:
Failed to load resource: the server responded with a status of 404 (Not Found)
I want to get this working: https://github.com/krispo/ng2-nvd3
And in my app.module.ts I got this import statement: import { NvD3Component } from 'ng2-nvd3'; and added it to the #NgModule decleration array.
What is the proper way to include this script? And how can I get it working?