Svelte application not working on android version 6.0.1 or Later

Question

I have created Cordova application demo in Svelte but when I run the application on android 6.0.1 or later application is stuck at splace screen.

You can find inspect screen, screenshot from below link. I have tried many babel hacks to convert ... which is js many spread operator to convert but no solution will work.

There is many js issues arise, from there two most important issue is below.

Uncaught Syntax error: Unexpected token ...

Uncaught Syntax error: Undefined token *

https://forum.framework7.io/uploads/default/optimized/2X/5/511119ee16112390bb2bc6ecc4026b3028203e72_2_1380x786.png

I am using Framwork7-CLI to create a Cordova android application, Framework7 version is 5.5.0 and latest Framwork7 CLI version.

Currently, I have selected Cordova and PWA application with Tabbed view F7 template.

My pacakage.json, babel.config.js and webpack.config.js file are below.

pacakage.json

{
  "name": "test-app",
  "private": true,
  "version": "1.0.0",
  "description": "Test App",
  "repository": "",
  "license": "UNLICENSED",
  "framework7": {
    "cwd": "/Users/hirenraiyani/demo_apps",
    "type": [
      "pwa",
      "cordova"
    ],
    "name": "Test App",
    "framework": "svelte",
    "template": "tabs",
    "bundler": "webpack",
    "cssPreProcessor": "less",
    "theming": {
      "customColor": false,
      "color": "#007aff",
      "darkTheme": false,
      "iconFonts": true,
      "fillBars": false
    },
    "customBuild": false,
    "webpack": {
      "developmentSourceMap": true,
      "productionSourceMap": true,
      "hashAssets": false,
      "preserveAssetsPaths": false,
      "inlineAssets": true
    },
    "pkg": "io.framework7.myapp",
    "cordova": {
      "folder": "cordova",
      "platforms": [
        "android"
      ],
      "plugins": [
        "cordova-plugin-statusbar",
        "cordova-plugin-keyboard",
        "cordova-plugin-splashscreen",
        "cordova-plugin-wkwebview-engine",
        "cordova-plugin-device",
        "cordova-plugin-inappbrowser",
        "cordova-plugin-file",
        "cordova-plugin-media"
      ]
    }
  },
  "scripts": {
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
    "build-dev": "cross-env NODE_ENV=development node ./build/build.js",
    "build-prod": "cross-env NODE_ENV=production node ./build/build.js",
    "build-dev-cordova": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build",
    "build-prod-cordova": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build",
    "android-prod": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova run android",
    "postinstall": "cpy ./node_modules/framework7-icons/fonts/*.* ./src/fonts/"
  },
  "browserslist": [
    "Android >= 5",
    "IOS >= 11",
    "Safari >= 11",
    "Chrome >= 49",
    "Firefox >= 31",
    "Samsung >= 5"
  ],
  "dependencies": {
    "dom7": "^2.1.3",
    "framework7": "^5.5.0",
    "framework7-icons": "^3.0.0",
    "framework7-svelte": "^5.5.0",
    "svelte": "^3.19.2",
    "template7": "^1.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@babel/runtime": "^7.8.7",
    "babel-loader": "^8.0.6",
    "chalk": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "cpy-cli": "^3.1.0",
    "cross-env": "^7.0.2",
    "css-loader": "^3.4.2",
    "file-loader": "^5.1.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "ora": "^4.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "rimraf": "^3.0.2",
    "style-loader": "^1.1.3",
    "svelte-loader": "^2.13.6",
    "terser-webpack-plugin": "^2.3.5",
    "url-loader": "^3.0.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "workbox-webpack-plugin": "^5.0.0"
  }
}

babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', {
      modules: false,
    }],
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-syntax-dynamic-import',
  ],
};

webpack.config.js

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');

const path = require('path');

function resolvePath(dir) {
  return path.join(__dirname, '..', dir);
}

const env = process.env.NODE_ENV || 'development';
const target = process.env.TARGET || 'web';
const isCordova = target === 'cordova';


