A build tool that generates a Web App Manifest, creates all necessary icons, and more!
Monorepo for PWA manifest build tools.
This was once just a Parcel plugin. The plugin still exists, it's under packages/parcel-plugin-pwa-manifest. It's since been modularized to (hopefully) allow support for other build tools like Webpack in the future.
Note that the Parcel 2 version of the plugin is available at packages/parcel-config-pwa-manifest.
Safari pinned tab icons, one of the crucial parts of PWAs, cannot be generated with this plugin
Embed a raster image in an SVG wrapper. I don't know why I didn't think of this earlier.
When trying to build, returning an error indicating there was a problem with "Sharp".
🚨 Build failed.
Error:
Something went wrong installing the "sharp" module
Could not resolve module "REDACTED/node_modules/sharp/build/Release/sharp.node" from "REDACTED/node_modules/sharp/lib/constructor.js"
- Remove the "node_modules/sharp" directory then run
"npm install --ignore-scripts=false --verbose" and look for errors
- Consult the installation documentation at https://sharp.pixelplumbing.com/install
- Search for this error at https://github.com/lovell/sharp/issues
Error:
Something went wrong installing the "sharp" module
Investigating this, I could see that there was an error during a yarn install.
# This file contains the result of Yarn building a package (sharp@npm:0.25.4)
# Script name: install
info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-darwin-arm64v8.tar.gz
ERR! sharp Prebuilt libvips 8.9.1 binaries are not yet available for darwin-arm64v8
info sharp Attempting to build from source via node-gyp but this may fail due to the above error
info sharp Please see https://sharp.pixelplumbing.com/install for required dependencies
This appears to be when installing pwa-manifest it is using the Sharp version 0.25.4 where the ARM64 bindings are only provided from 0.29.0 onwards.
Adding a resolution in my package.json did fix the issue like...
"resolutions": {
"sharp": "0.30.2"
}I tried forking this repo and sending up a PR to bump the version, however yarn commands fail because the first thing it tries to do is get sharp 😄 (I only spent about 5 minutes on this so there might be a way around it).
When installing this package, NPM will complain about not finding the peer dependency "parcel-bundler", but as I understand it, it should be just "parcel" nowadays.
If you agree, I think it would mean a major semver version update, so it should be in 3.x.
"screenshots" doesn't specify its sizes in the manifest
no "sizes" added, like it did with "icons"
I love this plugin. It's almost perfect. "include" worked great with "shortcuts" and else, except "screenshots" which is an automatic task. I'd be great if "screenshots" can be manual task by adding "screenshots" into "include".
Since the created icons have many artifacts when created from svg I use a 512x512 png as baseIcon, this leads to index.html and all css and js bundels to be renamed to the parent folders name. So I have to add an extra step after bundeling to rename the file back to index.html. The strange this is that this only happens with the name index.html, e.g. index2.html gets bundled to index2.html
The bunded index.html persists in its name.
The bunded index.html gets renamed to <parent-folder-name>.[hash].html.
Steps to reproduce the behavior:
Check out this repo and run :
npm run parcel:prodCant add an id to my manifest file
https://developer.chrome.com/blog/pwa-manifest-id/?utm_source=devtools#what-does-the-id-property-do
Add support for an ID in the generated manifest file
It would be great to be able to pass custom properties to the generated icons within the manifest, I'm currently using the Parcel plugin, and would like to add "purpose": "maskable any" to the icons in the generated manifest.
Eventually this could be useful, but right now I'm too lazy. This would allow cleaner separation of code and putting potrace as a dependency in package.json.
Insert a precise description of what the issue is here
When using the publicUrl property the paths in the html does not match:
Insert a clear and concise description of what you expected to happen here.
Insert the actual behavior of the manifest generator here.
see above
Steps to reproduce the behavior:
Add the config to your package.json:
"targets": {
"default": {
"publicUrl": "./assets"
},
.pwamanifestrc
{
"name": "Alexander Eimer",
"shortName": "Alex Eimer",
"theme": "#2d2d2b",
"background_color": "#2d2d2b",
"display": "standalone",
"generateIconOptions": {
"baseIcon": "./src/img/logo.png",
"sizes": [
152,
192,
384,
512
],
"genFavicons": true
}
}
Add any other context about the problem here.
@parcel/core: Could not determine version of @parcel/transformer-raw in node_modules/parcel-config-pwa-manifest/index.json. Either include it in "dependencies" or "parcelDependencies".
/tmp/build_6620895d_/node_modules/parcel-config-pwa-manifest/package.json:35:3
34 | },
> 35 | "dependencies": {
> | ^^^^^^^^^^^^^^
36 | "parcel-namer-pwa-manifest": "^0.0.2",
37 | "parcel-transformer-pwa-manifest": "^0.0.8"
error Command failed with exit code 1.
Must be all ok.
Build failed, @parcel/transformer-raw must be described in package.json
"parcel": "^2.0.0-nightly.607"
To assure that all features work correctly, a full suite of tests is a good idea.
Try to yarn add -D parcel-config-pwa-manifest and I get this error:
error /Users/satsai/Code/node_modules/@pwa-manifest/potrace/node_modules/sharp: Command failed.
Exit code: 1
Command: (node install/libvips && node install/dll-copy && prebuild-install --runtime=napi) || (node-gyp rebuild && node install/dll-copy)
Arguments:
Directory: /Users/satsai/Code/node_modules/@pwa-manifest/potrace/node_modules/sharp
Output:
info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-darwin-arm64v8.tar.gz
ERR! sharp Prebuilt libvips 8.9.1 binaries are not yet available for darwin-arm64v8
info sharp Attempting to build from source via node-gyp but this may fail due to the above error
info sharp Please see https://sharp.pixelplumbing.com/install for required dependencies
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | darwin | arm64
gyp info find Python using Python version 3.9.13 found at "/opt/homebrew/opt/[email protected]/bin/python3.9"
gyp info spawn /opt/homebrew/opt/[email protected]/bin/python3.9
gyp info spawn args [
gyp info spawn args '/Users/satsai/.fnm/node-versions/v16.16.0/installation/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args 'binding.gyp',
gyp info spawn args '-f',
gyp info spawn args 'make',
gyp info spawn args '-I',
gyp info spawn args '/Users/satsai/Code/node_modules/@pwa-manifest/potrace/node_modules/sharp/build/config.gypi',
gyp info spawn args '-I',
gyp info spawn args '/Users/satsai/.fnm/node-versions/v16.16.0/installation/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args '-I',
gyp info spawn args '/Users/satsai/Library/Caches/node-gyp/16.16.0/include/node/common.gypi',
gyp info spawn args '-Dlibrary=shared_library',
gyp info spawn args '-Dvisibility=default',
gyp info spawn args '-Dnode_root_dir=/Users/satsai/Library/Caches/node-gyp/16.16.0',
gyp info spawn args '-Dnode_gyp_dir=/Users/satsai/.fnm/node-versions/v16.16.0/installation/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args '-Dnode_lib_file=/Users/satsai/Library/Caches/node-gyp/16.16.0/<(target_arch)/node.lib',
gyp info spawn args '-Dmodule_root_dir=/Users/satsai/Code/node_modules/@pwa-manifest/potrace/node_modules/sharp',
gyp info spawn args '-Dnode_engine=v8',
gyp info spawn args '--depth=.',
gyp info spawn args '--no-parallel',
gyp info spawn args '--generator-output',
gyp info spawn args 'build',
gyp info spawn args '-Goutput_dir=.'
gyp info spawn args ]
gyp info spawn make
gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
CC(target) Release/obj.target/nothing/../../../../node-addon-api/nothing.o
LIBTOOL-STATIC Release/nothing.a
warning: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/libtool: archive library: Release/nothing.a the table of contents is empty (no object file members in the library define global symbols)
TOUCH Release/obj.target/libvips-cpp.stamp
CXX(target) Release/obj.target/sharp/src/common.o
../src/common.cc:23:10: fatal error: 'vips/vips8' file not found
#include <vips/vips8>
^~~~~~~~~~~~
1 error generated.
make: *** [Release/obj.target/sharp/src/common.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/Users/satsai/.fnm/node-versions/v16.16.0/installation/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack at ChildProcess.emit (node:events:527:28)
gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
gyp ERR! System Darwin 21.6.0
gyp ERR! command "/Users/satsai/.fnm/node-versions/v16.16.0/installation/bin/node" "/Users/satsai/.fnm/node-versions/v16.16.0/installation/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
Package will install without failing.
Tried on node 16 and 18
It's not possible to set apple touch icon padding to 0.
It should be possible to set apple touch icon padding to 0.
The script uses || 12 as default value. 0 being falsy in JS always falls back to 12. BTW why default value is 12?
Set apple touch icon padding to 0.
What can't you do right now that you want added as a new feature?
I need to change multiple html files, not just index.html after i generate all the icons.
My apps usually consists of multiple single page apps (login.html, index.html, admin.html)
If you have any idea for a possible solution, please write it here.
You can change this line:
const injectInto = [resolve(outDir, 'index.html')];
with something like:
const injectInto = (opts.entryPoints || ['index.html]).map( (file)=> resolve(outDir, file) );
What can't you do right now that you want added as a new feature?
I have a build pipeline that needs to know when the icons are generated and the build is finished so it can deploy the app to production
If you have any idea for a possible solution, please write it here.
Emit an event (something like pwa-finished /pwa-builtend/ pwa-bundled)
I've done something similar in my fork: https://github.com/CBN-IT/parcel-plugin-pwa-manifest
Is it possible to specify the serving path for icons?
ie. the plugin will generate srcs like /icon-180x180.hash.png but I want to make it load from /static/icon-180x180.hash.png.
is this supported?
Try to pnpm add -D parcel-config-pwa-manifest and I get the following error on Mac with M2 Chip:
pnpm add -D parcel-config-pwa-manifest
WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
Packages: +43
+++++++++++++++++++++++++++++++++++++++++++
node_modules/.pnpm/[email protected]/node_modules/sharp: Running install script, failed in 3.3s
.../[email protected]/node_modules/sharp install$ (node install/libvips && node install/dll-copy &&
│ info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libv
│ ERR! sharp Prebuilt libvips 8.9.1 binaries are not yet available for darwin-arm64v8
│ info sharp Attempting to build from source via node-gyp but this may fail due to the above e
│ info sharp Please see https://sharp.pixelplumbing.com/install for required dependencies
│ gyp info it worked if it ends with ok
│ gyp info using [email protected]
│ gyp info using [email protected] | darwin | arm64
│ gyp info find Python using Python version 3.9.6 found at "/Library/Developer/CommandLineTool
│ gyp info spawn /Library/Developer/CommandLineTools/usr/bin/python3
│ gyp info spawn args [
│ gyp info spawn args '/Users/fc19061/.cache/node/corepack/pnpm/8.5.0/dist/node_modules/node
│ gyp info spawn args 'binding.gyp',
│ gyp info spawn args '-f',
│ gyp info spawn args 'make',
│ gyp info spawn args '-I',
│ gyp info spawn args '/Users/fc19061/HeliumTank/Boilerplates/JS/ReactWebappParcel/react-web
│ gyp info spawn args '-I',
│ gyp info spawn args '/Users/fc19061/.cache/node/corepack/pnpm/8.5.0/dist/node_modules/node
│ gyp info spawn args '-I',
│ gyp info spawn args '/Users/fc19061/Library/Caches/node-gyp/20.0.0/include/node/common.gyp
│ gyp info spawn args '-Dlibrary=shared_library',
│ gyp info spawn args '-Dvisibility=default',
│ gyp info spawn args '-Dnode_root_dir=/Users/fc19061/Library/Caches/node-gyp/20.0.0',
│ gyp info spawn args '-Dnode_gyp_dir=/Users/fc19061/.cache/node/corepack/pnpm/8.5.0/dist/no
│ gyp info spawn args '-Dnode_lib_file=/Users/fc19061/Library/Caches/node-gyp/20.0.0/<(targe
│ gyp info spawn args '-Dmodule_root_dir=/Users/fc19061/HeliumTank/Boilerplates/JS/ReactWeba
│ gyp info spawn args '-Dnode_engine=v8',
│ gyp info spawn args '--depth=.',
│ gyp info spawn args '--no-parallel',
│ gyp info spawn args '--generator-output',
│ gyp info spawn args 'build',
│ gyp info spawn args '-Goutput_dir=.'
│ gyp info spawn args ]
│ gyp info spawn make
│ gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
│ CC(target) Release/obj.target/nothing/../../../[email protected]/node_modules/node-addo
│ LIBTOOL-STATIC Release/nothing.a
│ warning: /Library/Developer/CommandLineTools/usr/bin/libtool: archive library: Release/nothi
│ TOUCH Release/obj.target/libvips-cpp.stamp
│ CXX(target) Release/obj.target/sharp/src/common.o
│ ../src/common.cc:23:10: fatal error: 'vips/vips8' file not found
│ #include <vips/vips8>
│ ^~~~~~~~~~~~
│ 1 error generated.
│ make: *** [Release/obj.target/sharp/src/common.o] Error 1
│ gyp ERR! build error
│ gyp ERR! stack Error: `make` failed with exit code: 2
│ gyp ERR! stack at ChildProcess.onExit (/Users/fc19061/.cache/node/corepack/pnpm/8.5.0/di
│ gyp ERR! stack at ChildProcess.emit (node:events:511:28)
│ gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:293:12)
│ gyp ERR! System Darwin 22.4.0
│ gyp ERR! command "/Users/fc19061/.nvm/versions/node/v20.0.0/bin/node" "/Users/fc19061/.cache
│ gyp ERR! cwd /Users/fc19061/HeliumTank/Boilerplates/JS/ReactWebappParcel/react-webapp-parcel
│ gyp ERR! node -v v20.0.0
│ gyp ERR! node-gyp -v v9.3.1
│ gyp ERR! not ok
└─ Failed in 3.3s at /Users/fc19061/HeliumTank/Boilerplates/JS/ReactWebappParcel/react-webapp-parcel/node_modules/.pnpm/[email protected]/node_modules/sharp
Progress: resolved 418, reused 401, downloaded 0, added 0, done
ELIFECYCLE Command failed with exit code 1.
The package will install without failing.
The package Installation failed.
Steps to reproduce the behavior:
Try installing the package on any Mac with M2 Chip
The sharp version 0.25.2 dependency in package pwa-manifest/packages/potrace is causing the issue as it uses libvips version 8.9.1 which is not available for darwin-arm64v8. This can be noticed in the error line below as referenced above:
ERR! sharp Prebuilt libvips 8.9.1 binaries are not yet available for darwin-arm64v8
Patch Sharp Version to 0.30.7 in package pwa-manifest/packages/potrace.
Hi,
It would be awesome to be able to use this module with the new parcel.
Thanks a lot for your work
npm i -D parcel-plugin-pwa-manifest
npm ERR! code ENOLOCAL
npm ERR! Could not install from "node_modules/core" as it does not contain a package.json file.
On line:
should this be:
'pwamanifest.config.js' ?
The Parcel 2 version of the plugin has been released. Given that it's one of the first functional community plugins written for Parcel 2, preliminary bug reports would be very helpful! Please reply with any comments.
I tried to use webpack-plugin-pwa-manifest (without html-webpack-plugin if this matters) and I get the following error:
(node:204859) UnhandledPromiseRejectionWarning: TypeError: Function has non-object prototype 'null' in instanceof check
at Function.[Symbol.hasInstance] (<anonymous>)
at l.<anonymous> (***/node_modules/webpack-plugin-pwa-manifest/lib/index.js:2:2207)
at l.emit (events.js:400:28)
at l.emit (***/node_modules/@pwa-manifest/core/lib/index.js:2:12821)
at l.<anonymous> (***/node_modules/@pwa-manifest/core/lib/index.js:2:13269)
at Generator.next (<anonymous>)
at ***/node_modules/@pwa-manifest/core/lib/index.js:2:319
at new Promise (<anonymous>)
at e (***/node_modules/@pwa-manifest/core/lib/index.js:2:67)
at l.generate (***/node_modules/@pwa-manifest/core/lib/index.js:2:13152)
It should create the manifest file and the icons.
It doesn't.
new WebpackPluginPWAManifest({
'name': process.env.APP_NAME,
'shortName': process.env.APP_NAME,
'startURL': '?pwa',
'theme': '#00305e',
'generateIconOptions': {
'baseIcon': './public/base-icon.svg',
'genFavicons': true
}
}),NodeJS-Version: v14.17.6
G++-Version: 11.2.1 20210728 (Red Hat 11.2.1-1)
Linux-Version: Linux fedora 5.13.16-200.fc34.x86_64
Webpack-Version: 5.49.0
The error appears in this line 86 in the index.ts because SyncHook's prototype is undefined. Therefore the instanceof check fails.
Currently it isn't possible to do the same like in https://github.com/arthurbergmz/webpack-pwa-manifest
There it is possible to define multiple different icons.
Allow an array for generateIconOptions.
Normally it wouldn't be a problem to generate the mstile files with 2 dots, but if you try to deploy to Google AppEngine they won't allow it.
ERROR: (gcloud.app.deploy) INVALID_ARGUMENT: Filename cannot contain '.', '..', '\r', start with '-', '_ah/', or '\n': mstile-150x150..44f23636.png
The fix is really easy, you have to remove the extra dot from hashedFilename before the ".png"
I can make a pull request if you like.
I'm trying to install this with the latest webpack, but apparent this plugin only works on webpack 4.
After adding parcel-plugin-pwa-manifest to my package.json (and installing it) the plugin fails to initialize.
A manifest gets generated, icons get generated, relevant info gets added to index.html...
The plugin fails to initialize, nothing extra happens.
$ rm -rf dist && parcel build src/index.html
⚠️ Plugin parcel-plugin-pwa-manifest failed to initialize: Error: Could not locate the bindings file. Tried:
→ /home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/deasync/0.1.19/node_modules/deasync/build/deasync.node
→ /home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/deasync/0.1.19/node_modules/deasync/build/Debug/deasync.node
→ /home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/deasync/0.1.19/node_modules/deasync/build/Release/deasync.node
→ /home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/deasync/0.1.19/node_modules/deasync/out/Debug/deasync.node
→ /home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/deasync/0.1.19/node_modules/deasync/Debug/deasync.node
→ /home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/deasync/0.1.19/node_modules/deasync/out/Release/deasync.node
→ /home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/deasync/0.1.19/node_modules/deasync/Release/deasync.node
→ /home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/deasync/0.1.19/node_modules/deasync/build/default/deasync.node
→ /home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/deasync/0.1.19/node_modules/deasync/compiled/10.19.0/linux/x64/deasync.node
→ /home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/deasync/0.1.19/node_modules/deasync/addon-build/release/install-root/deasync.node
→ /home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/deasync/0.1.19/node_modules/deasync/addon-build/debug/install-root/deasync.node
→ /home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/deasync/0.1.19/node_modules/deasync/addon-build/default/install-root/deasync.node
→ /home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/deasync/0.1.19/node_modules/deasync/lib/binding/node-v64-linux-x64/deasync.node
at bindings (/home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/bindings/1.5.0/node_modules/bindings/bindings.js:126:9)
at Object.<anonymous> (/home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/deasync/0.1.19/node_modules/deasync/index.js:30:31)
at Module._compile (/home/minibill/.npm-global/pnpm-global/3/node_modules/.pnpm/registry.npmjs.org/v8-compile-cache/2.1.0/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (/home/minibill/.npm-global/pnpm-global/3/node_modules/.pnpm/registry.npmjs.org/v8-compile-cache/2.1.0/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at Object.<anonymous> (/home/minibill/src/rpg-overlay/node_modules/.pnpm/registry.npmjs.org/parcel-bundler/1.12.4/node_modules/parcel-bundler/src/utils/syncPromise.js:1:79)
✨ Built in 2.04s.
dist/shlop_shloppy.275bde68.otf 507.84 KB 61ms
dist/src.9f3e7703.js 153.55 KB 1.64s
dist/Vecna Italic.ac154c1a.otf 51.77 KB 51ms
dist/Vecna Bold Italic.8b3461fc.otf 51.59 KB 52ms
dist/Vecna Bold.f2b1e71f.otf 46.25 KB 51ms
dist/Vecna.e90a4cc7.otf 45.88 KB 50ms
dist/src.9f3e7703.js.map 8.04 KB 7ms
dist/style.d51937fd.css.map 879 B 1ms
dist/style.d51937fd.css 438 B 1.63s
dist/index.html 306 B 5ms
Steps to reproduce the behavior:
npm install parcel-plugin-pwa-manifest.package.json
{
"dependencies": {
"cssnano": "^4.1.10",
"elm-hot": "^1.1.4",
"node-elm-compiler": "^5.0.4",
"parcel-bundler": "^1.12.4",
"parcel-plugin-pwa-manifest": "^3.0.6",
"parcel-plugin-static-files-copy": "^2.3.1",
"typescript": "^3.8.3"
},
"browserslist": [
"chrome >=76",
"firefox >=68"
],
"name": "rpg-overlay",
"description": "RPG Overlay",
"pwaManifest": {
"name": "RPG Overlay",
"shortName": "RPG OVL",
"theme": "#CBE5E9",
"generateIconOptions": {
"baseIcon": "./src/favicon.svg",
"genFavicons": true
},
"development": {
"disabled": true
}
}
}Node version: v10.19.0.
With that structure
my-project/
├── pages/
│ └── about.html
├── index.html
├── .parcelrc
└── package.json
When the project contains several html assets the parcel index.html command fails with this error
$ parcel index.html
ℹ️ Server running at http://localhost:1234
🚨 Build failed.
Error: Bundles must have unique filePaths
AssertionError [ERR_ASSERTION]: Bundles must have unique filePaths
at BundlerRunner.nameBundles (/Users/jcsirot/git/my-project/node_modules/@parcel/core/lib/BundlerRunner.js:333:23)
The project should be built with all pages including the same web manifest.
The build fails
Create a simple PWA project with 2 HTML assets (index.html including a link to about.html in my example). Run parcel index.html
First of all, thank you for the nice plugin ❤️
When using parcel2 with the --public-url option its is ignored for the <meta> and <link> tags as well as in the manifest.
I would expect that public-url is prefixed as it is done for the other assets parcel processes.
All links start with /, which breaks the PWA when used in a subdirectory of a domain as is the case with github pages.
Steps to reproduce the behavior:
$ parcel build src/index.html --public-url https://some-domain.comTo fix the issues I ended up with a post-processing python script to prefix all links.
using Parcel v2 development server with the config will result in broken build process.
work normally with serve command
using config with serve command will result in first time successful build but after file change and attempt to rebuild, Parcel will complain about more than one bundler on namer group.
add parcel-config-pwa-manifest to a Parcel v2 environment and run parcel serve index.html
building React for browser.
package.json :
{
"pwaManifest": {
"name": "test",
"shortName": "test",
"startURL": "./offline",
"theme": "#000000",
"generateIconOptions": {
"baseIcon": "./static/logoface.svg",
"sizes": [
32,
64,
96,
152,
192,
384,
512
],
"genFavicons": true
}
}
}.parcelrc :
{
"extends": [
"@parcel/config-default",
"parcel-config-pwa-manifest"
],
"transformers": {
"*.svg": [
"@parcel/transformer-raw"
],
"*.png": [
"@parcel/transformer-raw"
]
}
}.babelrc :
{
"presets": ["@parcel/babel-preset-env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties",
"@parcel/babel-plugin-transform-runtime"
]
}logs:
🚨 Build failed.
@parcel/namer-default: Bundle group cannot have more than one entry bundle of the same type
AssertionError [ERR_ASSERTION]: Bundle group cannot have more than one entry bundle of the same type
at Object.name (/home/user/test/node_modules/@parcel/namer-default/lib/DefaultNamer.js:85:29)
at BundlerRunner.nameBundle (/home/user/test/node_modules/@parcel/core/lib/BundlerRunner.js:378:39)
at async Promise.all (index 39)
at async BundlerRunner.nameBundles (/home/user/test/node_modules/@parcel/core/lib/BundlerRunner.js:365:5)
at async BundlerRunner.bundle (/home/user/test/node_modules/@parcel/core/lib/BundlerRunner.js:324:5)
at async Parcel._build (/home/user/test/node_modules/@parcel/core/lib/Parcel.js:668:11)
at async Parcel._startNextBuild (/home/user/test/node_modules/@parcel/core/lib/Parcel.js:546:24)
at async PromiseQueue._runFn (/home/user/test/node_modules/@parcel/utils/lib/PromiseQueue.js:108:7)
at async PromiseQueue._next (/home/user/test/node_modules/@parcel/utils/lib/PromiseQueue.js:95:5)
just disable the config on development environment:
package.json :
{
"pwaManifest": {
"development":{
"disabled": true
}
}
}A week or so ago, this was working fine - now that I upgrade my dependencies, it still logs "parcel-transformer-pwa-manifest: Generating icons for My Awesome PWA..." etc, but nothing appears in the dist folder any more :(
Files appear in dist/*
There is only index.html
git clone https://github.com/shish/pwa-test
cd pwa-test
npm i
npm run build
ls dist/
Downgrading to parcel-2.0.0-beta.2 doesn't seem to fix it, so I guess there's something in one of the dependencies...?
I also see this new warning after updating, but that also happens in a different non-PWA project so I think that's probably coming from a different part of parcel:
console:
"extendDefaultPlugins" utility is deprecated.
Use "preset-default" plugin with overrides instead.
For example:
{
name: 'preset-default',
params: {
overrides: {
// customize plugin options
convertShapeToPath: {
convertArcs: true
},
// disable plugins
convertPathData: false
}
}
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.