We Keep Coding

Can I dynamically import a JS module that uses rxjs into an Angular App

I have built an application with Angular 12.
I have a JS module called dynamic_module.js which is not available at build time which I want to import and use in the app. However, dynamic_module.js uses rxjs and other imports - all of which are already used in the Angular application and so included in the built webpack. dynamic_module is not an Angular / webpack artifact or anything complicated - it is a simple JavaScript file located on the same server but not available at build time .
When I try to import "dynamic_module.js" using the import(<path_to_dynamic_module.js> ) function - (I'm assuming this method is hi-jacked by webpack) I get an error:
"Error: Cannot find module '<path_to_dynamic_module.js>' ".
I expected this because the dynamic_module.js is not available when the app was built.
So, I tried the method of inserting a <script> element into the header -
e.g. <script type="module" src="<url_of_dynamic_module.js>"></script>
this loads the module but reports the error :
Failed to resolve module specifier "rxjs". Relative
references must start with either "/", "./", or "../".
I also tried this without the import of rxjs in the module, and it works ok.
And if I try using SystemJS with the babel transpiler and try to import the dynamic_module.js, I get an error when System JS tries to load the rxjs module it goes to http.
Error: Fetch error: 404 Not Found Instantiating
http://localhost:4400/rxjs
This also works when the import is removed from dynamic_module.js.
My question is : Can modules dynamically loaded with SystemJS (or any other method) import other modules that are already loaded by webpack - without duplication or reloading via http?
If this is not possible, I could make all the necessary module files available via http for SystemJS to load (I have done this with the 'babel' transpiler modules for SystemJS) . Would that cause two copies of the modules (ie. rxjs in this example) to be loaded into the browser - could this be a serious problem (space/performance/clashes ...)?
Here is a very simple example of the module - this can load by any method if the import is removed, but fails in if the import is included.
dynamic_module.js
import { Observable} from 'rxjs';
export class MyClass{
hello( msg ) {
console.log('[MODULE] Hello World');
console.log(msg);
}
}
Thanks for any advice!

Ok, after some research I have solved my problem:
Let me describe concisely what the issue I had was:
I was trying to import a module (dynamic_module.js) into an Angular
application at run time,
that module had a dependency on a module that was already bundled in
the Angular webpack (rxjs)
I used SystemJS to import my dynamic module
SystemJS tried to resolve my dynamic_module's dependencies by
reloading modules from the server.
I felt that this was unnecessary because the modules were already present in the client application - and anyway, the http requests failed because the dependencies were not to be found where it was looking for them.
The solution is to let SystemJS know in advance that the dependencies are already available. This is done using the SystemJS.set() method: for example in my case the key steps were:
import * as rxjs from "rxjs";
SystemJS.set('rxjs', SystemJS.newModule(rxjs));
SystemJS.import( <url_of_module> ).then( module=>.....});

Error: Could not find declaration file for module VueJS application

Hi I am using NuxtJS to build a VueJS application. I have installed an image cropping library vue-croppie. I have imported the Vue component as per the documentation like below
import VueCroppie from 'vue-croppie'
However, I am getting the following error on import statement
Could not find a declaration file for module 'vue-croppie'. 'xxx/node_modules/vue-croppie/dist/vue-croppie.cjs.js' implicitly has an 'any' type.
Try npm i --save-dev #types/vue-croppie if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-croppie';
I have tried declaring index.d.ts file at the root of my project with following content but id doesn't solve the problem
declare module 'vue-croppie';
I have tried using require like below as suggested on other posts but of no use
const VueCroppie = require('vue-croppie')
I understand this is a Typescript issue but have no knowledge about Typescript. Can somebody throw more light on this. What is happening and how to fix it.
Thanks

The issue was I had not installed the plugin with VueJS app. Here is how to do it.
VueJS
We can use Vue.use to isntall a plugin before it can be used like below
import Vue from 'vue';
import VueCroppie from 'vue-croppie';
Vue.use(VueCroppie)
NuxtJS
In case of NuxtJS it is little different. The plugin is registered globally, here's how.
Create a file called vue-croppie.js under plugin folder. And add the following to it
import Vue from 'vue'
import VueCroppie from 'vue-croppie'
Vue.use(VueCroppie)
In your nuxt.config.js add this under plugins
{ src: '~/plugins/vue-croppie.js', ssr: false }
Now, the plugin will be available globally. So there is no need to import and can be used directly.

Using imports with Nodejs doesn't recognize a default export

I'm using expo-server-sdk, and I haven't had this issue with other packages yet, but I'm thinking that this isn't an issue specific to this package.
Basically, my IDE recognises that this package has a default export, and correctly autoimports it as,
import { Expo } from 'expo-server-sdk';
The problem is that this doesn't compile and throws the error,
SyntaxError: The requested module 'expo-server-sdk' does not provide an export named 'Expo'
I'm using the experimental ESM module loader with Node v13.13.0. When I initially set up the config and environment, I was able to use import instead of require, however I am supposed to append the extension of each file I import.
What can be wrong here?
Expo post for reference

If it's exported as default you only need
import Expo from 'expo-server-sdk';
instead of
import { Expo } from 'expo-server-sdk';

I managed to work around this by doing the following:
import Expo from 'expo-server-sdk';
...
let expo = Expo.Expo()
...
if (!Expo.Expo.isExpoPushToken(pushToken)) {
...
}
...
Just import Expo from 'expo-server-sdk'; did not work.

ESLint import module not recognized

I've added new module in my React-Native project.
When I use this module, import works nicely, but ESLint show below error :
2:26 error Unable to resolve path to module 'react-native-quick-actions' import/no-unresolved;
I don't understand why I am getting this error ... import works and my module is also present in my node_modules folder.
My import : import QuickActions from 'react-native-quick-actions';
Can anyone help me ?

React, Getting error: Uncaught ReferenceError: require is not defined

I have a project where I use both react and node (express). When I link to react using src="https://unpkg.com/react#16/umd/react.development.js" etc.. I have no problem using react with JSX in the project, but when I try to import like this:
import React from "react";
I get the error: Uncaught ReferenceError: require is not defined
This kind of "handicaps" me since I want to use modules like axios etc..
I am not using any module bundler
Thanks for any help!

Don't know if I fully understand the question but you seem to be using React.js from a cdn link. With no module bundler. So why are you importing it also? You've already "imported" React.js from your cdn link. =) No need to import it again. The import statement is when you use modules and import them like that with the ES6 syntax. If you want to do that use create-react-app instead.

I had a similar issue that I eventually solved with Browserify. Here's a link to my answer:
https://stackoverflow.com/a/63356350/5132452