module.exports = {
  mode: env,
  entry: {
    app: './src/js/app.js',
  },
  output: {
    path: resolvePath(isCordova ? 'cordova/www' : 'www'),
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].js',
    publicPath: '',
    hotUpdateChunkFilename: 'hot/hot-update.js',
    hotUpdateMainFilename: 'hot/hot-update.json',
  },
  resolve: {
    extensions: ['.mjs', '.js', '.svelte', '.json'],
    alias: {

      '@': resolvePath('src'),
    },
    mainFields: ['svelte', 'browser', 'module', 'main']
  },
  devtool: env === 'production' ? 'source-map' : 'eval',
  devServer: {
    hot: true,
    open: true,
    compress: true,
    contentBase: '/www/',
    disableHostCheck: true,
    historyApiFallback: true,
    watchOptions: {
      poll: 1000,
    },
  },
  optimization: {
    minimizer: [new TerserPlugin({
      sourceMap: true,
    })],
  },
  module: {
    rules: [
      {
        test: /\.(mjs|js|jsx)$/,
        use: 'babel-loader',
        include: [
          resolvePath('src'),
          resolvePath('node_modules/framework7'),


          resolvePath('node_modules/framework7-svelte'),
          resolvePath('node_modules/svelte'),
          resolvePath('node_modules/template7'),
          resolvePath('node_modules/dom7'),
          resolvePath('node_modules/ssr-window'),
        ],
      },

      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
          options: {
            emitCss: true,
          },
        },
      },

      {
        test: /\.css$/,
        use: [
          (env === 'development' ? 'style-loader' : {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          }),
          'css-loader',
          'postcss-loader',
        ],
      },
      {
        test: /\.styl(us)?$/,
        use: [
          (env === 'development' ? 'style-loader' : {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          }),
          'css-loader',
          'postcss-loader',
          'stylus-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          (env === 'development' ? 'style-loader' : {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          }),
          'css-loader',
          'postcss-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(sa|sc)ss$/,
        use: [
          (env === 'development' ? 'style-loader' : {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          }),
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'images/[name].[ext]',

        },
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'media/[name].[ext]',

        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[ext]',

        },
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(env),
      'process.env.TARGET': JSON.stringify(target),
    }),

    ...(env === 'production' ? [
      new OptimizeCSSPlugin({
        cssProcessorOptions: {
          safe: true,
          map: { inline: false },
        },
      }),
      new webpack.optimize.ModuleConcatenationPlugin(),
    ] : [
      // Development only plugins
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
    ]),
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: './src/index.html',
      inject: true,
      minify: env === 'production' ? {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
      } : false,
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
    }),
    new CopyWebpackPlugin([
      {
        from: resolvePath('src/static'),
        to: resolvePath(isCordova ? 'cordova/www/static' : 'www/static'),
      },
      {
        from: resolvePath('src/manifest.json'),
        to: resolvePath('www/manifest.json'),
      },
    ]),
    ...(!isCordova ? [
      new WorkboxPlugin.InjectManifest({
        swSrc: resolvePath('src/service-worker.js'),
      })
    ] : []),

  ],
};

Answer 1

After 5 days of working finally this solution works...

package.json check below things add browserlist if not added,

"browserslist": [
    "Android >= 5",
    "IOS >= 11",
    "Safari >= 11",
    "Chrome >= 49",
    "Firefox >= 31",
    "Samsung >= 5"
  ],

add core-js on dependencies,

"dependencies": {
    "core-js": "^3.6.4",
    ....
}

check **devdependencies**,
"devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@babel/runtime": "^7.8.7",
    "babel-loader": "^8.0.6",
    ...
}

babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', {
      "modules": false,
      "corejs": 3,
      "useBuiltIns": "usage",
      "targets": {
        "browsers": [
          "> 0.5%",
          "last 2 major versions",
          "safari >= 9",
          "not ie <= 11",
          "not dead"
        ]
      }
    }],
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-syntax-dynamic-import',
  ],
};

Most important webpack.config.js on module.exports JSON check below rules for

 module: {
    rules: [
    ....
    {
        test: /\.svelte$/,
        use: [
          'babel-loader',
          {
            loader: 'svelte-loader',
            options: {
              hotReload: false,
              emitCss: true,
            },
          },
        ],
      },
      ....

And now rebuild your Cordova application with svelte and f7, all working good.