CODEWITHSUNDEEP
vitereact-selectastrojs
DinoDon
DinoDon

Reputation: 41

Astro Build Fastify SSR React-Select component not working

I am currently using Astro SSR with Fastify\Node as my server. I created a SSR\Fastify plugin and its working well. I am running into one issue though,and wanted to see if others have faced similar issue. I am not able to use the React-Select component. It works well when running normal Astro-Build without SSR enabled. Once I run the build command I received the following error message when the page tries to load:Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."

I am leaning towards import issue, but not having any luck narrowing it down.

The type definition is resolving to: react-select/dist/react-selectcjs.d.ts

I get the same error if I use the node ssr plugin as well. I'm not doing anything fancy with the JSX component, this is usage of the react-select:

import Select from "react-select"s
  <Select
                className="react-select info mx-5 w-100"
                classNamePrefix="react-select"
                name="singleSelect"
                value={pageSelect}
                onChange={(value) => {
                  gotoPage(value.value);
                  handlePageSelect(value);
                }}
                options={pageSelectData.map((prop, key) => {
                  return {
                    value: key,
                    label: "Page " + (key + 1),
                  };
                })}
                placeholder="Select page"
              />
              <Select
                className="react-select info mx-5 w-100"
                classNamePrefix="react-select"
                name="singleSelect"
                value={numberOfRows}
                onChange={(value) => {
                  console.log(value);
                  setPageSize(value.value);
                  setNumberOfRows(value);
                }}
                options={numberOfRowsData.map((prop) => {
                  return {
                    value: prop,
                    label: prop + " rows",
                  };
                })}
                placeholder="Select #rows"
              />

Upvotes: 0

Views: 622

Answers (1)

DinoDon
DinoDon

Reputation: 41

I found the issue: I have astro layouts for the following: SideBarLayout NavBarLayout BaseLayout PageLayout ContainerLayout BlocksLayout BlockLayout FormLayout

Each of these also leverage a Jsx component. My ContainerLayout and SideBar was missing the client:load value. After correcting that, my forms load properly with event logic and everything and runs withing fastify sever.

Upvotes: 0

Related Questions