TypeScript | Could not find dependency: react-select, styled-components etc. missing as dependency

[lloydaf]

• @freenow/wave version: 1.16.1

Relevant code

import { Text } from "@freenow/wave";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Text>Test</Text>
    </div>
  );
}

What happened?

The application does not compile, the following messages are displayed (one in my local env, one in codesandbox): Could not find dependency: 'styled-components' relative to '/node_modules/@freenow/wave/lib/esm/components/Accordion/Accordion.js'

Module not found: Can't resolve 'react-select' in '/Users/lloydaf/playground/node_modules/@freenow/wave/lib/esm/components/PhoneInput/components'

Reproduction

1. Create a fresh typescript project
2. Add just wave as a dependency
3. Try to use an element from wave

You can check a reproduction here

[snapsnapturtle]

Thanks for reporting the bug and adding the code sandbox example. For the styled-components dependency this is somewhat expected. It's marked as a peerDependency, which means you have to install it manually in your project (see more info here).

About the react-select, I think this might be related to the react-windowed-select dependency. Since you added this, do you have some more insights there?

In either case, this seems like something we should add to the documentation, what do you think?

[lloydaf]

In my opinion, if we want to go with the peerDependency approach, then we should definitely document it. I had the impression that it was better to bundle styled-components with wave, but from the link it's clear that it's not recommended. Regarding react-windowed-select, I don't have a strong opinion about it but I feel that we should probably add it as a peerDependency too. What do you think?

[lloydaf]

Actually, scratch that. I am not able to reproduce the react-select issue on the codesandbox, so maybe it's an issue with my environment. Let me dig around a bit, maybe there is no action to be done except documentation 🤷🏻

[jonotrujillo]

@lloydaf: Did you ever face this problem again? I feel like it's the same one I have at the moment. For example:

ERROR in ./node_modules/@freenow/wave/lib/esm/components/PhoneInput/components/Option.js 2:0-42
Module not found: Error: Can't resolve 'react-select' in '/Users/jonathantrujillo/Code/free-now/voucher-frontend/packages/voucher-remote/node_modules/@freenow/wave/lib/esm/components/PhoneInput/components'
 @ ./node_modules/@freenow/wave/lib/esm/components/PhoneInput/PhoneInput.js 19:0-45 41:16-22
 @ ./node_modules/@freenow/wave/lib/esm/components/index.js 30:0-53 30:0-53
 @ ./node_modules/@freenow/wave/lib/esm/index.js 2:0-29 2:0-29
 @ ./src/components/GlobalStyles.tsx
 @ ./src/App.tsx 19:0-57 46:47-59
 @ ./src/index.tsx 4:0-24 5:56-59

[lloydaf]

tbh I didn't explore this afterwards, I assumed it's an issue with my env. Maybe we should considering making this a peerDependency 🤔

[jonotrujillo]

I was not able to reproduce in code sandbox, but here's a repo demonstrating the issue: https://github.com/jonotrujillo/wave-react-select-bug

Run:

npm install
npm run build

The following output is shown:

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'react-select' in '/Users/jonathantrujillo/Code/wave-react-select-bug/node_modules/@freenow/wave/lib/esm/components/SelectList'

[jonotrujillo]

@lloydaf: Because react-select is still used in several places, I think it should be a dependency of the project, instead of peerDependency

[nlopin]

react-select is a transition dependency of react-windowed-select. If we use it, we need to keep one or another, but not use both at the same time, because react-windowed-select uses react-select under the hood

[lloydaf]

This problem resurfaced again, apparently react-select isn't installed as a dep of react-windowed-select causing issues in BOMT from wave for the tests

[jonotrujillo]

In the sync we agreed that the solution should be that we replace all usage of react-select to react-windowed-select