CJS -> ESM interoperability for imports inside external modules loaded from CDN

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

12.22.6 and above

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

If a CDN esm module uses Head from next/head breaks next dev

Here is a esm module using next/head https://jscdn.teleporthq.io/new-project-68d4/globals.js@0888a7f951f31cc0e33ee614e97d5b6e398ed19c

And it is imported inside https://jscdn.teleporthq.io/new-project-68d4/card.js@edb67533c00984de863a24b4433f30bab9eae03e

Now, if we try to import and use the component. It breaks the render.

import styles from '../styles/Home.module.css'
import Component from 'https://jscdn.teleporthq.io/new-project-68d4/card.js@edb67533c00984de863a24b4433f30bab9eae03e'

const App = () => {

  return (
    <div className={styles.container}>
     <Component />
    </div>
  )
}

export default App

Expected Behavior

Component to load the module and render it without breaking

To Reproduce

Here is a online repl which does the same to reproduce the bug https://replit.com/@JayaKrishnaNamb/nextjs-http#pages/index.js

GitHub repo to reproduce in local https://github.com/teleporthq/nextjs-http

[mattcarlotta]

And i am not sure if nextjs controls the module-resolution of it’s own. Or just delates to the node one. Because, the same example with styled-components is resolving the same irrespective of imported from the code directly or via CDN module. Here is a example https://codesandbox.io/s/new-project1-forked-z64zx?file=/src/teleporthq/pages/home.js

I believe styled-components works because it does something similar to what I mentioned above in Option C, where the default property is interpolated within the package itself:

styled-components.cjs.js

...
return e && "object" == typeof e && "default" in e ? e.default : e
...

styled-components.js

...
var r="default" in e ? e.default : e
...

next/dist/shared/lib/head.js (doesn’t interpolate default like above)

// returns/builds the obj instead of returning just the default property
function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}

// returns/builds the obj instead of returning just the default property
function _interopRequireWildcard(obj) {
    if (obj && obj.__esModule) {
        return obj;
    } else {
        var newObj = {
        };
        if (obj != null) {
            for(var key in obj){
                if (Object.prototype.hasOwnProperty.call(obj, key)) {
                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
                    };
                    if (desc.get || desc.set) {
                        Object.defineProperty(newObj, key, desc);
                    } else {
                        newObj[key] = obj[key];
                    }
                }
            }
        }
        newObj.default = obj;
        return newObj;
    }
}

On a separate note it appears that imports have some node module resolution. The reason I say some is because you can’t use require within a CDN asset (it’s undefined).

[JayaKrishnaNamburu]

And i am not sure if nextjs controls the module-resolution of it’s own. Or just delegates to the node one. Because, the same example with styled-components is resolving the same irrespective of imported from the code directly or via CDN module. Here is a example https://codesandbox.io/s/new-project1-forked-z64zx?file=/src/teleporthq/pages/home.js