Webpack alias in quasar.conf.js .15+



  • Im tryng to define some webpack path aliases…

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



  • 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),
              ....
            }
          }
        },


  • Great! thanks!



  • Awesome!



  • 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



  • 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)…?



  • 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.



  • 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



  • 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.



  • @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