Search code examples
service-workerworkboxpolymer-3.x

glob patterns doesn't match any files workbox


I am trying to generate service worker for the Polymer 3 with workbox 4.3.1.

I have some specific files inside bower and node_modules I want to cache.

I tried adding "en-in/node_modules/**" to globIgnores and include specific files like - en-in/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js in globPattern.

The config I tried is giving a error. I even tried adding globStrict: false. Even that didn't help.

Below is my workbox config:

    globDirectory: "dist",
    globPatterns: ["en-in/**/*.{js,json,css}",
        "en-in/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js"],
    globIgnores: [
        "en-in/sw-reg.js",
        "en-in/sw-custom.js",
        "en-in/rev-manifest.json",
        "en-in/package.json",
        "en-in/workbox-v4.3.1/**/*",
        "en-in/node_modules/**"
    ],
    globStrict: false,

I am getting the below error:

One of the glob patterns doesn't match any files. Please remove or fix the following: 
{
  "globDirectory": "dist",
  "globPattern": "en-in/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js",
  "globIgnores": [
    "en-in/sw-reg.js",
    "en-in/sw-custom.js",
    "en-in/rev-manifest.json",
    "en-in/package.json",
    "en-in/workbox-v4.3.1/**/*",
    "en-in/node_modules/**",
    "**/service-worker.js"
  ]
}

Solution

  • The code that does glob-ing in Workbox looks like:

    globbedFiles = glob.sync(globPattern, {
      cwd: globDirectory,
      follow: globFollow,
      ignore: globIgnores,
      strict: globStrict,
    });
    

    Because you're passing in "en-in/node_modules/**" as one of the globIgnores patterns, "en-in/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js" is never going to match anything. In the glob module, ignore always takes precedence.

    You have a number of approaches that would fix this:

    • As part of your build process, move the custom-elements-es5-adapter.*.js file out of node_modules and into a different directory, and load it from there.
    • Change your "en-in/**/*.{js,json,css}" in globPatterns to something like "en-in/{dir1,dir2,dir3}/**/*.{js,json,css}" so that it does not match node_modules by default, and remove "en-in/node_modules/**" from globIgnores. You can then leave "en-in/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.*.js" in globPatterns, and it will not longer be ignored.
    • Change your "en-in/node_modules/**" in globIgnores so that it doesn't match en-in/node_modules/@webcomponents. (I forget the syntax for doing that, but you might be able to figure it out if the other two options don't work.)

    There are probably a few other alternatives as well. But hopefully that explains the root cause.