react-windowed-select crashes Next.js

[controversial]

This package is broken on Next.js.

To reproduce:

• Create a Next.js app using create-next-app or by hand
• npm i react-windowed-select
• Add a WindowedSelect to any page

A TypeError: Cannot read property 'registered' of null is thrown.

Here's a minimal reproduction - a Next.js app which is empty besides a single WindowedSelect on the homepage.

[yagudaev]

I have the same problem. @controversial did you find a workaround?

[controversial]

I didn't, sorry!

[jacobworrel]

Not sure what's going on since I'm not very familiar with Next.js - none of the library's source code reads a registered property so I wonder if this might be a dependency issue.

[yagudaev]

I actually think it is a packaging issue @jacobworrel, I ended up solving this for me by vendoring in your code. Yes, literally copied the typescript source into my project to avoid going through webpack.

It did the trick.

I'm not entirely sure how packages get compiled and included into a next.js project.

[aaqibqadeer]

@yagudaev can you help me out? how did you resolve this issue? Thanks

[yagudaev]

@aaqibqadeer I literally went to master source, copied and pasted the files I needed from there in typescript into my project.

I put all that into a special folder called /src/vendor/react-windowed-select

Code works fine, just something with the build

[aaqibqadeer]

@yagudaev Thank you :) It is working

[flowoow]

@yagudaev and for a very noob person, how do you import it?

import WindowedSelect from '/src/vendor/react-windowed-select'; ?

I can't seem to figure out why it doesn't find the module for me.

Cheers

[aaqibqadeer]

@flowoow copy the entire react-windowed-select folder and paste it anywhere inside your folder. and then import it relatively like any other normal react component. like this: import WindowedSelect from '../components/react-windowed-select';

[flowoow]

That's what I did, but somehow it doesn't work

[jacobworrel]

Thanks for the workaround @yagudaev :) Unfortunately, I don't have time at the moment to fix the underlying packaging issue but if anyone in this thread wants to submit a PR so that the package can be consumed in next.js projects, that would be very welcome!

[flowoow]

That's what I did, but somehow it doesn't work

Had to enable Typescript for the project.-> touch tsconfig.json in root folder

[yagudaev]

Thanks for the workaround @yagudaev :) Unfortunately, I don't have time at the moment to fix the underlying packaging issue but if anyone in this thread wants to submit a PR so that the package can be consumed in next.js projects, that would be very welcome!

Thanks Jacob, no worries thanks for putting up this library 😁. Open Source is a lot of hard work ❤️

[flowoow]

Is it working for you during deployment? It works fine on my dev setup, but once I deploy on Vercel I get the following :

Failed to compile. ./components/react-windowed-select/MenuList.tsx:10:23 Type error: Module '"react-select"' has no exported member 'GroupTypeBase'. Did you mean to use 'import GroupTypeBase from "react-select"' instead? 8 | import * as React from 'react'; 9 | import { ListChildComponentProps, VariableSizeList as List } from 'react-window'; 10 | import { OptionProps, GroupTypeBase, OptionTypeBase } from 'react-select';`

11 | 12 | interface Style extends React.CSSProperties { 13 | top: number, Error: Command "npm run build" exited with 1

[yagudaev]

Yep, I got it deploying to vercel. Seems to be working ok 😁

[flowoow]

I forgot to follow up on my question, I had to modify the typescript config file with the one from this code to get it to be happy with it. :)

[vitalybaev]

@jacobworrel I was investigating this issue today, and it turned out that this line causes the error. I'm not an expert in Emotion, but I've found a workaround - it's to add react-select to externals in webpack.config.js.