[Bug Report][3.0.0-alpha.9][SSR] Cannot find module 'vuetify/lib/components' #13936

brillout · 2021-07-16T20:34:25Z

Environment

Vuetify Version: 3.0.0-alpha.9
Vue Version: 3.0.11
Browsers: Chrome 91.0.4472.102
OS: Chromium OS 13904.55.0

Steps to reproduce

```
yarn install
```
```
yarn dev
```
Go to https://localhost:3000

Expected Behavior

No error is thrown.

Actual Behavior

Error is thrown:

Error: Cannot find module 'vuetify/lib/components' from '/home/brillout/tmp/vuetify3-ssr/pages/_default'
    at Function.resolveSync [as sync] (/home/brillout/tmp/vuetify3-ssr/node_modules/resolve/lib/sync.js:107:15)
    at resolveFrom$3 (/home/brillout/tmp/vuetify3-ssr/node_modules/vite/dist/node/chunks/dep-11db14da.js:4076:29)
    at resolve (/home/brillout/tmp/vuetify3-ssr/node_modules/vite/dist/node/chunks/dep-11db14da.js:73358:22)
    at nodeRequire (/home/brillout/tmp/vuetify3-ssr/node_modules/vite/dist/node/chunks/dep-11db14da.js:73337:25)
    at ssrImport (/home/brillout/tmp/vuetify3-ssr/node_modules/vite/dist/node/chunks/dep-11db14da.js:73290:20)
    at eval (/pages/_default/vuetify.js:9:31)
    at instantiateModule (/home/brillout/tmp/vuetify3-ssr/node_modules/vite/dist/node/chunks/dep-11db14da.js:73323:166)

Reproduction Link

https://github.com/brillout/vuetify3-ssr

Other comments

Hi, is vuetify supposed to work with SSR and Vite?

Trying to use Vuetify + Vite + SSR leads to an error where the npm package resolve cannot find vuetify/lib/components.

The text was updated successfully, but these errors were encountered:

pg-ahenry · 2021-07-16T20:37:32Z

same thing with vite-ssg, looks like it compiles
import * as components from 'vuetify/lib/components' into require('vuetify/lib/components') which causes that error (same with directives)

frandiox · 2021-07-17T10:26:51Z

There's an example here although I don't see any component import: https://github.com/vuetifyjs/vuetify/tree/next/packages/vuetify/dev

According to a conversation on Discord, I think @KaelWD got import * as components from "vuetify/lib/components" working.

KaelWD · 2021-07-19T15:31:43Z

That was for the dev environment which imports from src. To get prod working with vite you might have to change the import to vuetify/lib/components/index.mjs. I'll see if adding package exports makes it work without the extension.

brillout · 2021-07-19T15:33:57Z

That was for the dev environment which imports from src. To get prod working with vite you might have to change the import to vuetify/lib/components/index.mjs. I'll see if adding package exports makes it work without the extension.

cc @cprcrack

KaelWD · 2021-07-19T15:34:35Z

You could also try adding vuetify to ssr.noExternal

pg-ahenry · 2021-07-19T15:34:50Z

Can confirm changing to vuetify/lib/components/index.mjs works (no error with vite-ssg)

brillout · 2021-07-19T15:50:50Z

You could also try adding vuetify to ssr.noExternal

Why would I want to do this? I don't see why Vite should transpile Vuetify? (Thanks for your lovely work btw.)

brillout · 2021-07-19T15:57:59Z

Adding /index.mjs resolves the error but I now get:

5:56:15 PM [vite] Error when evaluating SSR module /node_modules/vuetify/lib/components/VList/VListItemTitle.mjs:
TypeError: Cannot read property 'defineComponent' of null
    at Module.createSimpleFunctional (../../src/util/createSimpleFunctional.ts:9:24)
    at ../../../src/components/VList/VListItemTitle.ts:3:37
    at instantiateModule (/home/romuuu/tmp/vite-plugin-ssr-vuetify/node_modules/vite/dist/node/chunks/dep-11db14da.js:73323:166)

Not only for VListItemTitle but also for many(/all?) components.

brillout · 2021-07-19T15:59:09Z

I updated the reproduction https://github.com/brillout/vuetify3-ssr

brillout · 2021-07-19T16:02:35Z

