[next/head] [ESM] Element type is invalid: expected a string

[rtritto]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 16.14.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 12.1.6-canary.1
      react: 17.0.2
      react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Error when rendering next/head with ESM enabled:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 189 ms (112 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 48 ms (124 modules)
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at index.js:6.
    at Home
    at App (webpack-internal:///./node_modules/next/dist/pages/_app.js:69:1)
    at StyleRegistry (C:\head-elements-app\node_modules\styled-jsx\dist\index\index.js:671:34)
    at FlushEffectContainer (C:\head-elements-app\node_modules\next\dist\server\render.js:414:37)
    at AppContainer (C:\head-elements-app\node_modules\next\dist\server\render.js:429:29)
    at AppContainerWithIsomorphicFiberStructure (C:\head-elements-app\node_modules\next\dist\server\render.js:460:57)
    at div
    at Body (C:\head-elements-app\node_modules\next\dist\server\render.js:724:21)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 26 ms (125 modules)
error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

No error if I remove Head tag.

Expected Behavior

No error

To Reproduce

1. from Head Elements example:
   yarn create next-app --example head-elements head-elements-app
2. add "type": "module" to package.json
3. yarn dev
4. go to localhost:3000

[rafipiccolo]

#34412 got recently closed. And i can confirm that the ability to put type: module in package.json is now working with a lot of packages. The patch is available in next@12.1.5
but i guess its still not 100% functional since i have the same issue

[rtritto]

Probably related or similar:

• Provide styled as a named export styled-components/styled-components#3437
• Provide better ESM support for importing styled in node styled-components/styled-components#3601

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.