Error since I updated to 0.1.10: React does not recognize the hasStriped prop on a DOM element

[matt-grain]

Hi,

I updated today my project from 0.1.8 to 0.1.10 and now I have this error but I don't understand where it comes from

event - compiled client and server successfully in 236 ms (868 modules)
Warning: React does not recognize the `hasStriped` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `hasstriped` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at /home/matt/projects/git/pynecone/app/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at Progress (/home/matt/projects/git/pynecone/app/.web/node_modules/@chakra-ui/progress/dist/chakra-ui-progress.cjs.dev.js:355:34)
    at div
    at /home/matt/projects/git/pynecone/app/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at /home/matt/projects/git/pynecone/app/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
    at VStack
    at div
    at /home/matt/projects/git/pynecone/app/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at /home/matt/projects/git/pynecone/app/.web/node_modules/@chakra-ui/layout/dist/chakra-ui-layout.cjs.dev.js:910:24
    at VStack
    at div
    at /home/matt/projects/git/pynecone/app/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:51:25
    at Component (webpack-internal:///./pages/verra.js:30:96)
    at EnvironmentProvider (/home/matt/projects/git/pynecone/app/.web/node_modules/@chakra-ui/react-env/dist/chakra-ui-react-env.cjs.dev.js:120:24)
    at ColorModeProvider (/home/matt/projects/git/pynecone/app/.web/node_modules/@chakra-ui/color-mode/dist/chakra-ui-color-mode.cjs.dev.js:228:21)
    at ThemeProvider (/home/matt/projects/git/pynecone/app/.web/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:106:21)
    at ThemeProvider (/home/matt/projects/git/pynecone/app/.web/node_modules/@chakra-ui/system/dist/chakra-ui-system.cjs.dev.js:57:27)
    at /home/matt/projects/git/pynecone/app/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
    at /home/matt/projects/git/pynecone/app/.web/node_modules/@chakra-ui/hooks/dist/chakra-ui-hooks.cjs.dev.js:265:23
    at ChakraProvider (/home/matt/projects/git/pynecone/app/.web/node_modules/@chakra-ui/provider/dist/chakra-ui-provider.cjs.dev.js:40:24)
    at MyApp (webpack-internal:///./pages/_app.js:22:18)
    at StyleRegistry (/home/matt/projects/git/pynecone/app/.web/node_modules/styled-jsx/dist/index/index.js:448:36)
    at AppContainer (/home/matt/projects/git/pynecone/app/.web/node_modules/next/dist/server/render.js:298:29)
    at AppContainerWithIsomorphicFiberStructure (/home/matt/projects/git/pynecone/app/.web/node_modules/next/dist/server/render.js:327:57)
    at div
    at Body (/home/matt/projects/git/pynecone/app/.web/node_modules/next/dist/server/render.js:614:21)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

Any hint on how to debug it ?

Thanks !

[Alek99]

@matt-grain Hi is this when you just update your current project creating a new project doesn't have this issue right

[Alek99]

Maybe pc init and pc run the project on 0.1.10

[matt-grain]

Yeah this is what I thought, I tried that but still here. So I'll recreate a project from scratch! No issue

[Alek99]

Actually you may need to delete your .web folder and pc init and then pc run you maybe ok in your same project, if that doesn't work maybe recreate.

[matt-grain]

I tried that too. Not better. Let me try to recreate it right now.

[matt-grain]

So even with a new project, the same error appears

[Alek99]

Are you using has_striped anywhere or can you paste some of your code

[matt-grain]

EDIT
Yes... has_stripped..

Here is my code:

            pc.vstack(
                pc.progress(
                    value=AppState.get_current_question_id / 5 * 100,
                    width="100%",
                    height="1.3em",
                    border_radius="25px",
                    bg="lightblue",
                    is_animated=True,
                    has_striped=True,
                    is_indeterminate=AppState.started == False,
                ),
                spacing="1em",
                min_width=["10em", "40em"],
            ),

[Alek99]

Ok I'll try and debug this in the meantime maybe go back to the last release and continue your development. Thanks for pointing this out

[matt-grain]

This error is not fatal, appears in the logs and browser console but doesn't prevent the application to run. So nothing critical :)

[matt-grain]

Ah you were right, it was the progress bar:

            pc.vstack(
                pc.progress(
                    value=AppState.get_current_question_id / 5 * 100,
                    width="100%",
                    height="1.3em",
                    border_radius="25px",
                    bg="lightblue",
                    is_animated=True,
                    has_striped=True,
                    is_indeterminate=AppState.started == False,
                ),
                spacing="1em",
                min_width=["10em", "40em"],
            ),

I removed has_striped and no error anymore

[Alek99]

Try has_stripe not has_striped

[Alek99]

Ill update the docs

[matt-grain]

ah better. But... what has_stripe should do? I don`t see the difference

[Alek99]

It should make the progress bar striped Ill update this component so in the next release it works as intended

[Alek99]

Fixed this issue in this pr should be fixed on the next release #159