为什么安装 @quasar/quasar-ui-qmarkdown 之后报错 Can't resolve 'quasar'?

Question

为什么安装 @quasar/quasar-ui-qmarkdown 之后报错 Can't resolve 'quasar'

衔接上一个问题：yarn 安装 qmarkdown 报 yarn 网络错误?

{
  "name": "tracking-king",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@ant-design/icons-vue": "^7.0.1",
    "@quasar/quasar-ui-qmarkdown": "^2.0.0-beta.10",
    "ant-design-vue": "^3.2.20",
    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "echarts": "^5.4.2",
    "element-plus": "^2.3.4",
    "vue": "^3.2.13",
    "vue-json-viewer": "^3.0.4",
    "vue-request": "^2.0.4",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "less": "^4.1.3",
    "less-loader": "^11.1.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "vue/multi-word-component-names": 0,
      "vue/no-unused-components": "off",
      "no-unused-vars": "off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

已经安装上了，再按照 https://qmarkdown.netlify.app/all-about-qmarkdown/installatio... 提示修改 src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
// import Antd from "ant-design-vue";
// import "ant-design-vue/dist/antd.css";

import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import JsonViewer from "vue-json-viewer";
import TopBar from "@/components/common/TopBar.vue";


import { boot } from 'quasar/wrappers'
import Plugin from '@quasar/quasar-ui-qmarkdown'
import '@quasar/quasar-ui-qmarkdown/dist/index.css'

const app = createApp(App).use(router).use(Antd).use(JsonViewer).use(Plugin);

app.component("top-bar", TopBar);

app.mount("#app");

但是使用 yarn serve 启动就报错了, 这是为什么呢？

 ERROR  Failed to compile with 2 errors                                                     2:24:20 PM

 error  in ./node_modules/@quasar/quasar-ui-qmarkdown/dist/index.esm.js

Module not found: Error: Can't resolve 'quasar' in '/Users/ponponon/Desktop/code/work/pon-it/tracking-king/node_modules/@quasar/quasar-ui-qmarkdown/dist'

 error  in ./src/main.js

Module not found: Error: Can't resolve 'quasar/wrappers' in '/Users/ponponon/Desktop/code/work/pon-it/tracking-king/src'

ERROR in ./node_modules/@quasar/quasar-ui-qmarkdown/dist/index.esm.js 14:0-68
Module not found: Error: Can't resolve 'quasar' in '/Users/ponponon/Desktop/code/work/pon-it/tracking-king/node_modules/@quasar/quasar-ui-qmarkdown/dist'
 @ ./src/main.js 12:0-49 14:69-75

ERROR in ./src/main.js 11:0-39
Module not found: Error: Can't resolve 'quasar/wrappers' in '/Users/ponponon/Desktop/code/work/pon-it/tracking-king/src'

webpack compiled with 2 errors

---

使用 boot 之后还是会报错

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
// import Antd from "ant-design-vue";
// import "ant-design-vue/dist/antd.css";

import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import JsonViewer from "vue-json-viewer";
import TopBar from "@/components/common/TopBar.vue";

import { boot } from 'quasar/wrappers'
import Plugin from '@quasar/quasar-ui-qmarkdown'
import '@quasar/quasar-ui-qmarkdown/dist/index.css'

boot(() => {
    const app = createApp(App);
    app
      .use(router)
      .use(Antd)
      .use(JsonViewer)
      .use(Plugin);

    app.component("top-bar", TopBar);
    app.mount("#app");
});

日志

 ERROR  Failed to compile with 2 errors                                                     3:20:57 PM

 error  in ./node_modules/@quasar/quasar-ui-qmarkdown/dist/index.esm.js

Module not found: Error: Can't resolve 'quasar' in '/Users/ponponon/Desktop/code/work/pon-it/tracking-king/node_modules/@quasar/quasar-ui-qmarkdown/dist'

 error  in ./src/main.js

Module not found: Error: Can't resolve 'quasar/wrappers' in '/Users/ponponon/Desktop/code/work/pon-it/tracking-king/src'

ERROR in ./node_modules/@quasar/quasar-ui-qmarkdown/dist/index.esm.js 14:0-68
Module not found: Error: Can't resolve 'quasar' in '/Users/ponponon/Desktop/code/work/pon-it/tracking-king/node_modules/@quasar/quasar-ui-qmarkdown/dist'
 @ ./src/main.js 12:0-49 16:48-54

ERROR in ./src/main.js 11:0-39
Module not found: Error: Can't resolve 'quasar/wrappers' in '/Users/ponponon/Desktop/code/work/pon-it/tracking-king/src'

webpack compiled with 2 errors

---

我的项目使用 vue cli 创建的

所以我换用 「Vue project from src」

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import JsonViewer from "vue-json-viewer";
import TopBar from "@/components/common/TopBar.vue";

import Plugin from "@quasar/quasar-ui-qmarkdown/src/QMarkdown.js";
import "@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass";

const app = createApp(App).use(router).use(Antd).use(JsonViewer).use(Plugin);

app.component("top-bar", TopBar);

app.mount("#app");

但是还是报错了

 ERROR  Failed to compile with 2 errors                                                     3:53:26 PM

 error  in ./node_modules/@quasar/quasar-ui-qmarkdown/src/components/QMarkdown.js

Module not found: Error: Can't resolve 'quasar' in '/Users/ponponon/Desktop/code/work/pon-it/tracking-king/node_modules/@quasar/quasar-ui-qmarkdown/src/components'

Failed to resolve loader: sass-loader
You may need to install it.
ERROR in ./node_modules/@quasar/quasar-ui-qmarkdown/src/components/QMarkdown.js 15:0-68
Module not found: Error: Can't resolve 'quasar' in '/Users/ponponon/Desktop/code/work/pon-it/tracking-king/node_modules/@quasar/quasar-ui-qmarkdown/src/components'
 @ ./node_modules/@quasar/quasar-ui-qmarkdown/src/QMarkdown.js 1:0-76 4:0-68 4:0-68 7:2-11 8:2-25 11:18-32 11:34-43
 @ ./src/main.js 8:0-66 10:69-75

ERROR in ./src/main.js 9:0-56
Module not found: Error: Can't resolve 'sass-loader' in '/Users/ponponon/Desktop/code/work/pon-it/tracking-king'

webpack compiled with 2 errors

---

yarn add quasar 之后，quasar 相关的报错没有了

---

但是 yarn add sass-loader sass 遇到了 node 版本报错

─➤  yarn add sass-loader sass                                                                    1 ↵
yarn add v1.22.21
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
warning Pattern ["vue-demi@latest"] is trying to unpack in the same destination "/Users/ponponon/Library/Caches/Yarn/v6/npm-vue-demi-0.14.7-8317536b3ef74c5b09f268f7782e70194567d8f2-integrity/node_modules/vue-demi" as pattern ["vue-demi@*","vue-demi@*"]. This could result in non-deterministic behavior, skipping.
error sass-loader@14.1.1: The engine "node" is incompatible with this module. Expected version ">= 18.12.0". Got "16.20.1"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

我很奇怪，yarn 不会自动帮我选择一个可用版本吗？

---

yarn add sass-loader sass 问题，我通过 nvm 切换到 nodejs18.x 解决了

Answer 1

如果是vite脚手架，按这个来

安装依赖

"@quasar/quasar-ui-qmarkdown": "^2.0.0-beta.10",
"quasar": "^2.15.1",

修改main.js

import { createApp } from 'vue';
import Plugin from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js';
import '@quasar/quasar-ui-qmarkdown/dist/index.min.css';

import './style.css';
import App from './App.vue';

createApp(App).use(Plugin).mount('#app');