I am trying to use my button images as before in v5 but wherever I want to include images from my static folder the mobile screen gets white blank…
Adding this simply line of code in my home page inside page-content all the screen gets white blank, I do not understand this behaviour because in v5 was working perfectly!
this is not working in v6, I tried also png images and lazy loading same issue and error in the console 
<img src="./static/img/log-out.svg">
console error showing:
Unhandled Promise Rejection: Error: TypeError: Attempted to assign to readonly property.
I made a clean install of framework7 today with latest version v6 and if I embed images again the console gives this error so I think it must be a bug here…
error in console again and white blank screen!
my package.json
{
"name": "app name",
"private": true,
"version": "1.0.0",
"description": "app description...",
"repository": "",
"license": "UNLICENSED",
"scripts": {
"start": "npm run dev",
"dev": "cross-env NODE_ENV=development webpack serve --config ./build/webpack.config.js",
"build": "cross-env NODE_ENV=production node ./build/build.js",
"build-cordova": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build",
"build-cordova-ios": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build ios",
"cordova-ios": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova run ios",
"build-cordova-android": "cross-env TARGET=cordova cross-env NODE_ENV=production node ./build/build.js && cd cordova && cordova build android",
"cordova-android": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova run android"
},
"browserslist": [
"Android >= 7",
"IOS >= 11",
"Safari >= 11",
"Chrome >= 49",
"Firefox >= 31",
"Samsung >= 5"
],
"dependencies": {
"dom7": "^3.0.0",
"framework7": "^6.0.10",
"skeleton-elements": "^3.3.0",
"swiper": "^6.4.15"
},
"devDependencies": {
"@babel/core": "^7.13.1",
"@babel/plugin-transform-runtime": "^7.13.2",
"@babel/preset-env": "^7.13.0",
"@babel/preset-react": "^7.12.13",
"@babel/runtime": "^7.13.2",
"babel-loader": "^8.2.2",
"chalk": "^4.1.0",
"copy-webpack-plugin": "^7.0.0",
"cross-env": "^7.0.3",
"css-loader": "^5.0.2",
"css-minimizer-webpack-plugin": "^1.2.0",
"file-loader": "^6.2.0",
"framework7-loader": "^3.0.1",
"html-webpack-plugin": "^5.2.0",
"mini-css-extract-plugin": "^1.3.8",
"node-sass": "^5.0.0",
"ora": "^5.3.0",
"postcss-loader": "^5.0.0",
"postcss-preset-env": "^6.7.0",
"rimraf": "^3.0.2",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.1",
"url-loader": "^4.1.1",
"webpack": "^5.24.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
}
}
web pack-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 CssMinimizerPlugin = require('css-minimizer-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,
target: env === "development" ? "web" : "browserslist",
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: ['.js', '.json'],
alias: {
'@': resolvePath('src'),
},
},
devtool: env === 'production' ? 'source-map' : 'eval',
devServer: {
hot: true,
open: true,
compress: true,
contentBase: '/www/',
disableHostCheck: true,
historyApiFallback: true,
},
optimization: {
concatenateModules: true,
minimizer: [new TerserPlugin()],
},
module: {
rules: [
{
test: /\.(mjs|js|jsx)$/,
include: [
resolvePath('src'),
],
use: [
{
loader: require.resolve('babel-loader'),
},
]
},
{
test: /\.f7.(html|js)$/,
use: [
'babel-loader',
'framework7-loader',
],
},
{
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]',
},
type: 'javascript/auto'
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[ext]',
},
type: 'javascript/auto'
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[ext]',
},
type: 'javascript/auto'
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(env),
'process.env.TARGET': JSON.stringify(target),
}),
...(env === 'production' ? [
new CssMinimizerPlugin(),
] : [
// Development only plugins
new webpack.HotModuleReplacementPlugin(),
]),
new HtmlWebpackPlugin({
filename: './index.html',
template: './src/index.html',
inject: true,
minify: env === 'production' ? {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: false,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
} : false,
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
new CopyWebpackPlugin({
patterns: [
{
noErrorOnMissing: true,
from: resolvePath('src/static'),
to: resolvePath(isCordova ? 'cordova/www/static' : 'www/static'),
},
],
}),
],
};
any solution for this error?
thanks
