Compile issues when importing package

[L-Triple-O]

Hello! I'm attempting to install this package via npm and import it into my project. (Node v12.22.6/React 16.14)
import { SearchBar, UniversalResults } from '@yext/search-ui-react';

After importing there seems to be a compilation error(s) pointing to a dependency:

./node_modules/@reach/auto-id/dist/reach-auto-id.mjs 28:23
Module parse failed: Unexpected token (28:23)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   if (maybeReactUseId !== void 0) {
|     let generatedId = maybeReactUseId();
>     return providedId ?? generatedId;
|   }
|

I've also tested this with a new create react app test project (node v14.17/React 16.14) with same error.
Although compiling nullish coalescing should likely be handled by this package, I've tried to handle this and compile on our project's side in various ways with no success.

Are there additional dependency considerations?

[nmanu1]

Hello, besides installing this package and its peer dependencies, there shouldn't need to be any other steps for the import you included to compile successfully in a new create react app project.

I tried spinning up a new project via create react app (Node v14.19/React 16.14), installed this package and its peer dependencies via npm, and added the import, but, I'm able to build with no issues. Can you link a repo or give more detailed steps to reproduce the error?

[L-Triple-O]

Hi @nmanu1 , Thanks for the quick response.
Now I'm encountering a different issue when attempting to reproduce steps.

• Started a new react app via npx create-react-app my-app with Node v14.17.0
• deleted the node_modules folder and package-lock.json file
• Updated package.json dependency versions and added Yext packages.

"@yext/search-headless-react": "^2.1.0",
"@yext/search-ui-react": "^1.1.0",
"react": "^16.14.0",
"react-dom": "^16.12.0",
"react-scripts": "4.0.3",

• Ran npm install then npm start
• Encountered error from index.js
• Updated index.js code to reflect React version (import and render mainly):

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import reportWebVitals from './reportWebVitals';

const root = document.getElementById('root');
ReactDOM.render(
    <App />,
    root
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();

• Verified app worked and with local app running continued..
• in App.js, imported providerHeadless from Yext search headless library, compiled fine.
• Next, imported VerticalResults (or anything) from Yext react ui and encountered error.

./node_modules/tailwind-merge/dist/lib/config-utils.mjs
Can't import the named export 'createClassUtils' from non EcmaScript module (only default export is available)

I'm still trying to outline easy reproducible steps for original issue also.

[nmanu1]

I was able to reproduce the issue after following the steps you outlined. The problem is coming from the use of v4 of create-react-app, which uses Webpack v4 under the hood (see issue). Upgrading to use v5 will fix the issue. Alternatively, if you're not able to upgrade, you can add the following two Babel plugins to your Webpack config: @babel/plugin-proposal-nullish-coalescing-operator and @babel/plugin-proposal-optional-chaining.

I confirmed that the issue is resolved after ejecting from create-react-app (npm run eject), installing the two Babel plugins, and adding the following at line 452 in webpack.config.js in the options for processing JS outside of the app with Babel:

// Process any JS outside of the app with Babel.
{
  ...
  options: {
    babelrc: false,
    configFile: false,
    compact: false,
    presets: [
      ...
    ],
    plugins: [
      "@babel/plugin-proposal-nullish-coalescing-operator",
      "@babel/plugin-proposal-optional-chaining",
    ],
    cacheDirectory: true,
    ...
  }
}