Missing "./server-renderer" specifier in "vue" package

[vlad-maleev]

Environment

• Operating System: Darwin
• Node Version: v14.18.1
• Nuxt Version: 3.2.1
• Nitro Version: 2.2.2
• Package Manager: [email protected]
• Builder: vite
• User Config: typescript, modules, build, runtimeConfig, pwa, imports
• Runtime Modules: @kevinmarrec/[email protected], @pinia/[email protected], @nuxtjs/[email protected], [email protected]
• Build Modules: -

Reproduction

run yarn build command

Describe the bug

Getting "Missing "./server-renderer" specifier in "vue" package" on build process

Additional context

Everything is fine on Nuxt 3.1.1. Started to get the error on 3.2.0 and 3.2.1

Logs

[commonjs--resolver] Missing "./server-renderer" specifier in "vue" package

 ERROR  Missing "./server-renderer" specifier in "vue" package                                                                                 18:42:19

  at e (node_modules/vite/dist/node/chunks/dep-9912c491.js:14845:25)
  at n (node_modules/vite/dist/node/chunks/dep-9912c491.js:14845:627)
  at o (node_modules/vite/dist/node/chunks/dep-9912c491.js:14845:1276)
  at resolveExports (node_modules/vite/dist/node/chunks/dep-9912c491.js:22032:20)
  at resolveDeepImport (node_modules/vite/dist/node/chunks/dep-9912c491.js:22051:31)
  at tryNodeResolve (node_modules/vite/dist/node/chunks/dep-9912c491.js:21736:20)
  at Object.resolveId (node_modules/vite/dist/node/chunks/dep-9912c491.js:21487:28)
  at Object.handler (node_modules/vite/dist/node/chunks/dep-9912c491.js:44849:19)
  at node_modules/rollup/dist/es/shared/rollup.js:24011:40
  at async PluginDriver.hookFirstAndGetPlugin (node_modules/rollup/dist/es/shared/rollup.js:23911:28)
  at async resolveId (node_modules/rollup/dist/es/shared/rollup.js:22855:26)
  at async ModuleLoader.resolveId (node_modules/rollup/dist/es/shared/rollup.js:23119:15)
  at async Object.resolveId (node_modules/vite/dist/node/chunks/dep-9912c491.js:7972:10)
  at async PluginDriver.hookFirstAndGetPlugin (node_modules/rollup/dist/es/shared/rollup.js:23911:28)
  at async resolveId (node_modules/rollup/dist/es/shared/rollup.js:22855:26)
  at async ModuleLoader.resolveId (node_modules/rollup/dist/es/shared/rollup.js:23119:15)
  at async node_modules/rollup/dist/es/shared/rollup.js:23407:50

[danielroe]

Would you provide a reproduction? 🙏

[gyxoBka]

@danielroe Hi, here's the reproduction

It's seems due 3rd party packages

To reproduce you need: npm run build

[TheAlexLichter]

Then it'd be the best to raise an issue in the package repo. Leaving open in case there is something we can improve on the Nuxt end though.

[TheAlexLichter]

A quick update - @danielroe noticed that the linked package has no Vue 3 support and depends on Vue 2 (and it's SSR renderer), thus is not usable with Nuxt 3.

[gplusdotgr]

@manniL we're running into a similar issue with a Vue2 component, what would be the fix for it to properly work?

[TheAlexLichter]

If the component has no Vue 3 support, there is no solution except "upgrading the component to Vue 3" or searching for a replacement.

[gplusdotgr]

We took the component in question (we own it) and converted the syntax to Vue3 and we got the same error...

[danielroe]

@gkatsanos Interesting. Any chance you could provide a reproduction?

[gplusdotgr]

Hey Daniel :) I struggled to, but I think I narrowed it down to something related to the fact that

1. the component is an external node_module imported into the app

import VisPageHeader from '@visable-dev/vue/components/VisPageHeader/index.vue'

"@visable-dev/vue": "^16.0.1",

2. I'm not sure why this would impact the bundling, does it maybe take into account the external component repo build config?

// Users/xxx/repos/visable/visable-vue/vue.config.js
// global default config
const kilobytes = (value) => value * 1024

