Search UI React: Module 1 Javascript Error on npm run dev

I am getting the following error after running npm run dev in unit 3.

Error 500
500 /Users/e2thex/dev/tt-job-search/node_modules/@yext/search-headless-react/lib/esm/index.js:1
import { useSearchActions } from './useSearchActions';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1178:20)
at Module._compile (node:internal/modules/cjs/loader:1220:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

% node -v
v18.16.1

code is at ttps://github.com/e2thex/tt-job-search.git

Anyone have an idea?

i also tryied

% node -v    
v17.9.0

Hi Erik,

Sorry for the delayed response. To help me get to the bottom of this, can you either make the repo that you provided public or give me access? My github username is apav-dev if you prefer to not make it public.

Thanks,

Aaron

Sorry Aaron I did not even know I could have private github repos! It is now public.

I am also getting this error, I tried both node versions

Hi Michael and Erik,

I have finally gotten to the bottom of this. Please follow these steps that should hopefully resolve your issue:

  1. In your package.json, change "@yext/pages": "^1.0.0-beta.16" to "@yext/pages": "1.0.0-beta.26"
  2. Run npm upgrade in the terminal.
  3. Run npm run dev and confirm the that issue is gone.

The problem is that the ^ in the dependency is updating your Pages version to the latest version of Pages which Search UI React is currently incompatible with. The new dependency will pin your pages version to beta.26. We are actively working on resolving this issue so that you can use Search UI React with the latest version of pages. Sorry again for the inconvenience!

Regards,

Aaron

1 Like

Aaron_ Pavlick Thank you for that

I am not getting the error any more and the site loads, but when I follow the link to /search I get a 404 page
the url comes out as http://localhost:5173/%2Fsearch

That seemed weird so I also tried
http://localhost:5173/search
Both get me a 404 page.

Any idea if that is related?

This is the screen I get on running npm run dev


when I click on search I get a 404 and the folllowing error in the terminal

ERROR: No entities found with slug "%2Fsearch"
You may ask for help in the community at https://hitchhikers.yext.com/community

Unable to generate test data from command: `yext pages generate-test-data --printDocuments --featuresConfig '{"features":[],"streams":[]}' --slug %2Fsearch`Cannot find document corresponding to slug: %2Fsearch

In templates/search.tsx, change getPath to the following:

export const getPath: GetPath<TemplateProps> = () => {
  return "search";
};

I have updated this in the starter repository. Sorry again for the inconvenience.

Thank @Aaron_Pavlick,
That did get the page to load but I still do not have any content results?

Yes I have this same issue that no results show up in the search bar

Hey Erik and Otto,

Have you both added the necessary <VerticalResults /> component as outlined in unit 4? If so, are you receiving any errors in your terminal or console?

Thanks,

Daniel

@Daniel_Baigel

Here is my Search component

import {
  SearchBar,
  StandardCard,
  VerticalResults,
  SpellCheck,
  ResultsCount,
  Pagination,
  } from "@yext/search-ui-react";
...
const Search: Template<TemplateRenderProps> = () => {
  return (
    <SearchHeadlessProvider searcher={searcher}>
      <div className="px-4 py-8">
        <div className="mx-auto flex max-w-5xl flex-col">
          <SearchBar />
          <SpellCheck />
          <ResultsCount />
          <VerticalResults
            CardComponent={StandardCard}
            displayAllOnNoResults={true}
          />
        </div>
        <Pagination />
      </div>
    </SearchHeadlessProvider>
  );

As for the errors, my account has expired, I am working to get it back up and running and then I will post any that I see but if I remember i was not seeing anything in the console.

Thanks for passing this along Erik!

I took a look and I believe the issue is with our starter search configuration. Can you go into your account and navigate to:

Search > turtlehead > Verticals

Then select the FAQs verticals at the top of the page, scroll down to the bottom to the “Additional Vertical Settings” section and remove the Saved Filters Applied.

Your config should look like this:

Then click “Save” at the bottom of the screen. Please let me know if after doing this you still cannot see results, in the meantime we’ll make sure to fix our starter repo.

Best,

Daniel
Let me know if af

@Daniel_Baigel That did help I now do see some results but I expect that maybe there is another one like that I need to fix because I do not get a number that is part of the options for the question
Here is the question


You can see that 2 is not an anwser do you think there might be another thing in the starter that might need to be changed?

Here is the results
Here are the results

Hey Erik,

We need to update our quiz to reflect some new changes we made to both the Search UI React SDK and the module, so I wouldn’t worry about not seeing the right answers. For example, when using a StandardCard component you won’t be able to see a CTA even though the second question asks for one.
We’ll make sure to update this ASAP, but your experience should be correct!

Apologies for the confusion in this module, but we appreciate you helping us debug!

Best,

Daniel

@Daniel_Baigel

Ok Thank you I will just brut force the quiz.