Adding /index.mjs resolves the error but I now get:

5:56:15 PM [vite] Error when evaluating SSR module /node_modules/vuetify/lib/components/VList/VListItemTitle.mjs:
TypeError: Cannot read property 'defineComponent' of null
    at Module.createSimpleFunctional (../../src/util/createSimpleFunctional.ts:9:24)
    at ../../../src/components/VList/VListItemTitle.ts:3:37
    at instantiateModule (/home/romuuu/tmp/vite-plugin-ssr-vuetify/node_modules/vite/dist/node/chunks/dep-11db14da.js:73323:166)

Not only for VListItemTitle but also for many(/all?) components.

Adding vuetify to ssr.noExternal doesn't help.

brillout · 2021-07-19T16:03:26Z

I also get:

Circular dependency: /home/romuuu/tmp/vite-plugin-ssr-vuetify/node_modules/vite-plugin-ssr/dist/esm/page-files/pageFiles.node.js -> /pages/_default/_default.page.server.js -> /pages/_default/app.js -> /pages/_default/vuetify.js -> /node_modules/vuetify/lib/entry.mjs -> /node_modules/vuetify/lib/framework.mjs -> /node_modules/vuetify/lib/util/index.mjs -> /node_modules/vuetify/lib/util/createSimpleFunctional.mjs -> /node_modules/vuetify/lib/util/index.mjs
Circular dependency: /home/romuuu/tmp/vite-plugin-ssr-vuetify/node_modules/vite-plugin-ssr/dist/esm/page-files/pageFiles.node.js -> /pages/_default/_default.page.server.js -> /pages/_default/app.js -> /pages/_default/vuetify.js -> /node_modules/vuetify/lib/components/index.mjs -> /node_modules/vuetify/lib/components/VTimeline/index.mjs -> /node_modules/vuetify/lib/components/VTimeline/VTimelineItem.mjs -> /node_modules/vuetify/lib/components/VTimeline/VTimelineDivider.mjs -> /node_modules/vuetify/lib/components/index.mjs

KaelWD · 2021-07-19T16:17:49Z

Looks like we get the same thing in our SSR environment too. This was probably broken by 3520db1

see #13936

vuetifyjs/vuetify#13936

remohammadi · 2021-08-16T22:01:52Z

I am getting the same error when I try to setup vuetify and pass it to wrapper in my unit test code. But, with yarn serve, I do not have such problem. The same code works perfectly. I should note that adding index.mjs didn't help me. So, maybe I should open a new issue. Should I? 😁

vuetify version: 3.0.0-alpha.10
jest version: 26.6.3

// StatusBtn.spec.ts
import { shallowMount } from "@vue/test-utils";
import { createI18n } from "vue-i18n";
import { store, key } from "@/store";
import { createVuetify } from "vuetify";
import * as components from "vuetify/lib/components";
import * as directives from "vuetify/lib/directives";
import StatusBtn from "@/components/commons/StatusBtn.vue";

describe("StatusBtn.vue", () => {
  it("report disconnected status with the initial state", () => {
    const i18n = createI18n({ locale: "en" });
    const vuetify = createVuetify({components, directives});
    const wrapper = shallowMount(StatusBtn, {
      global: {
        plugins: [i18n, vuetify, [store, key]],
      },
    });
    expect(wrapper.text()).toMatch("status: disconnected");
  });
});

I get:

  ● Test suite failed to run

    Cannot find module 'vuetify/lib/components' from 'tests/unit/StatusBtn.spec.ts'

When /index.mjs was added:

  ● Test suite failed to run

    tests/unit/StatusBtn.spec.ts:5:29 - error TS2307: Cannot find module 'vuetify/lib/components/index.mjs' or its corresponding type declarations.

jamesladd · 2021-08-24T04:16:52Z

I have this working for me on the client side.

page/_default/vuetify.js ->

`import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/lib/components/index.mjs'
import * as directives from 'vuetify/lib/directives/index.mjs'

export default createVuetify({ components, directives })
`

