Webpack alias in quasar.conf.js .15+



  • 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



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



  • @nachodd Thanks. BTW I moved to vscode…


Log in to reply