Import markdown file in script tag to display help

I’m trying to read the content of a markdown file (.md) stored in statics or assets folder of my quasar project and I have updated the quasar.conf.js file with the following change to support raw file loading after adding raw-loader to my project

  extendWebpack(cfg) {
    cfg.module.rules.push({
      test: /\.md$/i,
      use: "raw-loader"
    });

I’m trying to load the markdown, using import command from one of the .vue component script tag as below

import md from "~statics/help.md";

But when I run the project, it compiles to 100% and throws the below error

• Compiling:
 └── SPA ████████████████████ 100% done in ~13s



 ERROR  Failed to compile with 1 errors                                                                                     8:22:43 AM

This dependency was not found:

* ~statics/help.md in ./node_modules/babel-loader/lib??ref--1-0!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/Help.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save ~statics/help.md

[rstoenescu]

If u’ve seen “use” instead of “loader” then it’s a mistake in Webpack’s docs. Meaning: we’re not using “our own Webpack” but the official one 😃

[hawkeye64]

@joyalkj Alternatively, in quasar.conf.js add an alias for a markdown folder:

      chainWebpack (chain) {
        chain.resolve.alias.merge({
          markdown: path.resolve(__dirname, './src/markdown')
        })
      }

Then you can do:

import md from 'markdown/help.md'