polyfills | Web Components Polyfills | Web Framework library

So it turned out that the angular engine allows creating aliases for paths based on what is specified in the "paths" in tsconfig.

But in order to be able to access both the subfolders of the module and what is exported from the index.ts at the top level of the module, you need to specify "paths" like this:

Finally, It's been resolved, my Hello World is done.

These 2 replies from the maintainer himself (@necolas) on this discussion helped me to get the issue.

Reply 1 by @necolas This line in the stack trace is telling you that you're trying to bundle RN internal code in your web bundle: node_modules/react-native/Libraries/NewAppScreen/index.js.

First, you should not be loading any of the RN package on web, especially not parts that aren't part of the public API . Second, as mentioned in the inline comments of the config you pasted above, you need to explicitly list everything in node_modules that needs compiling.

Reply 2 by @necolas

You'll need to enable source map generation for the production build in your next.config.js file as it's disabled by default.

+There seems to be an issue with the new release 4.0.2 of create-react-app [Reference].
You can use the previous, 4.0.1, by doing the following.

1. Edit package.json and change the "react-scripts" value to "4.0.1".
2. Run npm install.
3. Run npm start.

You want to call the function distanceTo of a object that you get from JSON.prase, this object don't have the function distanceTo. You need first to create a Marker or a LatLng Object.

I created a test project using Angular 12 and it seems that it does have the same issue. But I found a solution that should work:

Apparently, I had been reading the wrong documentation for my version. The above code has two things that needed to be changed for it to work for me.

1. You don't do @use '~@angular/material' as mat;. The important line is @import '~@angular/material/theming';, which was already put in the file by the CLI.

2. It's not @include elevation(16);, it's @include mat-elevation(16);.

Unfortunately, most of the Web3 stack relies heavily on window, browser and external, crypto dependencies which aren't available on server-side. This isn't just an issue with Gatsby, but other SSR and static site generators (e.g. Next.js) as well.

There are a few workarounds though. See Using Client-Side Only Packages on Gatsby

1. Use a different library or approach

2. Add client-side package via CDN

3. Load client-side dependent components with loadable-components

4. Use React.lazy and Suspense on client-side only

Depending on your requirements #1 is likely not an option. I've had better success using ethers, instead of web3. But you'll likely run into similar issues with other packages at some point.

A combination of #2 and 3/4 will be the way to go. First, remove the packages (web3) that are causing issues and load them either from gatsby-browser.js or using react-helmet on the page/component that's using it.

gatsby-browser.js

We figured it out. As you can see in our packages.json, we have a dependency on webpack. It seems angular-devkit/build-angular does as well. We believe this created the known issue of multiple webpacks colliding and causing issues. Removing our dependency on webpack fixed the issue.