No support for resolving es modules imported from...

Environment

Nuxt CLI v3.0.0-rc.7 (Have tried rc8, issue persists) 00:45:09 RootDir: nuxt3 00:45:16 Nuxt project info: 00:45:16

---

• Operating System: Linux
• Node Version: v16.15.1
• Nuxt Version: 3.0.0-rc.7 (Have tried rc8, issue persists)
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: modules, build
• Runtime Modules: @nuxtjs/color-mode@3.0.2, @nuxtjs/tailwindcss@5.0.4
• Build Modules: -

---

Reproduction

To reproduce the bug, load a base installation of Nuxt3 RC 7 or 8 with the following dependencies:

• “@nuxtjs/color-mode”: “^3.0.2”
• “@nuxtjs/tailwindcss”: “^5.0.4”
• “nuxt”: “3.0.0-rc.7”
• “@headlessui/vue”: “^1.6.5”,
• “@heroicons/vue”: “^1.0.6”,
• “@tailwindcss/forms”: “^0.5.2”,
• “echarts”: “^5.3.3”,
• “postcss-custom-properties”: “^12.1.8”,
• “tailwindcss-dark-mode”: “^1.1.7”,
• “ts-node”: “^10.8.1”,
• “typescript”: “^4.6.4”,
• “uuid”: “^8.3.2”,
• “vue-chart-3”: “^3.1.8”,
• “vue-echarts”: “^6.2.3”

Immediately after running “yarn dev” the bug will occur

Describe the bug

Nuxt 3 is expected to boot and correctly display the site, however due to the bug this fails and loads nothing.

Additional context

I have successfully been developing with this configuration starting at RC 3 and have had no issue up until and including RC 6, after updating to RC 8 this error occurred (there were no file changes made, that I am aware of other than the nuxt update). Upon encountering this issue in the RC 8, I reset the git commit to RC 6 and attempted again with RC 7 to see if the issue was introduced in RC 7 or 8. The issue persisted in RC 7, which is why I am releasing the bug report on RC 7 to narrow down the possible area of bug origin. (Two versions worth of patches is less than one 😉. Hope this can be solved -AwesomeDude091

Logs

[worker reload] [worker init] The requested module 'file:///nuxt3/node_modules/vue-bundle-renderer/dist/index.mjs' does not provide an export named 'createRenderer'

  import { createRenderer } from 'node_modules/vue-bundle-renderer/dist/index.mjs';
  ^^^^^^^^^^^^^^
  SyntaxError: The requested module 'node_modules/vue-bundle-renderer/dist/index.mjs' does not provide an export named 'createRenderer'
  at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
  at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
  at async Promise.all (index 0)
  at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
  at async loadESM (node:internal/process/esm_loader:88:5)
  at async handleMainPromise (node:internal/modules/run_main:61:12)

✔ Nitro built in 370 ms                                                                                                                                                                   nitro 00:44:29
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'nuxt3/node_modules/@heroicons/vue/outline' is not supported resolving ES modules imported from nuxt3/.nuxt/dist/server/server.mjs
Did you mean to import @heroicons/vue/outline/index.js?
    at new NodeError (node:internal/errors:372:5)
    at finalizeResolution (node:internal/modules/esm/resolve:433:17)
    at moduleResolve (node:internal/modules/esm/resolve:1009:10)
    at defaultResolve (node:internal/modules/esm/resolve:1218:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
    at ESMLoader.import (node:internal/modules/esm/loader:380:22)
    at importModuleDynamically (node:internal/modules/esm/translators:106:35)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
    at $id_DTUs8dO0YJ (file:///nuxt3/.nuxt/dist/server/server.mjs:134972:9) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///nuxt3/node_modules/@heroicons/vue/outline'
}

[danielroe]

See https://v3.nuxtjs.org/concepts/esm and https://github.com/nuxt/framework/issues/6495#issuecomment-1214339261.

@pkgmain is right that you need to transpile @heroicons/vue - see working stackblitz: https://stackblitz.com/edit/github-nndjzx-7jmps4. If that isn’t working in your project, you might have additional dependencies that also need to be transpiled.

[AwesomeDude091]

This fixed it thank you