Webpack alias in quasar.conf.js .15+

leon

Im tryng to define some webpack path aliases…

Tried in extended webpack conf , and in root of object return.
Nothing works.

leon

WORKING ALIAS

let path = require('path')

  build: {
      scopeHoisting: true,
      vueRouterMode: 'history',
      // gzip: true,
      // analyze: true,
      // extractCSS: false,
      // useNotifier: false,
      extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules|quasar)/
        })
        cfg.resolve.alias = {
          ...cfg.resolve.alias,
          '@components': path.resolve(__dirname, './src/components'),
          '@helpers': path.resolve(__dirname, './src/helpers'),
          '@module1': path.resolve(__dirname, './src/domains/module1),
          ....
        }
      }
    },

Heisenberg

Great! thanks!

njsteele

Awesome!

leon

Additional to this, if you use VS Code and want CTRL + click - open the import file using alias.

Create a jsconfig.json in root folder of project and :

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "~/*": ["./src/*"],
            "@components/*": ["./src/components/"],
            "@helpers/*": ["./src/helpers/*"],
            "@module1/*": ["./src/domains/module1/*"],
        }
    }
}

Reboot VSCode

MusicForMellons

The Pycharm IDE does not recognize the ‘quasar’ alias and thus gives a warning (‘quasar module not imported’). I tried to make the alias explicit in webpack by doing in quasar.conf.js:
cfg.resolve.alias = {
…cfg.resolve.alias,
‘quasar’: path.resolve(__dirname, ‘/node_modules/quasar-framework/dist/quasar.mat.esm.js’)
}

but i get:

 app:quasar-conf Reading quasar.conf.js +978ms
 app:dev Checking listening address availability (0.0.0.0:8080)... +3ms
 app:quasar-conf Generating Webpack config +5ms
 app:quasar-conf Extending Webpack config +13ms
 app:generator Generating Webpack entry point +2ms
 app:dev-server Booting up... +2ms

 ERROR  Failed to compile with 19 errors22:00:51

This dependency was not found:

* quasar in ./.quasar/quasar.js, ./src/api.js and 17 others

To install it, you can run: npm install --save quasar

Anyone knows how to get rid of the warning (not using eslint escape command all the time)…?

smakinson

I’m using webstorm and I am able to just ignore it not finding quasar ( and now its not really imported much I suppose ), but I am adding a couple alias to quasar.conf.js and I am looking for what I can point Preferences->Languages & Frameworks->JavaScript->Webpack at so it picks the alias up since I will actually be importing those.

MusicForMellons

Yeah, but ‘quasar’ alias is already preconfigured from node_modules/quasar-cli webpack-conf.js:

alias: {
quasar: appPaths.resolve.app(`node_modules/quasar-framework/dist/quasar.${cfg.ctx.themeName}.esm.js`),
src: appPaths.srcDir,
components: appPaths.resolve.src(`components`),
layouts: appPaths.resolve.src(`layouts`),
pages: appPaths.resolve.src(`pages`),
assets: appPaths.resolve.src(`assets`),
plugins: appPaths.resolve.src(`plugins`),
variables: appPaths.resolve.app(`.quasar/variables.styl`),

// CLI using these ones:
'quasar-app-styl': appPaths.resolve.app(`.quasar/app.styl`),
'quasar-app-variables': appPaths.resolve.src(`css/themes/variables.${cfg.ctx.themeName}.styl`),
'quasar-styl': appPaths.resolve.app(`node_modules/quasar-framework/dist/quasar.${cfg.ctx.themeName}.styl`)
}

and when I used that webpack setting it is not picked up by pycharm, see this issue. This issue is recorded here:
https://youtrack.jetbrains.com/issue/WEB-32143

smakinson

Nice, thanks for opening that issue.

I was looking around a bit for a file, maybe in a hidden directory, that is created when I see quasar dev show: “app:quasar-conf Generating Webpack config +6ms”, but I did not find one.

fpe

@smakinson said in Webpack alias in quasar.conf.js .15+:

I’m using webstorm and I am able to just ignore it not finding quasar ( and now its not really imported much I suppose ), but I am adding a couple alias to quasar.conf.js and I am looking for what I can point Preferences->Languages & Frameworks->JavaScript->Webpack at so it picks the alias up since I will actually be importing those.

I also would be grateful to find a working setting for that, since Webstorm / Intellij does not seem to work with quasar.conf.js

nachodd

@fpe @MusicForMellons
I was facing a similar issue in the past.
I managed to solve it by doing this (my answer on stackoverflow): https://stackoverflow.com/questions/34943631/path-aliases-for-imports-in-webstorm/50159420#50159420

Hope it helps!

MusicForMellons

@nachodd Thanks. BTW I moved to vscode…

No More Posting New Topics!

Webpack alias in quasar.conf.js .15+