I am using react@16.8.6
, typescript@^3.4.1
, webpack@^4.41.2
, , webpack-cli@^3.3.10
for creating PWA compatible Web-App
Below is my webpack.config.js
file config:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const PUBLIC_PATH = '/';
module.exports = {
target: 'node',
entry: {
app: './src/index.tsx',
vendor: ['react', 'react-dom', 'prop-types'],
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, './dist/js'),
chunkFilename: '[name].bundle.js',
publicPath: '/',
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
enforce: true,
chunks: 'all'
}
}
}
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'),
baseHref: './',
inject: true,
appMountId: 'app',
devServer: 'https://localhost:3456',
mobile: true,
lang: 'en-US',
title: 'My App',
scripts: [
'http://example.com/somescript.js',
{
src: '/myModule.js',
type: 'module'
}
],
}),
new SWPrecacheWebpackPlugin(
{
cacheId: 'my-domain-cache-id',
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
minify: true,
navigateFallback: PUBLIC_PATH + 'index.html',
staticFileGlobsIgnorePatterns: [/\.map$/, /manifest\.json$/]
}
),
new WebpackPwaManifest({
name: 'akhilesh1 Web App',
short_name: 'akhilesh1',
description: 'akhilesh1 Progressive Web App!',
background_color: '#ffffff',
theme_color: '#01579b',
'theme-color': '#01579b',
icons: [
{
src: path.resolve('public/images/logo.png'),
sizes: [96, 128, 192, 256, 384, 512],
destination: path.join('assets', 'icons')
},
{
src: path.resolve('public/images/logo.png'),
size: '1024x1024',
destination: path.join('assets', 'icons')
}
],
start_url: '/',
})
],
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
module: {
rules: [{ test: /\.tsx?$/, loader: 'ts-loader' }]
}
};
which is building following directory structure:
My HTML file template is as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="./favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="./js/manifest.json">
<title>React App</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="app"></div>
<script src="./js/vendor.bundle.js" type="text/javascript"></script>
<script src="./js/vendor.bundle.js" type="text/javascript"></script>
<script src="./js/app.bundle.js" type="text/javascript"></script>
</body>
</html>
When I run it I gets following error:
Uncaught TypeError: Cannot read property 'call' of undefined
at r (VM602 vendor.bundle.js:1)
at Object.149 (VM602 vendor.bundle.js:1)
at r (VM602 vendor.bundle.js:1)
at VM602 vendor.bundle.js:1
at VM602 vendor.bundle.js:1
Note: As I am new to PWA I am not sure how can I create clean installable web-app(Means what all things I'm doing wrong in above configuration). Any suggestion is warmly welcome.