'Nextjs URL imports and styled import errors

I am attempting to create a micro-frontend like setup using URL imports of Nextjs.

You can check the code here:

https://github.com/ganarajpr/nextjs-12-mf

The concept is to create two nextjs apps - export and package the components from one project expose that packaged bundle from that app ( lets say http://localhost:3001/productBundle.js).

In the other app, you use URL imports and import the bundle and make use of the code

import productBundle from 'http://localhost:3001/productBundle.js';

So far, so good. Everything is working fine as it is. But when we try to import in styling mechanisms it fails misereably. Error when importing styled components

How could I go about fixing this ?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source