No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Webpack alias in quasar.conf.js .15+

    Help
    7
    12
    8036
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • H
      Heisenberg last edited by

      Great! thanks!

      1 Reply Last reply Reply Quote 0
      • N
        njsteele last edited by

        Awesome!

        1 Reply Last reply Reply Quote 0
        • L
          leon last edited by 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

          1 Reply Last reply Reply Quote 2
          • M
            MusicForMellons last edited by 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)…?

            1 Reply Last reply Reply Quote 0
            • S
              smakinson last edited by

              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.

              F 1 Reply Last reply Reply Quote 0
              • M
                MusicForMellons last edited by

                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

                1 Reply Last reply Reply Quote 0
                • S
                  smakinson last edited by

                  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.

                  1 Reply Last reply Reply Quote 0
                  • F
                    fpe @smakinson last edited by

                    @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

                    N 1 Reply Last reply Reply Quote 0
                    • N
                      nachodd @fpe last edited by

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

                      1 Reply Last reply Reply Quote 1
                      • M
                        MusicForMellons last edited by

                        @nachodd Thanks. BTW I moved to vscode…

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post