vite.config.js -> ( this is a little specific to my needs - ie: runtimeCompiler and vue alias.

export default { runtimerCompiler: true, plugins: [vue(), ssr()], define: { 'process.env': {} }, ssr: { noExternal: ['vuetify'] }, resolve: { alias: { vue: 'vue/dist/vue.esm-bundler.js', }, },

@vue/cli 4.5.13
"vuetify": "^3.0.0-alpha.10",
"vite-plugin-ssr": "^0.2.11",
"vue": "^3.0.11",

The fact that a browser based button is shown then styled is a little worry but no related.

I'll try the above with a vanilla vite-ssr-plugin project and let you know.

KaelWD · 2021-09-04T17:39:50Z

Alpha 11 now uses package exports, so you should be able to import from vuetify/components without an extension.

brillout · 2021-09-06T09:56:56Z

@KaelWD I can confirm.

But now I get:

11:44:06 AM [vite] Error when evaluating SSR module /renderer/vuetify.js:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/romuuu/tmp/vite-plugin-ssr-vuetify/node_modules/vuetify/lib/framework.mjs

Repro: https://github.com/brillout/vite-plugin-ssr-vuetify/tree/updated-deps.

Note that the repro does use ESM (package.json#type === 'module').

It's a Vite problem and there is a proposal to make Vite better support ESM dependencies. @KaelWD I can keep you in the loop, if you want.

ghost added the S: triage label Jul 16, 2021

KaelWD self-assigned this Jul 19, 2021

KaelWD added a commit that referenced this issue Jul 19, 2021

fix: remove circular dependencies

57d759a

see #13936

brillout mentioned this issue Jul 21, 2021

[SSR] Stop resolving externalized dependencies vitejs/vite#4340

Closed

glen-84 added the SSR SSR label Jul 29, 2021

YangQuan666 added a commit to YangQuan666/yangquan666.github.io that referenced this issue Aug 11, 2021

参考了vuetify的issue修复了build错误问题

1258c37

vuetifyjs/vuetify#13936

jamesladd mentioned this issue Aug 21, 2021

Thanks brillout/vite-plugin-ssr-vuetify#1

Closed

KaelWD added the Prerelease label Sep 1, 2021

KaelWD closed this as completed Sep 4, 2021

wildone mentioned this issue Feb 21, 2022

[Documentation][3.0.0-beta.1] Unit testing #14749

Closed

KaelWD added this to the v3.0.0-beta milestone Mar 13, 2022

KaelWD removed the Prerelease label Mar 13, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug Report][3.0.0-alpha.9][SSR] Cannot find module 'vuetify/lib/components' #13936

[Bug Report][3.0.0-alpha.9][SSR] Cannot find module 'vuetify/lib/components' #13936

brillout commented Jul 16, 2021

pg-ahenry commented Jul 16, 2021 •

edited

Loading

frandiox commented Jul 17, 2021

KaelWD commented Jul 19, 2021

brillout commented Jul 19, 2021

KaelWD commented Jul 19, 2021

pg-ahenry commented Jul 19, 2021

brillout commented Jul 19, 2021

brillout commented Jul 19, 2021

brillout commented Jul 19, 2021

brillout commented Jul 19, 2021

brillout commented Jul 19, 2021

KaelWD commented Jul 19, 2021

remohammadi commented Aug 16, 2021

jamesladd commented Aug 24, 2021

KaelWD commented Sep 4, 2021

brillout commented Sep 6, 2021

[Bug Report][3.0.0-alpha.9][SSR] Cannot find module 'vuetify/lib/components' #13936

[Bug Report][3.0.0-alpha.9][SSR] Cannot find module 'vuetify/lib/components' #13936

Comments

brillout commented Jul 16, 2021

Environment

Steps to reproduce

Expected Behavior

Actual Behavior

Reproduction Link

Other comments

pg-ahenry commented Jul 16, 2021 • edited Loading

frandiox commented Jul 17, 2021

KaelWD commented Jul 19, 2021

brillout commented Jul 19, 2021

KaelWD commented Jul 19, 2021

pg-ahenry commented Jul 19, 2021

brillout commented Jul 19, 2021

brillout commented Jul 19, 2021

brillout commented Jul 19, 2021

brillout commented Jul 19, 2021

brillout commented Jul 19, 2021

KaelWD commented Jul 19, 2021

remohammadi commented Aug 16, 2021

jamesladd commented Aug 24, 2021

KaelWD commented Sep 4, 2021

brillout commented Sep 6, 2021

pg-ahenry commented Jul 16, 2021 •

edited

Loading