[BUG] Fix console warnings about 'Query' export

[JohnathonBowers]

Describe the bug

When I try to run the OUI documentation site, I see a number of warnings in my console regarding a missing export 'Query'.

To Reproduce
Steps to reproduce the behavior:

1. Fork the OUI repo and clone it to your local machine
2. Run yarn install and then yarn start
3. Visit localhost:8030 on your browser (Chrome, in my case)
4. Right click on browser screen, choose 'Inspect'
5. Click on the 'Console' tab

Expected behavior

These warnings should not appear. :)

Screenshots

Host/Environment (please complete the following information):

• OUI Version: 1.22.19
• OSD Version (if applicable): N/A
• OS: macOS Ventura 13.5.2
• Browser and version: Chrome (Version 116.0.5845.187 (Official Build))

Additional context

N/A

[BSFishy]

This appears to be an issue with (maybe?) Typescript and exporting the Query/Ast types (the logs in the console that say they're warnings). See #770 (comment)

I've been investigating this for a little bit and can't find anything on my end. What Babel outputs (which runs after Typescript) has correct exports, so this is maybe just a bug in Webpack.

This will probably be a matter of changing lines that say

import { Query } from './query';

into

import { Query } from './query/query';

Most likely will need this change in

• src/components/search_bar/index.ts
• src/components/search_bar/search_bar.test.tsx
• src/components/search_bar/search_bar.tsx
• src/components/search_bar/search_filters.test.tsx
• src/components/search_bar/search_filters.tsx

You can see how those files are change in #770 for these changes

[JohnathonBowers]

Is it okay to also address the issue with the 'Ast' import as a part of this bug fix, or should I just focus on the 'Query' import?

[BSFishy]

Is it okay to also address the issue with the 'Ast' import as a part of this bug fix, or should I just focus on the 'Query' import?

Yeah definitely. No need in creating multiple PR/issues if they are related :)

[JohnathonBowers]

I was able to update the path names like you suggested and get the site to run . It appears that ./query was directing to .query/index (see screenshot below), so changing the path names to .query/query did the trick.

I've tried to fix the warning in my console about export 'Ast' was not found in './search_bar'. However, I'm not seeing what is causing the problem.

The entry point for the warning is src/components/search_bar/index.ts. The relevant block is below:

'Ast' is being exported from src/components/search_bar/search_bar.tsx. There, on line 40, 'AST' is being exported as 'Ast':

So, I'm not sure what is causing this particular warning. Any thoughts?

[AwesomeSauce42]

Hi, tried to reproduce this error, but my console doesn't show any warnings.

[BSFishy]

So, I'm not sure what is causing this particular warning. Any thoughts?

Yeah, most likely you'll need to make a separate export in src/components/search_bar/search_bar.tsx:

export { Query } from './query/query';
export { AST as Ast } from './query/ast';

[JohnathonBowers]

I tried the fix you suggested, but I'm still getting the warning in my browser console:

I've done some digging, and, as best I can tell, I think the issue is arising when 'AST' is being exported under an alias. I tried getting rid of the alias in this file and the other files that use it, and the warning disappears from my browser console:

[joshuarrrr]

@JohnathonBowers Go ahead with that fix to de-alias AST. I still wish we had a better understanding of what's causing the issue, and why it only appeared recently. @AMoo-Miki Is this something you recognize at all from other bundling/building work?

[JohnathonBowers]

Sounds good, @joshuarrrr . Is it okay to open up a separate issue for this, or would you prefer that I keep the fix in the same PR as the Query path fix?

[joshuarrrr]

separate PR/issue is always welcome

[AMoo-Miki]

@AMoo-Miki Is this something you recognize at all from other bundling/building work?

@joshuarrrr yes. Something similar came up when upgrading webpack: #770 (comment)

[BSFishy]

I said this in Slack, but my theory is something along the lines that Webpack has some sort of bug on Mac in v4 and always in v5 that causes this. Potentially some sort of platform-specific optimization in v4, since this only popped up when people started using Mac's to develop. I checked the Babel output for both CJS and ESM for these files, and they seem just fine, even work without any problems with Node. In my mind, that only leaves Webpack as the culprit of this issue. Potentially Webpack trying to perform some sort of transpilation for an older target??

[JohnathonBowers]

@BSFishy @joshuarrrr I just opened a new issue for the AST fix (Issue #1081 ). Mind assigning it to me when you get a chance?