search

framework7io / framework7

Full featured HTML framework for building iOS & Android apps
http://framework7.io
MIT License
18.13k stars 3.23k forks source link

Svelte application not working on android version 6.0.1 or Later #3567

Closed raiyanihiren closed 4 years ago

raiyanihiren commented 4 years ago

Describe the bug

From Android 6.0.1 Svelte application is not running, there is many js issues arise, from there two most important issue is below.

  1. Uncaught Syntax error: Unexpected token ...
  2. Uncaught Syntax error: Undefined token *

I have tried solving it using babel as you suggested, https://github.com/framework7io/framework7/issues/3565

I have attached package.json, bible.config.js and webpack.config.js file for review, if need any changes then please let me know.

package.json

{
  "name": "My-Apps",
  "private": true,
  "version": "1.0.0",
  "description": "Description",
  "repository": "",
  "license": "UNLICENSED",
  "framework7": {
    "cwd": "/Users/hirenraiyani/MyApps",
    "type": [
      "web",
      "cordova"
    ],
    "name": "My APps",
    "pkg": "com.test.myapps",
    "framework": "svelte",
    "template": "single-view",
    "cssPreProcessor": false,
    "bundler": "webpack",
    "cordova": {
      "folder": "cordova",
      "platforms": [
        "android"
      ],
      "plugins": [
        "cordova-plugin-statusbar",
        "cordova-plugin-keyboard",
        "cordova-plugin-splashscreen",
        "cordova-plugin-wkwebview-engine"
      ]
    },
    "webpack": {
      "developmentSourceMap": true,
      "productionSourceMap": true,
      "hashAssets": false,
      "preserveAssetsPaths": false,
      "inlineAssets": true
    },
    "theming": {
      "customColor": true,
      "color": "#DD0000",
      "darkTheme": false,
      "iconFonts": true,
      "fillBars": false
    },
    "customBuild": false
  },
  "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",
    "build-android": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build android",
    "build-android-prod": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build android",
    "build-android-release": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build android --release",
    "android": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova run android",
    "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 >= 9.3",
    "Edge >= 15",
    "Safari >= 9.1",
    "Chrome >= 49",
    "Firefox >= 31",
    "Samsung >= 5"
  ],
  "dependencies": {
    "core-js": "^3.6.4",
    "dom7": "^2.1.3",
    "framework7": "^5.5.0",
    "framework7-icons": "^3.0.0",
    "framework7-svelte": "^5.5.0",
    "svelte": "^3.19.2",
    "svelte-awesome": "^2.2.1",
    "sweetalert2": "^9.10.0",
    "template7": "^1.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-exponentiation-operator": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@babel/runtime": "^7.8.4",
    "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",
    "crypto-js": "^3.3.0",
    "css-loader": "^3.4.2",
    "file-loader": "^5.1.0",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.4.1",
    "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"
  }
}

babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', {
      "useBuiltIns": "entry",
      modules: false,
      targets: {
        "esmodules": true,
        browsers: [
          'Android >= 5',
          'IOS >= 9.3',
          'Edge >= 15',
          'Safari >= 9.1',
          'Chrome >= 49',
          'Firefox >= 31',
          'Samsung >= 5',
        ],
      },
      include:[
        "@babel/plugin-transform-spread"
      ]
    }],
  ],
  plugins: [
    // "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-exponentiation-operator",
    "@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 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'),
      },

    ]),

  ],
};

If you have any solution then please let me know.

nolimits4web commented 4 years ago

Do you want to ask a question? Are you looking for support? The Framework7 forum and Stack Overflow are the best places for getting support

Please, don't use GitHub issues for questions