Open andreydro opened 1 year ago
Solution found.
React-select
does not every time works with SSR in Next.js, so dynamic import that allows turning off SSR for a particular component does the job.
https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
@andreydro Which version of Next.js are you using?
@Rall3n Next.js version 13.0.5
Select shows this error only in page file (inside Next.js folder pages/
). Other components seems to work fine (in my case inside Modal of react-responsive-modal
)
@andreydro Unfortunately I can't reproduce the problem with an example from Next.js.
Would you please be so kind and try to reproduce the issue using the following StackBlitz example (https://stackblitz.com/edit/github-kg48su)?
Wanted to add that including any @emotion
dependencies into my external
array in vite.config.ts
file resolved my issues (See example below).
import { resolve } from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
import dts from 'vite-plugin-dts'
import svgrPlugin from 'vite-plugin-svgr'
export default defineConfig({
plugins: [dts(), react(), tsconfigPaths(), svgrPlugin()],
build: {
lib: {
entry: resolve(__dirname, 'src/index.ts'),
name: 'ui',
formats: ['es', 'cjs'],
fileName: (format) => `ui.${format}.js`,
},
outDir: 'dist',
rollupOptions: {
external: [
'react',
'styled-components',
'@emotion/react',
'@emotion/styled',
],
output: {
globals: {
react: 'React',
'styled-components': 'styled-components',
},
exports: 'named',
},
},
},
server: {
https: false,
open: false,
},
})
I get the same error if I try to use react-select in Deno Fresh (SSR using preact-render-to-string). Is SSR expected to be supported?
Hi there, I've come across this error too and I think it has to do with the node version. It breaks for me on server load (works fine on client load) with the same error: TypeError: Cannot read properties of null (reading 'registered')
When using node version 20.10.0
, however if I roll back to node version 16.20.1
I no longer have this issue.
Hope this helps :)
https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
I can't confirm the theory for now, have the same issue with node 16 and 18. Happens for me in tests (jest, JSDOM).
@adamgreg @DmitryMasley @sgedye @andreydro
Hi guys.
Have you managed to workaround this issue somehow? I don't really want to use dynamic
🤔
@zgrybus No, for pages with SSR we use dynamic
. For other places, it works without dynamic
(for example for code in modal)
@zgrybus No, for pages with SSR we use
dynamic
. For other places, it works withoutdynamic
(for example for code in modal)
so bad :( Thanks for reply! :)
Any luck on this issue ???
We faced with this problem while trying to test ReactSelect with Jest and jsdom.
Environment: NodeJS: 14.21.3 React: 16.13.1 react-select: 4.3.0 @testing-library/react: 12.1.5
If you're using this in a component library, you can install emotion as a devDependency and externalize them in your vite.config.ts.
"devDependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
}
export default defineConfig({
build: {
...
rollupOptions: {
external: ['react', 'react-dom', '@emotion/react', '@emotion/styled'],
output: {
globals: {
react: 'React',
'react-dom': 'ReactDOM',
tailwindcss: 'tailwindcss',
},
},
},
},
});
Hi!
I use react-select (v 5.7) inside the package this way:
But when I try to use this component in a different project (as a package), then I get the following error:
It is happening even if I use Select without props
I think, something is wrong with my webpack config, but I don't know what. Other components that used external libraries are working fine. The problem is only with
react-select
libHere is my webpack config:
Do not provide a sandbox link, because in the package Storybook component works fine, problems start after import into another project.