We Keep Coding

System is not defined with dynamic import in angular 13

I have below code for dynamic load the locales
declare var System;
let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
System.import(`#angular/common/locales/${angularLocale}.js`)
.then(module => {
registerLocaleData(module.default);
NgxBootstrapDatePickerConfigService.registerNgxBootstrapDatePickerLocales().then(_ => {
resolve(true);
abp.ui.clearBusy();
});
}, reject);
If I don't use the System the build command throws an exception as
Module not found: Error: Package path ./locales is not exported from package ....\node_modules\#angular\common (see exports field in .....\node_modules\#angular\common\package.json)
If I use the System I get an exception in the browser console as
core.mjs:6495
ERROR Error: Uncaught (in promise): ReferenceError: System is not defined
ReferenceError: System is not defined
at registerLocales (root.module.ts:193)
at root.module.ts:64
at ZoneDelegate.invoke (zone.js:400)
at Object.onInvoke (core.mjs:25877)
at ZoneDelegate.invoke (zone.js:399)
at Zone.run (zone.js:160)
at zone.js:1318
at ZoneDelegate.invokeTask (zone.js:434)
at Object.onInvokeTask (core.mjs:25864)
at ZoneDelegate.invokeTask (zone.js:433)
at resolvePromise (zone.js:1255)
at zone.js:1325
at ZoneDelegate.invokeTask (zone.js:434)
at Object.onInvokeTask (core.mjs:25864)
at ZoneDelegate.invokeTask (zone.js:433)
at Zone.runTask (zone.js:205)
at drainMicroTaskQueue (zone.js:620)

I had the same problem with "Module not found".
In the application we use i18n.
Now I get the the country from the i18n, and then set the locale to the pipe, witch holds this information.
So I do not need the dynamic Modul loading anymore.
Maybe that helps you?

ReactJS library gives "ReferenceError: __extends is not defined" in projects that export it when altering rollup.config.js's commonjs function

I am working on a project and we also have a library project that hold all the common components used across the project. In this library I had to add a component that uses materialUI. When I was trying to export that component I was getting the error :
[!] Error: 'ForwardRef' is not exported by node_modules\react-is\index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules\#material-ui\utils\esm\getDisplayName.js (2:9)
1: import _typeof from "#babel/runtime/helpers/esm/typeof";
2: import { ForwardRef, Memo } from 'react-is'; // Simplified polyfill for IE 11 support
Now I was able to solve this by altering the commonjs function from rollup.config.js like this:
commonjs({
include: "node_modules/**",
namedExports: {
"node_modules/react-is/index.js": ["ForwardRef", "Memo"],
},
}),
This in turn has created another error. When I reinstalled the library on the main project straight from the start I get the error.
Uncaught ReferenceError: _extends is not defined
at exactProp (index.es.js:14590)
at Module.<anonymous> (index.es.js:18939)
at Module../node_modules/bt-react-lib/dist/index.es.js (index.es.js:25529)
at __webpack_require__ (bootstrap:782)
at fn (bootstrap:150)
at Module../src/components/main/Main.js (Dashboard.js:52)
at __webpack_require__ (bootstrap:782)
at fn (bootstrap:150)
at Module../src/App.js (log$:24)
at __webpack_require__ (bootstrap:782)
at fn (bootstrap:150)
at Module../src/index.js (index.css?02e3:45)
at __webpack_require__ (bootstrap:782)
at fn (bootstrap:150)
at Object.1 (objects.js:1)
at __webpack_require__ (bootstrap:782)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
Has to do with materialUI again I suppose. Anyone had this before?

You should probably treat material as a peer dependency, together with react and react dom. Here is an example of a boilerplate that helped me on the same issue.
First modify package.json and move material to "peerDependencies": {... }
then you'll have to install rollup-plugin-peer-deps-external and add it to your rollup file. Now you can undo the named exports and you should be done.

global, buffer and process are undefined in ionic 4 angular 8

