I’m in the process of converting a client’s “Classic” Pages site to React and when attempting to render a Rich Text v2 field using the LexicalRichText component from @yext/react-components (as instructed in the documentation, immediately on saving the component that includes the LexicalRichText component implementation, the site refuses to compile and the following error appears in the terminal:
❯ npm run dev
> blink-location-pages@0.0.1 dev
> pages dev
(node:82021) ExperimentalWarning: The Node.js specifier resolution flag is experimental. It could change or be removed at any time.
(Use `node --trace-warnings ...` to show where the warning was created)
This is a beta version of the Yext Command Line Interface
Settings from your current credential [blink-location-pages-3258070] are:
Name: blink-location-pages-3258070
Universe: sandbox
Account ID: 3258070
Account Name: blink-location-pages
> pages generate templates
(node:82057) ExperimentalWarning: The Node.js specifier resolution flag is experimental. It could change or be removed at any time.
(Use `node --trace-warnings ...` to show where the warning was created)
(node:82057) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
12:25:52 PM [vite] Error when evaluating SSR module /src/components/common/Footer.tsx: failed to import "@yext/react-components"
|- /Users/ryan/Coding/crometrics/blink-location-pages/new/blink-location-pages/node_modules/@yext/react-components/lib/esm/index.js:1
export { Address } from "./components/address";
^^^^^^
SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
12:25:52 PM [vite] Error when evaluating SSR module /src/layouts/main.tsx: failed to import "/src/components/common/Footer.tsx"
|- /Users/ryan/Coding/crometrics/blink-location-pages/new/blink-location-pages/node_modules/@yext/react-components/lib/esm/index.js:1
export { Address } from "./components/address";
^^^^^^
SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
12:25:52 PM [vite] Error when evaluating SSR module /src/layouts/search/template.tsx: failed to import "/src/layouts/main.tsx"
|- /Users/ryan/Coding/crometrics/blink-location-pages/new/blink-location-pages/node_modules/@yext/react-components/lib/esm/index.js:1
export { Address } from "./components/address";
^^^^^^
SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
12:25:52 PM [vite] Error when evaluating SSR module /Users/ryan/Coding/crometrics/blink-location-pages/new/blink-location-pages/src/templates/search.tsx?update=1702923949541: failed to import "/src/layouts/search/template.tsx"
|- /Users/ryan/Coding/crometrics/blink-location-pages/new/blink-location-pages/node_modules/@yext/react-components/lib/esm/index.js:1
export { Address } from "./components/address";
^^^^^^
SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
/Users/ryan/Coding/crometrics/blink-location-pages/new/blink-location-pages/node_modules/@yext/react-components/lib/esm/index.js:1
export { Address } from "./components/address";
^^^^^^
SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
Node.js v18.15.0
> yext pages generate-test-data
This is a beta version of the Yext Command Line Interface
WARNING: unexpected keys in site config: "siteStream.fields.[10]"
Generated 0 files for stream "directory-state"
Generated 1 files for stream "search-page"
Generated 1 files for stream "directory-root"
Generated 10 files for stream "directory-city"
Generated 10 files for stream "location-stream"
Generated 2 files for static features
listening on :5173
(node:82021) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
12:25:57 PM [vite] Error when evaluating SSR module /src/components/common/Footer.tsx: failed to import "@yext/react-components"
|- /Users/ryan/Coding/crometrics/blink-location-pages/new/blink-location-pages/node_modules/@yext/react-components/lib/esm/index.js:1
export { Address } from "./components/address";
^^^^^^
SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
12:25:57 PM [vite] Error when evaluating SSR module /src/layouts/main.tsx: failed to import "/src/components/common/Footer.tsx"
|- /Users/ryan/Coding/crometrics/blink-location-pages/new/blink-location-pages/node_modules/@yext/react-components/lib/esm/index.js:1
export { Address } from "./components/address";
^^^^^^
SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
12:25:57 PM [vite] Error when evaluating SSR module /src/layouts/search/template.tsx: failed to import "/src/layouts/main.tsx"
|- /Users/ryan/Coding/crometrics/blink-location-pages/new/blink-location-pages/node_modules/@yext/react-components/lib/esm/index.js:1
export { Address } from "./components/address";
^^^^^^
SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
12:25:57 PM [vite] Error when evaluating SSR module /Users/ryan/Coding/crometrics/blink-location-pages/new/blink-location-pages/src/templates/search.tsx?update=1702923955187: failed to import "/src/layouts/search/template.tsx"
|- /Users/ryan/Coding/crometrics/blink-location-pages/new/blink-location-pages/node_modules/@yext/react-components/lib/esm/index.js:1
export { Address } from "./components/address";
^^^^^^
SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
SyntaxError: Unexpected token 'export'
12:25:57 PM [vite] Error when evaluating SSR module /Users/ryan/Coding/crometrics/blink-location-pages/new/blink-location-pages/src/templates/search.tsx?update=1702923957652: failed to import "/src/layouts/search/template.tsx"
|- /Users/ryan/Coding/crometrics/blink-location-pages/new/blink-location-pages/node_modules/@yext/react-components/lib/esm/index.js:1
export { Address } from "./components/address";
^^^^^^
SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
SyntaxError: Unexpected token 'export'
In the above error, export { Address } from "./components/address"; is referring to an export in@yext/react-components (/node_modules/@yext/react-components/lib/esm/components/address/index.js) npm module rather than something in the project’s code.
I’m using the Pages React Starter Consulting template. My package.json includes "type": "module". My tsconfig.json is unchanged from the template.
The usage of the LexicalRichText component is as follows:
import { Link } from '@yext/sites-components';
import { LexicalRichText } from '@yext/react-components';
import { type C_FooterLinkSections, type RtfV2 } from 'src/types/entities';
import { FooterLinkSection } from './FooterLinksSection';
import {
Facebook,
Instagram,
Twitter,
TikTok,
} from 'src/assets/svgs/SocialIcons';
import { Logo } from 'src/assets/svgs/LogoIcons';
interface FooterProps {
copyrightMessage?: string;
twitter?: string;
facebook?: string;
instagram?: string;
tikTok?: string;
androidAppUrl?: string;
iosAppUrl?: string;
footerLinkSections?: C_FooterLinkSections[];
notificationBannerTerms?: RtfV2;
notificationBannerText?: RtfV2;
}
const Footer = (props: FooterProps) => {
const {
twitter,
facebook,
instagram,
tikTok,
copyrightMessage,
notificationBannerTerms,
footerLinkSections,
} = props;
const socialLinks = [
{ link: facebook, label: Facebook },
{ link: tikTok, label: TikTok },
{ link: instagram, label: Instagram },
{ link: twitter, label: Twitter },
].filter((link) => link.link);
return (
<footer className="flex justify-center pt-0 md:pt-8 md:m-4">
<div className="flex flex-col justify-center gap-10">
<div className="flex flex-row justify-evenly h-full gap-20 flex-grow">
<div className="flex flex-row md:flex-col justify-start mb-8 mt-5 md:my-0 md:max-w-[16.25rem]">
<Logo className="max-w-full max-h-full w-[5.1875rem] md:h-[3.1875rem] md:w-[8.8123rem]" />
<div className="flex flex-row items-end gap-4">
{socialLinks.map((socialLink, i) =>
socialLink.link ?
<Link
className="inline-block w-7 h-7 md:mr-4 md:last:mr-0"
key={i}
href={socialLink.link}
>
<socialLink.label className="inline-block w-7 h-7 md:mr-4 md:last:mr-0" />
</Link>
: null,
)}
</div>
</div>
<div className="hidden md:flex flex-col">
<FooterLinkSection footerLinkSections={footerLinkSections || []} />
</div>
</div>
<div className="flex flex-row justify-start w-full h-full">
<div className="text-sm/[1.07rem] text-left text-brand-gray-11">
{copyrightMessage}
</div>
</div>
<div className="flex flex-row justify-start w-full h-full">
<div className="terms">
{notificationBannerTerms && (
<LexicalRichText
serializedAST={JSON.stringify(notificationBannerTerms.json)}
/>
)}
</div>
</div>
</div>
</footer>
);
};
export { Footer };
