fix: downgrades to vue 2.6.12 #162

pretzelhammer · 2021-10-07T18:54:40Z

Describe the problem this PR addresses

JIRA: https://jira.sqprod.co/browse/WEBSITE-1244

MContainer's label, sublabel, and requirement-label props do not work within the Website codebase, I think this might have something to do with Website being on vue (and vue-template-compiler) v2.6.12 while Maker uses vue (and vue-template-compiler) v2.6.14 so this is a test branch where i downgrade Maker's vue & friends deps to 2.6.12 buuuut I'm running into some issues...

UPDATE: DOWNGRADING VUE TO v2.6.12 FIXED THE ISSUE (I have confirmed it locally by npm linking this branch into Website).

Describe the changes in this PR

downgrades vue & friends to 2.6.12

Other information

this branch breaks local doc dev -_-

when i attempt to run component=Container npm run dev I get the following error:

[vue-server-renderer-webpack-plugin] webpack config `output.libraryTarget` should be "commonjs2".

(node:72718) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
	Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
	Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
/Users/kirill/github/maker/node_modules/vue-server-renderer/server-plugin.js:76
      throw new Error(
      ^

Error: Entry "main" not found. Did you specify the correct entry option?
    at /Users/kirill/github/maker/node_modules/vue-server-renderer/server-plugin.js:76:13
    at Hook.eval [as callAsync] (eval at create (/Users/kirill/github/maker/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/kirill/github/maker/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.emitAssets (/Users/kirill/github/maker/node_modules/webpack/lib/Compiler.js:871:19)
    at /Users/kirill/github/maker/node_modules/webpack/lib/Watching.js:167:21
    at processTicksAndRejections (internal/process/task_queues.js:79:11)

screenshot:

I don't understand why downgrading Vue a couple patch versions would cause this error, and I don't understand how I'm suppose to fix it... it seems like the fix may have to go into vue-just-ssr? cc @privatenumber

github-actions · 2021-10-07T18:56:02Z

Styleguide deployed to https://square.github.io/maker/styleguide/revert-to-vue-2.6.12/#/

github-actions · 2021-10-07T18:56:51Z

📊 Package size report `1%↑`

File	Before	After
`components/ActionBar/script.js`	`13.1 kB`	^-0.02%↓`13.1 kB`
`components/Blade/script.js`	`6.3 kB`	^-0.06%↓`6.3 kB`
`components/Calendar/script.js`	`7.5 kB`	^0.03%↑`7.5 kB`
`components/Card/script.js`	`1.7 kB`	^0.2%↑`1.8 kB`
`components/Checkbox/script.js`	`3.8 kB`	^0.05%↑`3.8 kB`
`components/Container/script.js`	`4.3 kB`	^-1.29%↓`4.3 kB`
`components/Dialog/script.js`	`6.3 kB`	^-0.06%↓`6.3 kB`
`components/Divider/script.js`	`1.7 kB`	^0.2%↑`1.7 kB`
`components/Heading/script.js`	`2.6 kB`	^0.6%↑`2.6 kB`
`components/Image/script.js`	`3.4 kB`	^0.2%↑`3.4 kB`
`components/ImageUploader/script.js`	`11.6 kB`	^0.6%↑`11.6 kB`
`components/Loading/script.js`	`2.3 kB`	^0.2%↑`2.3 kB`
`components/Modal/script.js`	`7.8 kB`	^-0.3%↓`7.8 kB`
`components/ProgressBar/script.js`	`3.0 kB`	^0.4%↑`3.0 kB`
`components/Radio/script.js`	`3.5 kB`	^0.06%↑`3.5 kB`
`components/Skeleton/script.js`	`4.4 kB`	^23%↑`5.4 kB`
`components/StarRating/script.js`	`6.0 kB`	^0.3%↑`6.1 kB`
`components/Text/script.js`	`2.1 kB`	^0.7%↑`2.2 kB`
`components/Theme/script.js`	`2.3 kB`	^1%↑`2.3 kB`
`components/Toggle/script.js`	`3.8 kB`	^0.05%↑`3.8 kB`
`components/TransitionFadeIn/script.js`	`2.3 kB`	^0.2%↑`2.3 kB`
`components/TransitionResize/script.js`	`3.7 kB`	^0.05%↑`3.7 kB`
`components/TransitionSpringLeft/script.js`	`2.3 kB`	^0.2%↑`2.4 kB`
`components/TransitionSpringUp/script.js`	`2.3 kB`	^0.2%↑`2.3 kB`
`package.json`	`4.9 kB`	^-0.08%↓`4.8 kB`
`utils/assert.js`	`767 B`	^0.8%↑`773 B`
`utils/BlockFormControlLayout/script.js`	`1.8 kB`	^0.2%↑`1.8 kB`
`utils/InlineFormControlLayout/script.js`	`2.5 kB`	^0.2%↑`2.5 kB`
`utils/TransitionResponsive/script.js`	`2.3 kB`	^0.2%↑`2.3 kB`
`utils/transitions.js`	`3.9 kB`	^0.3%↑`3.9 kB`
Total _{(Includes all files)}	`1.0 MB`	^1%↑`1.1 MB`
Tarball size	`187.0 kB`	^1%↑`189.8 kB`

Unchanged files

File	Size
`components/ActionBar/index.js`	`46 B`
`components/ActionBar/styles.css`	`5.9 kB`
`components/Blade/index.js`	`46 B`
`components/Blade/styles.css`	`756 B`
`components/Button/index.js`	`46 B`
`components/Button/script.js`	`7.4 kB`
`components/Button/styles.css`	`5.0 kB`
`components/Calendar/index.js`	`46 B`
`components/Calendar/styles.css`	`2.5 kB`
`components/Card/index.js`	`46 B`
`components/Card/styles.css`	`154 B`
`components/Checkbox/index.js`	`46 B`
`components/Checkbox/styles.css`	`1.7 kB`
`components/Choice/index.js`	`46 B`
`components/Choice/script.js`	`4.3 kB`
`components/Choice/styles.css`	`1.3 kB`
`components/Container/index.js`	`46 B`
`components/Container/styles.css`	`1.0 kB`
`components/Dialog/index.js`	`46 B`
`components/Dialog/styles.css`	`1.0 kB`
`components/Divider/index.js`	`46 B`
`components/Divider/styles.css`	`148 B`
`components/Heading/index.js`	`46 B`
`components/Heading/styles.css`	`3.1 kB`
`components/Image/index.js`	`46 B`
`components/Image/styles.css`	`254 B`
`components/ImageUploader/index.js`	`46 B`
`components/ImageUploader/styles.css`	`1.8 kB`
`components/Input/index.js`	`46 B`
`components/Input/script.js`	`4.3 kB`
`components/Input/styles.css`	`3.1 kB`
`components/Loading/index.js`	`46 B`
`components/Loading/styles.css`	`1.2 kB`
`components/Modal/index.js`	`46 B`
`components/Modal/styles.css`	`969 B`
`components/Notice/index.js`	`46 B`
`components/Notice/script.js`	`4.3 kB`
`components/Notice/styles.css`	`1.0 kB`
`components/ProgressBar/index.js`	`46 B`
`components/ProgressBar/styles.css`	`1.1 kB`
`components/Radio/index.js`	`46 B`
`components/Radio/styles.css`	`1.6 kB`
`components/SegmentedControl/index.js`	`46 B`
`components/SegmentedControl/script.js`	`3.1 kB`
`components/SegmentedControl/styles.css`	`813 B`
`components/Select/index.js`	`46 B`
`components/Select/script.js`	`5.1 kB`
`components/Select/styles.css`	`2.5 kB`
`components/Skeleton/index.js`	`46 B`
`components/Skeleton/styles.css`	`817 B`
`components/StarRating/index.js`	`46 B`
`components/StarRating/styles.css`	`322 B`
`components/Stepper/index.js`	`46 B`
`components/Stepper/script.js`	`3.7 kB`
`components/Stepper/styles.css`	`384 B`
`components/Text/index.js`	`46 B`
`components/Text/styles.css`	`1.0 kB`
`components/Textarea/index.js`	`46 B`
`components/Textarea/script.js`	`3.7 kB`
`components/Textarea/styles.css`	`2.2 kB`
`components/Theme/index.js`	`25 B`
`components/Toggle/index.js`	`46 B`
`components/Toggle/styles.css`	`3.6 kB`
`components/TransitionFadeIn/index.js`	`25 B`
`components/TransitionResize/index.js`	`25 B`
`components/TransitionSpringLeft/index.js`	`25 B`
`components/TransitionSpringUp/index.js`	`25 B`
`LICENSE`	`552 B`
`README.md`	`327 B`
`utils/BlockFormControlLayout/index.js`	`46 B`
`utils/BlockFormControlLayout/styles.css`	`333 B`
`utils/get-contrast.js`	`1.2 kB`
`utils/InlineFormControlLayout/index.js`	`46 B`
`utils/InlineFormControlLayout/styles.css`	`355 B`
`utils/Transition/index.js`	`25 B`
`utils/Transition/script.js`	`2.5 kB`
`utils/TransitionResponsive/index.js`	`25 B`

Hidden files

File	Before	After
`components/ActionBar/script.js.map`	`51.4 kB`	^-0.03%↓`51.4 kB`
`components/ActionBar/styles.css.map`	`16.6 kB`	`16.6 kB`
`components/Blade/script.js.map`	`23.4 kB`	^0.04%↑`23.4 kB`
`components/Blade/styles.css.map`	`3.9 kB`	`3.9 kB`
`components/Button/script.js.map`	`31.0 kB`	^0.05%↑`31.0 kB`
`components/Button/styles.css.map`	`14.0 kB`	`14.0 kB`
`components/Calendar/script.js.map`	`29.0 kB`	^0.2%↑`29.1 kB`
`components/Calendar/styles.css.map`	`10.4 kB`	`10.4 kB`
`components/Card/script.js.map`	`8.8 kB`	^0.3%↑`8.9 kB`
`components/Card/styles.css.map`	`668 B`	`668 B`
`components/Checkbox/script.js.map`	`18.4 kB`	^0.04%↑`18.4 kB`
`components/Checkbox/styles.css.map`	`3.9 kB`	`3.9 kB`
`components/Choice/script.js.map`	`19.0 kB`	^0.06%↑`19.0 kB`
`components/Choice/styles.css.map`	`5.7 kB`	`5.7 kB`
`components/Container/script.js.map`	`17.0 kB`	^-0.34%↓`16.9 kB`
`components/Container/styles.css.map`	`4.6 kB`	`4.6 kB`
`components/Dialog/script.js.map`	`23.6 kB`	^0.04%↑`23.6 kB`
`components/Dialog/styles.css.map`	`4.4 kB`	`4.4 kB`
`components/Divider/script.js.map`	`8.8 kB`	^0.3%↑`8.9 kB`
`components/Divider/styles.css.map`	`704 B`	`704 B`
`components/Heading/script.js.map`	`13.5 kB`	^0.2%↑`13.5 kB`
`components/Heading/styles.css.map`	`5.5 kB`	`5.5 kB`
`components/Image/script.js.map`	`14.1 kB`	^0.2%↑`14.1 kB`
`components/Image/styles.css.map`	`2.9 kB`	`2.9 kB`
`components/ImageUploader/script.js.map`	`44.5 kB`	^0.1%↑`44.6 kB`
`components/ImageUploader/styles.css.map`	`20.1 kB`	`20.1 kB`
`components/Input/script.js.map`	`21.1 kB`	^0.02%↑`21.1 kB`
`components/Input/styles.css.map`	`6.2 kB`	`6.2 kB`
`components/Loading/script.js.map`	`11.1 kB`	^0.2%↑`11.1 kB`
`components/Loading/styles.css.map`	`2.3 kB`	`2.3 kB`
`components/Modal/script.js.map`	`28.7 kB`	^-0.13%↓`28.6 kB`
`components/Modal/styles.css.map`	`7.5 kB`	`7.5 kB`
`components/Notice/script.js.map`	`17.4 kB`	^0.2%↑`17.5 kB`
`components/Notice/styles.css.map`	`3.8 kB`	`3.8 kB`
`components/ProgressBar/script.js.map`	`13.3 kB`	^0.2%↑`13.4 kB`
`components/ProgressBar/styles.css.map`	`2.6 kB`	`2.6 kB`
`components/Radio/script.js.map`	`17.2 kB`	^0.04%↑`17.2 kB`
`components/Radio/styles.css.map`	`3.7 kB`	`3.7 kB`
`components/SegmentedControl/script.js.map`	`14.1 kB`	^0.01%↑`14.1 kB`
`components/SegmentedControl/styles.css.map`	`3.3 kB`	`3.3 kB`
`components/Select/script.js.map`	`23.7 kB`	^0.03%↑`23.7 kB`
`components/Select/styles.css.map`	`6.5 kB`	`6.5 kB`
`components/Skeleton/script.js.map`	`17.7 kB`	^46%↑`25.9 kB`
`components/Skeleton/styles.css.map`	`2.9 kB`	`2.9 kB`
`components/StarRating/script.js.map`	`22.4 kB`	^0.02%↑`22.4 kB`
`components/StarRating/styles.css.map`	`6.3 kB`	`6.3 kB`
`components/Stepper/script.js.map`	`15.8 kB`	^0.2%↑`15.9 kB`
`components/Stepper/styles.css.map`	`3.1 kB`	`3.1 kB`
`components/Text/script.js.map`	`10.4 kB`	^0.3%↑`10.4 kB`
`components/Text/styles.css.map`	`2.7 kB`	`2.7 kB`
`components/Textarea/script.js.map`	`18.5 kB`	^0.02%↑`18.5 kB`
`components/Textarea/styles.css.map`	`4.8 kB`	`4.8 kB`
`components/Theme/script.js.map`	`10.8 kB`	^0.3%↑`10.8 kB`
`components/Toggle/script.js.map`	`19.6 kB`	^0.04%↑`19.6 kB`
`components/Toggle/styles.css.map`	`5.4 kB`	`5.4 kB`
`components/TransitionFadeIn/script.js.map`	`10.5 kB`	^0.3%↑`10.5 kB`
`components/TransitionResize/script.js.map`	`14.5 kB`	^0.2%↑`14.5 kB`
`components/TransitionSpringLeft/script.js.map`	`10.6 kB`	^0.3%↑`10.6 kB`
`components/TransitionSpringUp/script.js.map`	`10.5 kB`	^0.3%↑`10.6 kB`
`utils/assert.js.map`	`2.4 kB`	^0.1%↑`2.4 kB`
`utils/BlockFormControlLayout/script.js.map`	`8.5 kB`	^0.3%↑`8.5 kB`
`utils/BlockFormControlLayout/styles.css.map`	`902 B`	`902 B`
`utils/get-contrast.js.map`	`5.0 kB`	^0.08%↑`5.0 kB`
`utils/InlineFormControlLayout/script.js.map`	`11.9 kB`	^0.2%↑`11.9 kB`
`utils/InlineFormControlLayout/styles.css.map`	`1.2 kB`	`1.2 kB`
`utils/Transition/script.js.map`	`10.8 kB`	^0.3%↑`10.8 kB`
`utils/TransitionResponsive/script.js.map`	`10.3 kB`	^0.3%↑`10.3 kB`
`utils/transitions.js.map`	`14.1 kB`	^-0.02%↓`14.1 kB`

_{🤖 This report was automatically generated by pkg-size-action}

privatenumber · 2021-10-07T20:08:16Z

It's because the previous version of Vue isn't compatible with Webpack 5: vuejs/vue#12002

Anyway, downgrading and sticking to a lower version of Vue.js isn't a long-term solution. We should investigate the root cause in the latest version of Vue.js 2.

Have you tried upgrading Website to 2.6.14?

pretzelhammer · 2021-10-07T20:30:31Z

@privatenumber

It's because the previous version of Vue isn't compatible with Webpack 5: vuejs/vue#12002

but building the components with vue 2.6.12 and webpack 5.58.0 seems to work just fine, and building the lab and styleguide with those package versions also seems to work just fine, e.g. the deployed styleguide: https://square.github.io/maker/styleguide/revert-to-vue-2.6.12/#/

the only thing that fails for some weird reason is local doc dev with vue-just-ssr and I still don't really understand why

Have you tried upgrading Website to 2.6.14?

No because that would be impossible to fully QA, it's much easier, simpler, faster, and safer to just downgrade Maker to vue 2.6.12 (at least for the time being).

privatenumber · 2021-10-07T20:38:10Z

vuejs/vue#12002 is a SSR fix, and local dev uses SSR but building to GitHub Pages doesn't.

Let's investigate the root cause first.

pretzelhammer · 2021-10-07T21:12:51Z

@privatenumber

When you say "investigate the root cause" do you mean looking into why vue components built using vue v2.6.14 do not work as expected when imported and rendered in another project using vue v2.6.12?

We know the specific component that breaks is MContainer, and the specific way it breaks is that props which are used as the default/fallback content for slots no longer render, and those slots are wrapped with v-ifs: https://github.com/square/maker/blob/master/src/components/Container/src/Container.vue#L12-L39

After looking at the vue v2.6.13 and v2.6.14 release notes this particular PR really stands out, and is likely the source of the introduced breaking behavior: vuejs/vue#12104

Although we have yet to confirm that's the cause, if we assume that it is... then what do we do?

pretzelhammer · 2021-10-08T14:37:05Z

I've tried upgrading Website to Vue 2.6.14 and it also fixed the issue, so our options are:

Upgrade Website to Vue 2.6.14 (and pray nothing breaks)
Downgrade Maker to Vue 2.6.12 (and fix local doc dev)
Keep each as-is and just remove the props from MContainer and only leave the slots (and release as Maker v7)
Submit a patch PR to Vue so that once released components built with Vue 2.6.15 willbe able to run on Vue 2.6.12 without regressions

privatenumber · 2021-10-08T18:30:06Z

Yes, the consumer must use 2.6.14 too. This regression will not be fixed on Vue's end: vuejs/vue#12314

Upgrade is inevitable so let's upgrade Website and file a Q&A request.

pretzelhammer · 2021-10-14T16:55:17Z

closing this as we're just gonna bump Website to vue 2.6.14 instead, and if that doesn't work we'll get rid of the props from MContainer and leave only slots.

fix: reverts to vue 2.6.12

006c5a2

pretzelhammer requested a review from privatenumber October 7, 2021 18:54

docs: updates calendar docs

4d21e6a

pretzelhammer changed the title ~~fix: reverts to vue 2.6.12~~ fix: downgrades to vue 2.6.12 Oct 7, 2021

style: lint fixes in ProgressBar readme demo example

f0d7dd3

chore: minor patch updates to some deps

747c24d

pretzelhammer closed this Oct 14, 2021

landondurnan deleted the revert-to-vue-2.6.12 branch October 15, 2021 22:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: downgrades to vue 2.6.12 #162

fix: downgrades to vue 2.6.12 #162

pretzelhammer commented Oct 7, 2021 •

edited

github-actions bot commented Oct 7, 2021

github-actions bot commented Oct 7, 2021 •

edited

privatenumber commented Oct 7, 2021 •

edited

pretzelhammer commented Oct 7, 2021

privatenumber commented Oct 7, 2021

pretzelhammer commented Oct 7, 2021

pretzelhammer commented Oct 8, 2021 •

edited

privatenumber commented Oct 8, 2021

pretzelhammer commented Oct 14, 2021

fix: downgrades to vue 2.6.12 #162

fix: downgrades to vue 2.6.12 #162

Conversation

pretzelhammer commented Oct 7, 2021 • edited

Describe the problem this PR addresses

Describe the changes in this PR

Other information

github-actions bot commented Oct 7, 2021

github-actions bot commented Oct 7, 2021 • edited

📊 Package size report 1%↑

privatenumber commented Oct 7, 2021 • edited

pretzelhammer commented Oct 7, 2021

privatenumber commented Oct 7, 2021

pretzelhammer commented Oct 7, 2021

pretzelhammer commented Oct 8, 2021 • edited

privatenumber commented Oct 8, 2021

pretzelhammer commented Oct 14, 2021

pretzelhammer commented Oct 7, 2021 •

edited

github-actions bot commented Oct 7, 2021 •

edited

📊 Package size report `1%↑`

privatenumber commented Oct 7, 2021 •

edited

pretzelhammer commented Oct 8, 2021 •

edited