I'm trying to use an external js npm library in an Angular 8 ionic 4 app and I received
ERROR Error: Uncaught (in promise): ReferenceError: global is not defined
I tried to solve this problem by inserting in polyfill.ts the following code:
(window as any).global = window;
import * as buffer from 'buffer';
window['buffer'] = buffer;
import * as process from 'process';
window['process'] = process;
When I try to run the ionic app with "ionic serve" I receive a run time error with:
index.js:43 Uncaught ReferenceError: global is not defined
at Object../node_modules/node-libs-browser/node_modules/buffer/index.js (index.js:43)
at __webpack_require__ (bootstrap:84)
at Module../src/polyfills.ts (polyfills.ts:1)
at __webpack_require__ (bootstrap:84)
at Object.1 (zone-flags.ts:5)
at __webpack_require__ (bootstrap:84)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at polyfills.js:1
...
ERROR Error: Uncaught (in promise): ReferenceError: global is not defined
ReferenceError: global is not defined
at Object../node_modules/stream-http/lib/capability.js (capability.js:1)
at __webpack_require__ (bootstrap:84)
at Object../node_modules/stream-http/lib/request.js (request.js:1)
at __webpack_require__ (bootstrap:84)
at Object../node_modules/stream-http/index.js (index.js:1)
at __webpack_require__ (bootstrap:84)
at Object../node_modules/rss-parser/lib/parser.js (parser.js:2)
at __webpack_require__ (bootstrap:84)
at Object../node_modules/rss-parser/index.js (index.js:3)
at __webpack_require__ (bootstrap:84)
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:34182)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)
Any suggestion?

Original Answer
Angular is a Framework for client side. The runtime target is the browser. You cannot use libraries like process there, since those are only available when running a nodejs process.
You most likely want to split your application into a client and a server side.
Solution for rss-parser
As you mentioned in your comment, the library in question is rss-parser. As described in this issue, rss-parser is currently not working correctly with angular when using a bundler. Most likely due to not having ES Module support.
The solution is to use the prebundled version that gets shipped with the library. To do that, add the prepackaged version to your angular.json, into the script array in your architects build section. RSSReader is now available globally, in your window object and can be used like this:
import { Component } from '#angular/core';
// This tells TypeScript that you know this will be available globally during runtime.
// Unfortunately, RSSParser has no TS Declarations, so you have to use any or make a more concrete type yourself
declare const RSSParser:any;
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
title:string = '';
items:Array<any> = [];
constructor() {
const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"
let parser = new RSSParser();
parser.parseURL(CORS_PROXY + 'https://www.reddit.com/.rss', (err, feed) => {
if (err) throw err;
console.log(feed);
this.title = feed.title;
this.items = feed.items;
})
}
}
Here is a working Stackblitz.

"Uncaught ReferenceError: window is not defined" when trying to use a worker in Papa Parse

I have a react app that streams data from a csv file. The relevant function looks like this:
loadCSV(url){
Papa.parse(csv,
{download: true,
worker: true,
step: row =>
{this.setState({data: [...this.state.data, row.data]})}});}
}
This gives me the following error:
Uncaught ReferenceError: window is not defined
at Object.<anonymous> (index.js:1881)
at Object.<anonymous> (index.js:1891)
at __webpack_require__ (index.js:30)
at index.js:73
at index.js:76
at webpackUniversalModuleDefinition (index.js:3)
at Object../node_modules/react-scripts/node_modules/react-error-overlay/lib/index.js (index.js:10)
at __webpack_require__ (bootstrap f5513196fd3608c5177f:678)
at fn (bootstrap f5513196fd3608c5177f:88)
at Object../node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js (webpackHotDevClient.js:24)
The error seems to be due to the "worker: true" line, because it works when I remove that. After some Googling, it seems that using workers can cause issues when making react apps with "create-react-app", but I'm really confused about what the proper solution is.

Window and document object are not available in node env . if you are running on server then you have to add check for client and server.

How to use front/gutenberg-js within a react app?

I have already created a react app by using create-react-app cli. The application is running fine. I have to use guttenberg editor which is there in wordpress 5.
There is a javascript only version available, in https://github.com/front/gutenberg-js.
The problem is when ever I am trying to domReady, editPost these by using following import statement
import { domReady, editPost } from '#frontkom/gutenberg-js';
My react application is not working,
Below is the exception
gutenberg-js.js:104 Uncaught TypeError: Cannot read property 'createContext' of undefined
at Module.push../node_modules/#frontkom/gutenberg-js/build/js/gutenberg-js.js (gutenberg-js.js:104)
at n (gutenberg-js.js:17)
at Module.push../node_modules/#frontkom/gutenberg-js/build/js/gutenberg-js.js (gutenberg-js.js:45274)
at n (gutenberg-js.js:17)
at push../node_modules/#frontkom/gutenberg-js/build/js/gutenberg-js.js (gutenberg-js.js:51)
at Object../node_modules/#frontkom/gutenberg-js/build/js/gutenberg-js.js (gutenberg-js.js:52)
at __webpack_require__ (bootstrap:781)
at fn (bootstrap:149)
at Module../src/components/PageEditor.js (HomeComponent.js:13)
at __webpack_require__ (bootstrap:781)
at fn (bootstrap:149)
at Module../src/index.js (index.css?f3f6:45)
at __webpack_require__ (bootstrap:781)
at fn (bootstrap:149)
at Object.0 (store.js:12)
at __webpack_require__ (bootstrap:781)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
The expectation is import should work.