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

    webpackJsonp is not defined - quasar 0.14.7

    Help
    3
    4
    1379
    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.
    • A
      anonimo last edited by anonimo

      I have a large, finished project that uses the 0.14.7 version of the quasar framework, which is returning this error when I try to run the generated file in /dist/js/app.js, because of time issues I can not carry this to version 0.15.

      From what I have read about the problem the CommonsChunkPlugin plugin has updated and some settings related to minChunks, the problem is that I do not know anything about webpack configurations, and so I read it is a very big ecosystem, so the time item prevents me from deciphering it now.

      If anyone can help me fix this problem I appreciate it.

      Solution in webpack github:
      https://github.com/webpack/webpack/issues/368

      my webpack.prod.conf file:

      var
        path = require('path'),
        config = require('../config'),
        cssUtils = require('./css-utils'),
        webpack = require('webpack'),
        merge = require('webpack-merge'),
        baseWebpackConfig = require('./webpack.base.conf'),
        ExtractTextPlugin = require('extract-text-webpack-plugin'),
        HtmlWebpackPlugin = require('html-webpack-plugin'),
        OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'),
        CopyWebpackPlugin = require('copy-webpack-plugin'),
        SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'),
        fsUtils = require('./fs-utils')
      
      module.exports = merge(baseWebpackConfig, {
        module: {
          rules: cssUtils.styleRules({
            sourceMap: config.build.productionSourceMap,
            extract: true,
            postcss: true
          })
        },
        devtool: config.build.productionSourceMap ? '#source-map' : false,
        plugins: [
          new webpack.optimize.UglifyJsPlugin({
            sourceMap: config.build.productionSourceMap,
            minimize: true,
            compress: {
              warnings: false
            }
          }),
          // Compress extracted CSS. We are using this plugin so that possible
          // duplicated CSS from different components can be deduped.
          new OptimizeCSSPlugin({
            cssProcessorOptions: {
              safe: true
            }
          }),
          // extract css into its own file
          new ExtractTextPlugin({
            filename: '[name].[contenthash].css'
          }),
          new HtmlWebpackPlugin({
            filename: path.resolve(__dirname, '../dist/index.html'),
            template: 'src/index.html',
            inject: true,
            minify: {
              removeComments: true,
              collapseWhitespace: true,
              removeAttributeQuotes: true
              // more options:
              // https://github.com/kangax/html-minifier#options-quick-reference
            },
            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
            chunksSortMode: 'dependency',
            serviceWorkerLoader: `<script>${fsUtils.loadMinified(path.join(__dirname,
              './service-worker-prod.js'))}</script>`
          }),
          // split vendor js into its own file
          new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module, count) {
              // any required modules inside node_modules are extracted to vendor
              return (
                module.resource &&
                /\.js$/.test(module.resource) &&
                (
                  module.resource.indexOf('quasar') > -1 ||
                  module.resource.indexOf(
                    path.join(__dirname, '../node_modules')
                  ) === 0
                )
              )
            }
          }),
          // extract webpack runtime and module manifest to its own file in order to
          // prevent vendor hash from being updated whenever app bundle is updated
          new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            chunks: ['vendor']
          }),
          // copy custom static assets
          new CopyWebpackPlugin([
            {
              from: path.resolve(__dirname, '../src/statics'),
              to: 'statics',
              ignore: ['.*']
            }
          ]),
          // service worker caching
          new SWPrecacheWebpackPlugin({
            cacheId: 'website-irradiar',
            filename: 'service-worker.js',
            staticFileGlobs: ['dist/**/*.{js,html,css,woff,svg}'],
            minify: true,
            stripPrefix: 'dist/'
          })
        ]
      })
      
      
      1 Reply Last reply Reply Quote 0
      • A
        anonimo last edited by

        It was no big deal, nor was there a bug, just needed to use lite-server to test the build file.

        1 Reply Last reply Reply Quote 0
        • V
          vietlai1190 last edited by

          How to fix it??

          1 Reply Last reply Reply Quote 0
          • a47ae
            a47ae last edited by

            If I understand @anonimo correctly the issue was that he was not using a webserver for serving the build files.
            Build files only work when served via a proper webserver and not when you open the index file in a browser.

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