incorrect importing path of es module with @ in path in production mode

Environment

Nuxt project info:

---

• Operating System: Darwin
• Node Version: v16.12.0
• Nuxt Version: 3.0.0-27324822.2cf8c45
• Package Manager: yarn@1.22.4
• Bundler: Vite
• User Config: buildModules, dev, build, intlify, publicRuntimeConfig
• Runtime Modules: -
• Build Modules: @intlify/nuxt3@0.1.9

---

Reproduction

Add this module:

import {
    ApolloClient,
    InMemoryCache,
    createHttpLink
} from '@apollo/client/core'
import { defineNuxtPlugin, NuxtApp } from '#app'
import { DefaultApolloClient, provideApolloClient } from '@vue/apollo-composable'
import { createApolloProvider } from '@vue/apollo-option'
import VueApolloComponents from '@vue/apollo-components'

export default defineNuxtPlugin((nuxt: NuxtApp) => {
    const httpLink = createHttpLink({
        uri: nuxt.$config.apiUrl,
        fetch: (uri, options) => {
            return fetch(uri, options)
        }
    })

    const apolloClient = new ApolloClient({
        link: httpLink,
        cache: new InMemoryCache()
    })

    const apolloProvider = createApolloProvider({
        defaultClient: apolloClient,
    })
      
    provideApolloClient(apolloClient)
    // nuxt.provide("apollo", apolloClient)
    // nuxt.provide("apolloDefaul", DefaultApolloClient)
    // nuxt.provide(DefaultApolloClient, apolloClient)
    nuxt.vueApp.use(apolloProvider)
    nuxt.vueApp.use(VueApolloComponents)
})

and deps:

{
    "@apollo/client": "^3.5.6",
    "@vue/apollo-components": "^4.0.0-alpha.16",
    "@vue/apollo-composable": "^4.0.0-alpha.16",
    "@vue/apollo-option": "^4.0.0-alpha.16",
    "@vue/apollo-ssr": "^4.0.0-alpha.16"
}

config:

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
    buildModules: ['@intlify/nuxt3'],
    dev: process.env.NODE_ENV === 'local',
    build: {
        transpile: ['tslib', '@apollo/client','ts-invariant'],
        postcss: {
            postcssOptions: {
                plugins: {
                    // tailwindcss: {},
                    autoprefixer: {},
                }
            }
        },
    },
    publicRuntimeConfig: {
        apiUrl: process.env.API_HOST + 'graphql',
        apiHost: process.env.API_HOST
    },
})

Describe the bug

Given module above, running yarn build and node .output/server/index.mjs, on any request getting the error:

Directory import '/.output/server/node_modules/@apollo/client/core' is not supported resolving ES modules imported from /path/to/project/root/.output/server/chunks/app/server.mjs

Pay attention to path in error

server.mjs:

import fetch from 'node-fetch';
import { v as vue_cjs_prod, g as getDefaultExportFromNamespaceIfNotNamed, c as commonjsGlobal$1, a as getDefaultExportFromCjs, r as require$$0$1, s as serverRenderer } from '../index.mjs';
import * as throttleDebounce from 'throttle-debounce';
import * as core from '@apollo/client/core';
import * as gql from 'graphql-tag';
import gql__default from 'graphql-tag';
import { visit, Source, print, BREAK } from 'graphql';
import * as perfectScrollbar from 'perfect-scrollbar';
import 'unenv/runtime/mock/proxy';
import 'stream';

I really don’t understand why it imports import * as core from '@apollo/client/core' and not like written in module source, but anyway, i to change directly in compiled file to import * as core from '@apollo/client/core/index.js' obviously getting error:

Cannot find module '/path/to/project/root/.output/server/node_modules/@apollo/client/core/index.js' imported from /path/to/project/root/.output/server/chunks/app/server.mjs

My guess that it is confusing @-sign in @apollo and tries to import it from wrong place

Moreover, if in nuxt.config dev: true and run yarn dev — everything works

if dev: false and I run yarn dev — nothing starts if dev: true and yarn build — build doesn’t finish

Additional context

Changing import to

const {
        ApolloClient,
        InMemoryCache,
        createHttpLink
    } = require('@apollo/client/core')

in module source didn’t help. Inspecting compiled code leads me to conclusion that this import is got from vue-apollo itself, not from module code. What does not change the problem of incorrect path resolving

Also setting ssr: false breaks build entirely: ERROR Rollup error: Could not load …/.nuxt/dist/server/server.mjs (imported by node_modules/@nuxt/nitro/dist/runtime/app/render.mjs): ENOENT: no such file or directory, open ‘…/.nuxt/dist/server/server.mjs’

Logs

No response

[terion-name]

alias doesn’t work in build:

    alias: {
        '@apollo/client/core': '@apollo/client/core/core.cjs'
    },

after hours of struggle got it seem to work with this:

build: {
        transpile: ['tslib', '@apollo/client', '@apollo/client/core', '@vue/apollo-composable', '@vue/apollo-option', 'ts-invariant'],
    },

[gookyn]

build: {
        transpile: ['tslib', '@apollo/client', '@apollo/client/core', '@vue/apollo-composable', '@vue/apollo-option', 'ts-invariant'],
    },

It works! 👍

Solved the problem that had been bothering me for a long time, thanks a lot! @terion-name