Wrong path to assets when built on windows

[jonespen]

Any configuration I'm missing, or is there a bug? It's working fine when building on my mac, but our build server is running TeamCity/Windows.

My config:

new SWPrecacheWebpackPlugin({
  cacheId: 'sw-precache-pwa',
  filename: 'sw-precache.js',
})

Isn't https://github.com/goldhand/sw-precache-webpack-plugin/blob/master/src/index.js#L66 this supposed to strip away this?

[goldhand]

Yup thats exactly what that should do. What is your output path in your webpack configuration? Does it log the same as "C:/TeamCity/buildAgent/work/" or something similar?

[jonespen]

I believe it logged something like C://TeamCity//buildAgent//work//.... (I'll confirm this tomorrow) Dunno if the double slashes is a windows thing

In index.js,

console.log(outputPath);
console.log(staticFileGlobs);

gives

C:\Source\hfn\SatsElixia-PTBooking-PWA\dist
[ 'C:\\Source\\hfn\\SatsElixia-PTBooking-PWA\\dist\\6584b48ad2cb2709be3b2ab263b6cdee.svg',
  'C:\\Source\\hfn\\SatsElixia-PTBooking-PWA\\dist\\main_5c5d7300cbcb2c8d4f55.js',
  'C:\\Source\\hfn\\SatsElixia-PTBooking-PWA\\dist\\sw_5c5d7300cbcb2c8d4f55.js',
  'C:\\Source\\hfn\\SatsElixia-PTBooking-PWA\\dist\\styles_5c5d7300cbcb2c8d4f55.css',
  'C:\\Source\\hfn\\SatsElixia-PTBooking-PWA\\dist\\styles_5c5d7300cbcb2c8d4f55.css.map',
  'C:\\Source\\hfn\\SatsElixia-PTBooking-PWA\\dist\\index.html',
  'C:\\Source\\hfn\\SatsElixia-PTBooking-PWA\\dist\\assets\\manifest.json',
  'C:\\Source\\hfn\\SatsElixia-PTBooking-PWA\\dist\\assets\\icons\\alpha-icon-144.png',
  'C:\\Source\\hfn\\SatsElixia-PTBooking-PWA\\dist\\assets\\icons\\alpha-icon-96.png',
  'C:\\Source\\hfn\\SatsElixia-PTBooking-PWA\\dist\\assets\\icons\\alpha-icon-192.png',
  'C:\\Source\\hfn\\SatsElixia-PTBooking-PWA\\dist\\web.config',
  'C:\\Source\\hfn\\SatsElixia-PTBooking-PWA\\dist\\stats.json' ]

[terjebra]

I encountered the same problem and got around it by adding stripPrefix. Due to windows
I had to replace the slashes with forwardslashes in the path to get it working.

My sw-precache-config:

const SW_PRECACHE_CONFIG = {
  cacheId: SERVICE_WORKER_CACHEID,
  filename: SERVICE_WORKER_FILENAME,
  stripPrefix: path.join(__dirname, 'dist').replace(/\\/g,"/")
};

[davidgilbertson]

Thanks @terjebra that worked for me.

[goldhand]

@terjebra @davidgilbertson I think this should be fixed in v0.7.0 here:

sw-precache-webpack-plugin/src/index.js

Line 87 in 9646bcb

config.stripPrefix = `${outputPath}${path.sep}`;

Would either of you mind testing it?

[goldhand]

Just tested, does not work still. Need to add the stripPrefix for windows somehow

[nasushkov]

Hi, I have the same issue, but I guess the problem resides in sw-precache and how it processes stripPrefix

[matthiasg]

@terjebra's example is expecting the configuration to be located in the same folder as the dist folder. make sure path.join(__dirname, 'dist') actually does point to your dist folder (or whatever you have as output folder)

[matthiasg]

sw-precache-webpack-plugin also automatically sets stripPrefix to webpack's outputPath and is influenced by the publicPath as well

  if (outputPath) {
          // strip the webpack config's output.path
          config.stripPrefix = outputPath + '/';
        }

        if (compiler.options.output.publicPath) {
          // prepend the public path to the resources
          config.replacePrefix = compiler.options.output.publicPath;
        }

[primozs]

The same bug is on osx.

[jeffposnick]

As a heads-up, this was raised in facebook/create-react-app#2235, and seems like it could be a blocking issue for all Windows developers.

If there is an easy fix for the plugin, note that we're using 0.9.1 due to #74, so ideally the fix could be backported as 0.9.2.

[goldhand]

Going to try adding the stripPrefix: path.join(__dirname, 'dist').replace(/\\/g,"/") solution to the default configuration. I'm just not aware of all the environments windows users are developing in but I'll give it a go! If there's any window's users who can help on this, would be appreciated 😄

[sqal]

@goldhand that is exact workaround I use in my project:

const isWin = /^win/.test(process.platform);

swPrecache.write(`${buildPath}/service-worker.js`, {
  ...
  stripPrefix: isWin ? buildPath.replace(/\\/g, '/') : buildPath,
}, done);

tested on windows/mac os :)

[goldhand]

Thanks @sqal that looks great 😄

[goldhand]

Didn't mean to auto close this. The fix will be in v0.11.1 but I will also publish a fix in v0.9.2 for cra

[goldhand]

fixed and published in v0.11.1