Develop Reference

cannot import or require node modules (using npm)

Versions
I am working on a relatively old Laravel 7 project.
npm -v
8.15.0
node -v
v14.17.1
The Issue
I installed a new package using npm
npm i my_new_package
and am now trying to import the package from my js:
<script type="module" src="/js/filename.js"></script>
filename.js:
import { Roulette } from "my_new_package";
// Uncaught TypeError: Failed to resolve module specifier "#theblindhawk/roulette".
// Relative references must start with either "/", "./", or "../".
const Roulette = require("my_new_package");
// Uncaught ReferenceError: require is not defined
I tried a bunch of stuff from other SO questions, but none of it seemed to work.
There were no issues when I tried creating a file in the same repository and calling it.
import { Roulette } from "./different_file.js";
I am guessing this has to do with CommonJS/ES6, but my knowledge about these is quite lacking.

I messed up at the very basics...
Probably cuz I was recently working on a Laravel project with an different file creation method.
I forgot I had to put my js files in the resouces folder, then call them from the webpack.mix.js.
The webpack file:
mix.js('resources/js/filename.js', 'public/js')
Then run npm run watch and it will create the files inside the public folder for you.

Importing ES6 module causes script not to execute - Fullcalendar

I unintentionally updated a good junk of npm packages listed in my package.json file and now I'm experiencing issues importing the FullCalendar package.
Here's what I know:
When I import the Fullcalendar module or any any plugins from the package (e.g. import dayGridPlugin from '#fullcalendar/daygrid), the exported script does not execute. I have not had issues importing other npm packages in other js files. All of my other scripts have not experienced this issue.
JS File:
import * as utils from './utils.js';
import { Calendar } from '#fullcalendar/core';
import dayGridPlugin from '#fullcalendar/daygrid';
console.log("show me something");
console: .... Nothing happens.
However, If I do not import from #fullcalendar the script behaves as expected.
JS file:
import * as utils from './utils.js';
// import { Calendar } from '#fullcalendar/core';
// import dayGridPlugin from '#fullcalendar/daygrid';
console.log("show me something");
console: show me something
Troubleshooting:
Webpack successfully updates the file after changes via npm run watch
I have confirmed the updated file is loading in the browser
I have tried reverting packages to previous version (e.g. #fullcalendar#4.4.2 - previous version that was working)... same result
Downgraded from webpack 5 -> webpack#4.46.0 ... same result
Checked documentation to ensure I was using fullcalendar v5 correctly after upgrading from v4 - https://fullcalendar.io/docs/initialize-es6
Relevant Version Nunbers
#fullcalendar/core#5.6.0
#fullcalendar/daygrid#5.6.0
#fullcalendar/list#5.6.0
#fullcalendar/timegrid#5.6.0
webpack#4.46.0
I'm really stumped on this one. I'm sure it's due to my limited knowledge of ES6 modules. I appreciate any insight that you can provide. Thanks!

Create-React-App displaying blank screen on IE11. ERRORS: SCRIPT5009: 'WebSocket' is undefined and SCRIPT5009: 'Promise' is undefined

CRA works fine on every other browser but displaying blank screen on IE. I have tried installing react-app-polyfill 2.0 and 1.0.6, putting
import "react-app-polyfill/ie11"
import "react-app-polyfill/stable" at the top of src/index.js file. As well as putting "ie 11" in the browserList for dev and prod env. I also removed the .cache file in node_modules and still same error pops up. Here is my code:
package.json file dependencies
paackage.json file browserList
Polyfill imports
Here are the error messages I am getting:
Whole error
'WebSocket'is undefined points to this
'Promise' is undefined error points to this

As we can see that you had already added the react-app-polyfill and added the "ie 11" in the browser list.
I suggest you keep those settings and refer to the steps below.
If this is a newly created app and not working with IE 11 then I suggest you install core-JS using the command npm install core-js and add import 'core-js/stable' on the first line in the index.js file.
The starting of the index.js file should look like below.
import 'core-js/stable';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';
After that delete the .cache folder under node_modules and again try to run the project. It may help you to run it in IE 11.
If your React app was working with IE 11 and you got this issue after adding some code then I suggest you try to provide detailed information about it. It can help us to understand the issue properly.
Thanks for your understanding.

Angular testing - test.ts not found

I'm trying to follow the official Angular docs to set up testing for an Angular project - https://angular.io/guide/testing#service-tests
I've downloaded the sample Angular project from the page above, using the first (top) link. I've done an npm install and when I run ng serve it builds fine.
When I run ng test using the CLI, I get the message:
ERROR in Entry module not found: Error: Cant' resolve 'C:Code\testing\src\test.ts' in 'C:\Code\testing'
ERROR in error TS6053: File 'C:Code\testing\src\test.ts' not found.
I looked at this question - How to resolve test.ts when running ng test?, but in that case the file actually exists, but in the Angular example project it doesn't exist at all.
(When I first ran ng test I originally got a message about Jasmine Marbles being missing, which I resolved using:)
npm install jasmine-marbles --save
The documentation says:
You can fine-tune many options by editing the karma.conf.js and the
test.ts files in the src/ folder.
So I know the test.cs is some kind of configuration file, but how do I generate it? It doesn't exist in the Angular 'live example' project either. And how do I know that a test.cs I generate will work reliably with this project?

I used #joshbaeha's suggestion to ng new a new Angular 5 project and copied the test.ts file, which appears to be completely generic and not reliant on project structure or anything else. Everything is now working. Here it is:
test.ts
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '#angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '#angular/platform-browser-dynamic/testing';
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

I don't know whether you can generate just the test.ts file or not, but as far as i know this file is automatically generated when you create a new angular project using angular-cli. So you can just create a new project using angular-cli then copy the src/test.ts file from that new project

Ember load-initializers error: Could not find module `ember-load-initializers`

I'm having trouble updating an older Ember app.
I've ported the code into a new, empty ember app and installed the dependencies. I get no error when I serve the app, but when I inspect the browser console, I see that the app failed to launch.
Uncaught Error: Could not find module `ember/load-initializers` imported from `<my-app>/app`
I've seen a similar SO post that suggested this was caused by issues with ember-cli and jquery. link
However, that post is over a year old and I'm running an up-to-date version of ember along with an newer jquery library. Sure, it's no guarantee, but it seems a bit unlikely that this is still an issue for ember-cli.
My app/app.coffee file is pretty basic (no additions)
`import Ember from 'ember'`
`import Resolver from 'ember/resolver'`
`import loadInitializers from 'ember/load-initializers'`
`import config from './config/environment'`
Ember.MODEL_FACTORY_INJECTIONS = true
App = Ember.Application.extend
modulePrefix: config.modulePrefix
podModulePrefix: config.podModulePrefix
Resolver: Resolver
loadInitializers(App, config.modulePrefix)
`export default App`
From the console, I can verify that my app is using the expected jquery version:
$ Ember.$.fn.jquery
"3.2.0"
However, from the command line, I get a different version.
$ bower jquery -v
1.8.0
I'm not sure whether that's meaningful or a red herring.
At any rate, my ember-cli is fairly recent.
ember-cli: 2.12.0
I've added links to the package.json and bower.json files, in case they contain any clues.
At this point, I'm not really sure how to troubleshoot the issue. The depency

import Resolver from './resolver'
import loadInitializers from 'load-initializers'
Update those line app.js file and try it

If you haven't done this already, in the app.js, switch
import loadInitializers from 'ember/load-initializers'
over to
import loadInitializers from 'ember-load-initializers'
they changed the naming conventions of loadInitializers recently.