module.exports = {
 css: {
   // It is set to false to avoid your users having to import the CSS themselves.
   extract: false, // see: https://cli.vuejs.org/config/#css-extract
 },
 chainWebpack: (config) => {
   // prevent override of project root vue.config.js file
   config.resolve.symlinks(false)

   const svgRule = config.module.rule('svg')

   // clear all existing loaders.
   // if you don't do this, the loader below will be appended to
   // existing loaders of the rule.
   svgRule.uses.clear()

   // add replacement loader(s)
   svgRule
     .oneOf('inline')
     .resourceQuery(/inline/)
     .use('babel-loader')
     .loader('babel-loader')
     .end()
     .use('vue-svg-loader')
     .loader('vue-svg-loader')
     .end()
     .end()
     .oneOf('external')
     .use('file-loader')
     .loader('file-loader')

   // adjusts the inline image file size limit
   // https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports
   config.module
     .rule('images')
     .use('url-loader')
     .loader('url-loader')
     .tap((options) => Object.assign(options, { limit: kilobytes(12) }))
 },
}

I used pnpm link to change/modify the component on the fly - so I removed pretty much ALL content from the component besides a static foo and I still get the Vue renderer issue.

re: https://github.com/vitejs/vite-plugin-vue/issues/157

[gplusdotgr]

update, it seems that adjusting the peer/dependencies of the components library addresses the issue

[CodyBontecou]

Here's a reproduction - https://github.com/CodyBontecou/server-renderer-error

You can see the error by running npm run build at either apps/hotspringers-nuxt-3 or from the root directory.

[Hanawa02]

I'm having a similar issue, here is the repo: https://github.com/Hanawa02/vue-3-test

In it, I have a barebones Vite + Vue 3 component library (web-component-library) where the styles are exported to a style.css file. I also have a barebone Nuxt 3 project where I import (npm link) the component library.

When running the Nuxt 3 project I get this error:

The component itself is imported and works correctly, but the css importing does not work.

The same happens if I try to import the css file from another css file in the assets folder.

[mhdSid]

ERROR [commonjs--resolver] Missing "./server-renderer" specifier in "vue" package

ERROR Missing "./server-renderer" specifier in "vue" package

[danielroe]

Checking I see that @CodyBontecou's reproduction also has Vue 2 installed: https://github.com/CodyBontecou/server-renderer-error/blob/main/package-lock.json#L15893.

I think we can close this. If you're encountering the original error, please check that you do not have Vue 2 installed in your dependencies. It is being hoisted to the top level of node modules and is causing vite to be unable to import from vue/server-renderer, which only exists in Vue 3. You may be able to work around it by explicitly installing vue.

[CanadianBeaver]

I have the same issue:

{
  "devDependencies": {
    "vite": "^5.0.8",
    "vitepress": "^1.0.0-rc.31",
    "vue": "^3.3.11"
  },
  "scripts": {
    "docs:dev": "vitepress dev --open",
    "docs:build": "vitepress build",
    "docs:preview": "vitepress preview"
  }
}

npm run docs:build throwns Error: Missing "./server-renderer" specifier in "vue" package

[TheAlexLichter]

@CanadianBeaver This is the nuxt repo. Seems like you have issues with vitepress.

[YXL926]

I use pnpm to manage the project(nuxt2+nuxt3), and the following practices make the error disappear: 1.Add pnpm configuration to the package.json in the project root directory:

./package.json
"pnpm": {
    "packageExtensions": {
      "@nuxt/ui-templates": {
        "peerDependencies": {
          "vue": "^3.4.21"
        }
      }
    }
  }

2.delete node_modules，and then pnpm i

[soletan]

FWIW: I've hit the same issue with VitePress today. Looking into package-lock.json file, most dependencies in @vue namespace have been using v3, but the @vue/compiler-sfc was still using a v2 version. The project has been using VuePress before and recently we've switched to VitePress simply by replacing the dep in package.json from vuepress to vitepress with proper version, then doing an npm install. Since then, node_modules has been removed and set up from scratch, dependencies have been upgraded, npm audit fix has been applied to fix issues in other packages. But neither of these actions ever touched the record for @vue/compiler-sfc in package-lock.json for all other packages aren't Vue- or even frontend-related at all.

Eventually, I assume in my case vitepress or its dependencies aren't too strict on requiring v3 of @vue/compiler-sfc so that npm was sticking to the existing v2 on every run of npm install used to upgrade deps or to switch them as described. When removing node_modules folder, versions tracked in package-lock.json get recovered and vice versa. So, I tried removing both node_modules folder and package-lock.json file as a usual to get a really fresh lock file.

This and another npm install was fixing the issue in my case eventually.