vue-cli-service build: validationError for new workbox-webpack-plugin options
With the following vue.config.js:
module.exports = {
pwa: {
name: 'My App',
...
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/sw.js', //and I use "sw.js" in my registerServiceWorker.js file
skipWaiting: true,
clientsClaim: true,
}
}
}
The validation errors during build are that 'skipWaiting' and 'clientsClaim' are not supported parameters. Why? swSrc is from the same list of options listed here and the build doesn't complain about that option. When I remove these two options, the build works.
So I guess my question is:
skipWaiting, clientsClaim are "not a supported parameter" of what? Of webpack? of the PWA plugin? Of the workbox-webpack plugin? Where can I find the correct set of options? Thanks.
UPDATE: I do not have a .env file setting the NODE-ENV. However npm run build which I guess builds production assets works only if I remove the 2 options. The removed options in dev (npm run serve) yields NO service worker file.
vue.js webpack
workbox vue-cli-3 workbox-webpack-plugin asked Nov 15 '18 at 18:50
yenyen
11110
add a comment |
With the following vue.config.js:
module.exports = {
pwa: {
name: 'My App',
...
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/sw.js', //and I use "sw.js" in my registerServiceWorker.js file
skipWaiting: true,
clientsClaim: true,
}
}
}
The validation errors during build are that 'skipWaiting' and 'clientsClaim' are not supported parameters. Why? swSrc is from the same list of options listed here and the build doesn't complain about that option. When I remove these two options, the build works.
So I guess my question is:
skipWaiting, clientsClaim are "not a supported parameter" of what? Of webpack? of the PWA plugin? Of the workbox-webpack plugin? Where can I find the correct set of options? Thanks.
UPDATE: I do not have a .env file setting the NODE-ENV. However npm run build which I guess builds production assets works only if I remove the 2 options. The removed options in dev (npm run serve) yields NO service worker file.
vue.js webpack
workbox vue-cli-3 workbox-webpack-plugin asked Nov 15 '18 at 18:50
yenyen
11110
add a comment |
With the following vue.config.js:
module.exports = {
pwa: {
name: 'My App',
...
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/sw.js', //and I use "sw.js" in my registerServiceWorker.js file
skipWaiting: true,
clientsClaim: true,
}
}
}
The validation errors during build are that 'skipWaiting' and 'clientsClaim' are not supported parameters. Why? swSrc is from the same list of options listed here and the build doesn't complain about that option. When I remove these two options, the build works.
So I guess my question is:
skipWaiting, clientsClaim are "not a supported parameter" of what? Of webpack? of the PWA plugin? Of the workbox-webpack plugin? Where can I find the correct set of options? Thanks.
UPDATE: I do not have a .env file setting the NODE-ENV. However npm run build which I guess builds production assets works only if I remove the 2 options. The removed options in dev (npm run serve) yields NO service worker file.
vue.js webpack
workbox vue-cli-3 workbox-webpack-plugin asked Nov 15 '18 at 18:50
yenyen
11110
With the following vue.config.js:
module.exports = {
pwa: {
name: 'My App',
...
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/sw.js', //and I use "sw.js" in my registerServiceWorker.js file
skipWaiting: true,
clientsClaim: true,
}
}
}
The validation errors during build are that 'skipWaiting' and 'clientsClaim' are not supported parameters. Why? swSrc is from the same list of options listed here and the build doesn't complain about that option. When I remove these two options, the build works.
So I guess my question is:
skipWaiting, clientsClaim are "not a supported parameter" of what? Of webpack? of the PWA plugin? Of the workbox-webpack plugin? Where can I find the correct set of options? Thanks.
UPDATE: I do not have a .env file setting the NODE-ENV. However npm run build which I guess builds production assets works only if I remove the 2 options. The removed options in dev (npm run serve) yields NO service worker file.
vue.js webpack
workbox vue-cli-3 workbox-webpack-plugin vue.js webpack
workbox vue-cli-3 workbox-webpack-plugin asked Nov 15 '18 at 18:50
yenyen
11110
asked Nov 15 '18 at 18:50
yenyen
11110
edited Nov 15 '18 at 19:35
yen
asked Nov 15 '18 at 18:50
yenyen
11110
asked Nov 15 '18 at 18:50
yenyen
11110
asked Nov 15 '18 at 18:50
yenyen
11110
11110
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You are using workbox plugin in InjectManifest mode, but pass parameters for GenerateSW.
InjectManifest mode expects an existing service-worker file to be injected and it's path defined in swSrc, while GenerateSW will create service-worker file, thus accepts different set of options (e.g. swDest, etc)
All options for each of modes can be found on the same documentation page of workbox-webpack-plugin you've posted in corresponding sections.
answered Nov 15 '18 at 19:40
aBiscuitaBiscuit
1,6621616
omg... I didn't realise that. THANK YOU!!!!
– yen
Nov 15 '18 at 19:44
OK so based on that, I've now included importScripts() for the workbox-sw.js from CDN. I thought vue would do that for me. I just have a console.log in my worker for now - will look at the link u sent for more complex stuff later. The registration now fails withService worker not found at /sw.jsso the file is still not being generated :(
– yen
Nov 15 '18 at 19:53
1
I'm going to accept your answer anyway bcos it explains the validationError!
– yen
Nov 15 '18 at 19:54
Thank you. Check if it was generated at all. Because, ifswDestwas not specified, default output will beservice-worker.js.
– aBiscuit
Nov 15 '18 at 19:57
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326121%2fvue-cli-service-build-validationerror-for-new-workbox-webpack-plugin-options%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You are using workbox plugin in InjectManifest mode, but pass parameters for GenerateSW.
InjectManifest mode expects an existing service-worker file to be injected and it's path defined in swSrc, while GenerateSW will create service-worker file, thus accepts different set of options (e.g. swDest, etc)
All options for each of modes can be found on the same documentation page of workbox-webpack-plugin you've posted in corresponding sections.
answered Nov 15 '18 at 19:40
aBiscuitaBiscuit
1,6621616
omg... I didn't realise that. THANK YOU!!!!
– yen
Nov 15 '18 at 19:44
OK so based on that, I've now included importScripts() for the workbox-sw.js from CDN. I thought vue would do that for me. I just have a console.log in my worker for now - will look at the link u sent for more complex stuff later. The registration now fails withService worker not found at /sw.jsso the file is still not being generated :(
– yen
Nov 15 '18 at 19:53
1
I'm going to accept your answer anyway bcos it explains the validationError!
– yen
Nov 15 '18 at 19:54
Thank you. Check if it was generated at all. Because, ifswDestwas not specified, default output will beservice-worker.js.
– aBiscuit
Nov 15 '18 at 19:57
add a comment |
You are using workbox plugin in InjectManifest mode, but pass parameters for GenerateSW.
InjectManifest mode expects an existing service-worker file to be injected and it's path defined in swSrc, while GenerateSW will create service-worker file, thus accepts different set of options (e.g. swDest, etc)
All options for each of modes can be found on the same documentation page of workbox-webpack-plugin you've posted in corresponding sections.
answered Nov 15 '18 at 19:40
aBiscuitaBiscuit
1,6621616
omg... I didn't realise that. THANK YOU!!!!
– yen
Nov 15 '18 at 19:44
OK so based on that, I've now included importScripts() for the workbox-sw.js from CDN. I thought vue would do that for me. I just have a console.log in my worker for now - will look at the link u sent for more complex stuff later. The registration now fails withService worker not found at /sw.jsso the file is still not being generated :(
– yen
Nov 15 '18 at 19:53
1
I'm going to accept your answer anyway bcos it explains the validationError!
– yen
Nov 15 '18 at 19:54
Thank you. Check if it was generated at all. Because, ifswDestwas not specified, default output will beservice-worker.js.
– aBiscuit
Nov 15 '18 at 19:57
add a comment |
You are using workbox plugin in InjectManifest mode, but pass parameters for GenerateSW.
InjectManifest mode expects an existing service-worker file to be injected and it's path defined in swSrc, while GenerateSW will create service-worker file, thus accepts different set of options (e.g. swDest, etc)
All options for each of modes can be found on the same documentation page of workbox-webpack-plugin you've posted in corresponding sections.
answered Nov 15 '18 at 19:40
aBiscuitaBiscuit
1,6621616
You are using workbox plugin in InjectManifest mode, but pass parameters for GenerateSW.
InjectManifest mode expects an existing service-worker file to be injected and it's path defined in swSrc, while GenerateSW will create service-worker file, thus accepts different set of options (e.g. swDest, etc)
All options for each of modes can be found on the same documentation page of workbox-webpack-plugin you've posted in corresponding sections.
answered Nov 15 '18 at 19:40
aBiscuitaBiscuit
1,6621616
answered Nov 15 '18 at 19:40
aBiscuitaBiscuit
1,6621616
answered Nov 15 '18 at 19:40
aBiscuitaBiscuit
1,6621616
answered Nov 15 '18 at 19:40
aBiscuitaBiscuit
1,6621616
1,6621616
omg... I didn't realise that. THANK YOU!!!!
– yen
Nov 15 '18 at 19:44
OK so based on that, I've now included importScripts() for the workbox-sw.js from CDN. I thought vue would do that for me. I just have a console.log in my worker for now - will look at the link u sent for more complex stuff later. The registration now fails withService worker not found at /sw.jsso the file is still not being generated :(
– yen
Nov 15 '18 at 19:53
1
I'm going to accept your answer anyway bcos it explains the validationError!
– yen
Nov 15 '18 at 19:54
Thank you. Check if it was generated at all. Because, ifswDestwas not specified, default output will beservice-worker.js.
– aBiscuit
Nov 15 '18 at 19:57
add a comment |
omg... I didn't realise that. THANK YOU!!!!
– yen
Nov 15 '18 at 19:44
OK so based on that, I've now included importScripts() for the workbox-sw.js from CDN. I thought vue would do that for me. I just have a console.log in my worker for now - will look at the link u sent for more complex stuff later. The registration now fails withService worker not found at /sw.jsso the file is still not being generated :(
– yen
Nov 15 '18 at 19:53
1
I'm going to accept your answer anyway bcos it explains the validationError!
– yen
Nov 15 '18 at 19:54
Thank you. Check if it was generated at all. Because, ifswDestwas not specified, default output will beservice-worker.js.
– aBiscuit
Nov 15 '18 at 19:57
omg... I didn't realise that. THANK YOU!!!!
– yen
Nov 15 '18 at 19:44
omg... I didn't realise that. THANK YOU!!!!
– yen
Nov 15 '18 at 19:44
OK so based on that, I've now included importScripts() for the workbox-sw.js from CDN. I thought vue would do that for me. I just have a console.log in my worker for now - will look at the link u sent for more complex stuff later. The registration now fails with
Service worker not found at /sw.js so the file is still not being generated :(– yen
Nov 15 '18 at 19:53
OK so based on that, I've now included importScripts() for the workbox-sw.js from CDN. I thought vue would do that for me. I just have a console.log in my worker for now - will look at the link u sent for more complex stuff later. The registration now fails with
Service worker not found at /sw.js so the file is still not being generated :(– yen
Nov 15 '18 at 19:53
1
1
I'm going to accept your answer anyway bcos it explains the validationError!
– yen
Nov 15 '18 at 19:54
I'm going to accept your answer anyway bcos it explains the validationError!
– yen
Nov 15 '18 at 19:54
Thank you. Check if it was generated at all. Because, if
swDest was not specified, default output will be service-worker.js.– aBiscuit
Nov 15 '18 at 19:57
Thank you. Check if it was generated at all. Because, if
swDest was not specified, default output will be service-worker.js.– aBiscuit
Nov 15 '18 at 19:57
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326121%2fvue-cli-service-build-validationerror-for-new-workbox-webpack-plugin-options%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
