Immutable prop warning for various components

[brettchalupa]

Immutable prop warning for various components

[Overthane]

@gregorypratt I hope you are right.

In the meantime, does anyone know if it's possible to temporarily solve this issue locally and prevent these warnings? It is really cluttering my console while developing.

I just went into node_modules/@stencil/router/collection/components/ and changed mutable: false to mutable: true for the appropriate Props, in the appropriate components.

[fohlin]

Good bug report and a shame that it's not getting any attention. Should encourage people willing to do PRs!

[MrGowdy]

Issue still persists. These errors also clutter the 'npm run test' results. It took me a while to figure out that I wasn't doing anything as a new Stencil developer. A PR would be much appreciated!

[ssurabhi10]

Facing the same issue! A PR would be much appreciated!

[gregorypratt]

My assumption is that v2 is on it's way so this gets shelved in favour of that re-write

[MrGowdy]

@gregorypratt I hope you are right.

In the meantime, does anyone know if it's possible to temporarily solve this issue locally and prevent these warnings? It is really cluttering my console while developing.

[MrGowdy]

Thank you so much @Overthane. This solved the issue for me. I managed to get myself quite lost within the node_modules...

[bleuscyther]

It seems to be because of the way Stencil State Tunnel shares state values across the hierarchy.

They would normally use events (with reserved names) to do that, but I am guessing that would be out of the scope of Stencil, at least in terms of the spirit behind it. That could be the reason why they moved it to the community repo, to separate the concerns: build cross-library components vs building a fully functional app/website.

Route

stencil-router/packages/router/src/components/route/route.tsx

Lines 123 to 128 in 2580a32

	ActiveRouter.injectProps(Route, [
	'location',
	'history',
	'historyType',
	'routeViewsUpdated'
	]);

Route-Link

stencil-router/packages/router/src/components/route-link/route-link.tsx

Lines 117 to 121 in 2580a32

	ActiveRouter.injectProps(RouteLink, [
	'history',
	'location',
	'root'
	]);

Switch

stencil-router/packages/router/src/components/switch/switch.tsx

Lines 127 to 130 in 2580a32

	ActiveRouter.injectProps(RouteSwitch, [
	'location',
	'routeViewsUpdated'
	]);

Redirect

stencil-router/packages/router/src/components/redirect/redirect.tsx

Lines 32 to 35 in 2580a32

	ActiveRouter.injectProps(Redirect, [
	'history',
	'root'
	]);

I switched to the History API (1) (2)to handle the routing logic 😅. It feels less like using React or Angular

[safaalai]

An addition to @Overthane's answer:

I use cloudflare pages where when I push my code to Github, the server kicks in, does an install, pulls the code and builds everything. Of course, that means that all my changes in node_modules are lost.

So based on this StackOverflow answer I do the following:

1. Make the changes as suggested by @Overthane
2. Run npm install patch-package --save-dev
3. run npx patch-package @stencil/router
4. check in to git the patch file created in the <my-project>/patches directory
5. Add the line "postinstall": "npx patch-package" to the script section of package.json