How to use React Spectrum with Next.js #760

vestimir · 2020-07-15T18:42:56Z

❔ Question

Next.js does not support importing of CSS from node_modules, is there a workaround for getting Spectrum and Next.js to play together?

🔦 Context

I just created an empty Next.js project and tried to import @adobe/react-spectrum but it complains with the following error:

error - ./node_modules/@react-aria/visually-hidden/dist/main.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/@react-aria/visually-hidden/dist/module.js

💻 Code Sample

Empty Next.js project with the example from Spectrum Getting started in pages/index.js

The text was updated successfully, but these errors were encountered:

devongovett · 2020-07-15T19:01:17Z

Hmm, I think you may need to override the webpack config to add css-loader? Possibly the next-css package could help? https://github.com/vercel/next-plugins/tree/master/packages/next-css

ross-pfahler · 2020-07-15T20:52:46Z

I believe this is because of this vercel/next.js#12079. It does seem like the vercel team is working on it.

mrmntte · 2020-07-16T13:34:20Z

Could you allow us to import the css manually?
In Next.js, importing global css is allowed only from _app.js

RafalFilipek · 2020-07-16T18:40:12Z

This should be solved in near future (hopefully). vercel/next.js#15208

devongovett · 2020-07-24T04:36:52Z

#835 sets up a test harness to ensure all the components work in an SSR environment. If anyone would like to contribute tests to help with this effort, please feel free! 😄

krijoh92 · 2020-08-04T20:36:17Z

Not sure this is a good workaround or not, but it is a workaround. Install the following dependencies:

@zeit/next-css
next-compose-plugins
next-transpile-modules

And edit your next.config.js to look something like this:

const withPlugins = require('next-compose-plugins')
const withCSS = require('@zeit/next-css')
const withTM = require('next-transpile-modules')([
  // Not sure all of the following need to be included, just did to make sure
  '@adobe/react-spectrum',
  '@adobe/react-spectrum-ui',
  '@react-aria',
  '@react-spectrum',
  '@react-stately',
])

if (typeof require !== 'undefined') {
  require.extensions['.less'] = () => {}
  require.extensions['.css'] = (file) => {}
}
global.requestAnimationFrame = (cb) => cb()

module.exports = withPlugins([withCSS, withTM], {
  // Your next configuration
})

devongovett · 2020-08-22T00:17:17Z

This should be fixed as of #994! We have a bit of testing to do, but things are looking good. We'll be getting this into the next release along with some docs about how to use React Spectrum/React Aria with Next.js and SSR in general. 😄

jcarrera · 2020-08-22T00:46:14Z

@devongovett awesome!

SheaBelsky · 2020-08-27T00:45:04Z

@devongovett Thank you for resolving this issue, Devon! Is there an estimated timeline for when the next release of React Spectrum is going to be? We're considering moving away from a different design library, and I'd love to see if Spectrum/Aria/Stately meet our use cases going forward (in a Next.js application.)

devongovett · 2020-08-27T00:54:29Z

@SheaBelsky we have testing scheduled for Friday, so should be early next week if all goes well. Working on the docs as well. 😄

SheaBelsky · 2020-08-27T00:57:15Z

@devongovett That's great to hear, thank you!

devongovett · 2020-09-02T19:24:51Z

Release is now out! See our guides for React Spectrum and React Aria to learn more. 🎉

snax4a · 2022-09-14T13:54:35Z

Hi,
I am seeing similar issue with @adobe/react-spectrum": "^3.21.2" and next 12.2.5
I am using pnpm package manager.
I am trying to use Picker component.

Error:

./node_modules/.pnpm/@react-spectrum+actiongroup@3.6.1_vq3pvykbfgerr5rtx4n53bcbxy/node_modules/@react-spectrum/actiongroup/dist/main.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/.pnpm/@react-spectrum+actiongroup@3.6.1_vq3pvykbfgerr5rtx4n53bcbxy/node_modules/@react-spectrum/actiongroup/dist/module.js

next info output:

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64
    Binaries:
      Node: 16.15.1
      npm: 8.11.0
      Yarn: 1.22.17
      pnpm: 7.11.0
    Relevant packages:
      next: 12.2.5
      eslint-config-next: 12.2.5
      react: 18.2.0
      react-dom: 18.2.0

giovanniincammicia · 2022-10-05T09:18:18Z

I've followed the instructions here: https://react-spectrum.adobe.com/react-spectrum/ssr.html

It still doesn't work on Next.js.
I'm trying to use @react-spectrum/datepicker
It's been 2 years, can we have a feedback or a guide on how to fix it?

reidbarber · 2022-10-05T15:02:19Z

@giovanniincammicia It should be working now. Can you post any specific errors you're getting? Don't forget to disable React strict mode if it is enabled in next.config.js.

tknoq · 2022-10-14T19:42:31Z

I'm having a similar issue with the latest version of Next.js and react-spectrum "^3.22.0".
Unfortunately, this problem seems to have reoccurred.
The cause is probably on the Next.js side, but I hope it will be fixed anyway.

snax4a · 2022-10-17T09:01:54Z

@reidbarber
I'm still not able to get this working with next.js.

next info output:

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64
    Binaries:
      Node: 16.15.1
      npm: 8.11.0
      Yarn: 1.22.19
      pnpm: 7.13.5
    Relevant packages:
      next: 12.3.1
      eslint-config-next: 12.3.1
      react: 18.2.0
      react-dom: 18.2.0

This is my next.config.mjs

// @ts-check

import withTM from 'next-transpile-modules';

/**
 * Don't be scared of the generics here.
 * All they do is to give us autocompletion when using this.
 *
 * @template {import('next').NextConfig} T
 * @param {T} config - A generic parameter that flows through to the return type
 * @constraint {{import('next').NextConfig}}
 */
function defineNextConfig(config) {
  return config;
}

export default withTM([
  '@adobe/react-spectrum',
  '@react-spectrum/actiongroup',
  '@react-spectrum/breadcrumbs',
  '@react-spectrum/button',
  '@react-spectrum/badge',
  '@react-spectrum/buttongroup',
  '@react-spectrum/calendar',
  '@react-spectrum/checkbox',
  '@react-spectrum/combobox',
  '@react-spectrum/contextualhelp',
  '@react-spectrum/datepicker',
  '@react-spectrum/dialog',
  '@react-spectrum/divider',
  '@react-spectrum/form',
  '@react-spectrum/icon',
  '@react-spectrum/illustratedmessage',
  '@react-spectrum/image',
  '@react-spectrum/label',
  '@react-spectrum/layout',
  '@react-spectrum/link',
  '@react-spectrum/list',
  '@react-spectrum/listbox',
  '@react-spectrum/menu',
  '@react-spectrum/meter',
  '@react-spectrum/numberfield',
  '@react-spectrum/overlays',
  '@react-spectrum/picker',
  '@react-spectrum/progress',
  '@react-spectrum/provider',
  '@react-spectrum/radio',
  '@react-spectrum/slider',
  '@react-spectrum/searchfield',
  '@react-spectrum/statuslight',
  '@react-spectrum/switch',
  '@react-spectrum/table',
  '@react-spectrum/tabs',
  '@react-spectrum/text',
  '@react-spectrum/textfield',
  '@react-spectrum/theme-dark',
  '@react-spectrum/theme-default',
  '@react-spectrum/theme-light',
  '@react-spectrum/tooltip',
  '@react-spectrum/view',
  '@react-spectrum/well',
  '@spectrum-icons/illustrations',
  '@spectrum-icons/ui',
  '@spectrum-icons/workflow',
])(
  defineNextConfig({
    reactStrictMode: false,
    swcMinify: true,
    output: 'standalone',
    experimental: {
      newNextLinkBehavior: true,
    },
  })
);

I tried with reactStrictMode enabled and disabled option.

I am using pnpm as a package manager.
I Installed only "@adobe/react-spectrum": "3.22.0" package

When trying to start dev server I am getting following error:

Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
Error: next-transpile-modules - an unexpected error happened when trying to resolve "@react-spectrum/actiongroup". Are you sure the name of the module you are trying to transpile is correct, and it has a package.json with a "main" or an "exports" field?
Error: Can't resolve '@react-spectrum/actiongroup/package.json' in '/Users/szymon/projects/test'
    at getPackageRootDirectory (/Users/szymon/projects/test/node_modules/.pnpm/next-transpile-modules@9.1.0/node_modules/next-transpile-modules/src/next-transpile-modules.js:123:15)
    at Array.map (<anonymous>)
    at withTM (/Users/szymon/projects/test/node_modules/.pnpm/next-transpile-modules@9.1.0/node_modules/next-transpile-modules/src/next-transpile-modules.js:132:34)
    at file:///Users/szymon/projects/test/next.config.mjs:22:3
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async Object.loadConfig [as default] (/Users/szymon/projects/test/node_modules/.pnpm/next@12.3.1_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/config.js:68:36)
    at async NextServer.prepare (/Users/szymon/projects/test/node_modules/.pnpm/next@12.3.1_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/next.js:127:24)

Also I don't need any react-spectrum styles I just want to use your Picker and Combobox components because of their great onLoadMore prop. I can style it on my own.
I could not find that load more feature in any other react combobox / select components.

Can you somehow let us youse your Picker component without any styles if there are such problems in next.js?

Unfortunatelly react-aria/useSelect and react-aria/useComboBox hooks don't have onLoadMore feature. If they did that would be awesome.

snax4a · 2022-10-17T10:03:57Z

@reidbarber I'm still not able to get this working with next.js.

next info output:

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64
    Binaries:
      Node: 16.15.1
      npm: 8.11.0
      Yarn: 1.22.19
      pnpm: 7.13.5
    Relevant packages:
      next: 12.3.1
      eslint-config-next: 12.3.1
      react: 18.2.0
      react-dom: 18.2.0

This is my next.config.mjs

// @ts-check

import withTM from 'next-transpile-modules';

/**
 * Don't be scared of the generics here.
 * All they do is to give us autocompletion when using this.
 *
 * @template {import('next').NextConfig} T
 * @param {T} config - A generic parameter that flows through to the return type
 * @constraint {{import('next').NextConfig}}
 */
function defineNextConfig(config) {
  return config;
}

export default withTM([
  '@adobe/react-spectrum',
  '@react-spectrum/actiongroup',
  '@react-spectrum/breadcrumbs',
  '@react-spectrum/button',
  '@react-spectrum/badge',
  '@react-spectrum/buttongroup',
  '@react-spectrum/calendar',
  '@react-spectrum/checkbox',
  '@react-spectrum/combobox',
  '@react-spectrum/contextualhelp',
  '@react-spectrum/datepicker',
  '@react-spectrum/dialog',
  '@react-spectrum/divider',
  '@react-spectrum/form',
  '@react-spectrum/icon',
  '@react-spectrum/illustratedmessage',
  '@react-spectrum/image',
  '@react-spectrum/label',
  '@react-spectrum/layout',
  '@react-spectrum/link',
  '@react-spectrum/list',
  '@react-spectrum/listbox',
  '@react-spectrum/menu',
  '@react-spectrum/meter',
  '@react-spectrum/numberfield',
  '@react-spectrum/overlays',
  '@react-spectrum/picker',
  '@react-spectrum/progress',
  '@react-spectrum/provider',
  '@react-spectrum/radio',
  '@react-spectrum/slider',
  '@react-spectrum/searchfield',
  '@react-spectrum/statuslight',
  '@react-spectrum/switch',
  '@react-spectrum/table',
  '@react-spectrum/tabs',
  '@react-spectrum/text',
  '@react-spectrum/textfield',
  '@react-spectrum/theme-dark',
  '@react-spectrum/theme-default',
  '@react-spectrum/theme-light',
  '@react-spectrum/tooltip',
  '@react-spectrum/view',
  '@react-spectrum/well',
  '@spectrum-icons/illustrations',
  '@spectrum-icons/ui',
  '@spectrum-icons/workflow',
])(
  defineNextConfig({
    reactStrictMode: false,
    swcMinify: true,
    output: 'standalone',
    experimental: {
      newNextLinkBehavior: true,
    },
  })
);

I tried with reactStrictMode enabled and disabled option.

I am using pnpm as a package manager. I Installed only "@adobe/react-spectrum": "3.22.0" package

When trying to start dev server I am getting following error:

Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
Error: next-transpile-modules - an unexpected error happened when trying to resolve "@react-spectrum/actiongroup". Are you sure the name of the module you are trying to transpile is correct, and it has a package.json with a "main" or an "exports" field?
Error: Can't resolve '@react-spectrum/actiongroup/package.json' in '/Users/szymon/projects/test'
    at getPackageRootDirectory (/Users/szymon/projects/test/node_modules/.pnpm/next-transpile-modules@9.1.0/node_modules/next-transpile-modules/src/next-transpile-modules.js:123:15)
    at Array.map (<anonymous>)
    at withTM (/Users/szymon/projects/test/node_modules/.pnpm/next-transpile-modules@9.1.0/node_modules/next-transpile-modules/src/next-transpile-modules.js:132:34)
    at file:///Users/szymon/projects/test/next.config.mjs:22:3
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async Object.loadConfig [as default] (/Users/szymon/projects/test/node_modules/.pnpm/next@12.3.1_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/config.js:68:36)
    at async NextServer.prepare (/Users/szymon/projects/test/node_modules/.pnpm/next@12.3.1_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/next.js:127:24)

Also I don't need any react-spectrum styles I just want to use your Picker and Combobox components because of their great onLoadMore prop. I can style it on my own. I could not find that load more feature in any other react combobox / select components.

Can you somehow let us youse your Picker component without any styles if there are such problems in next.js?

Unfortunatelly react-aria/useSelect and react-aria/useComboBox hooks don't have onLoadMore feature. If they did that would be awesome.

I managed to get this working by switching to yarn.
For some reason it is not working with pnpm 🤔

snowystinger · 2022-10-17T16:44:56Z

Looks like you used next.config.mjs, which uses ESM. See #3630 we're working on support for that.
If you used next.config.js and edited the internals to be require's, it should work.

snax4a · 2022-10-17T17:16:33Z

Looks like you used next.config.mjs, which uses ESM. See #3630 we're working on support for that. If you used next.config.js and edited the internals to be require's, it should work.

ESM is not a problem here, I tried with .config.js and requires and there is the same error when using pnpm.

It looks like there is some issue with peer dependencies.
I installed only "@adobe/react-spectrum": "3.22.0"
I am not importing any component, i only wrapped my app with ssr and theme providers:

<SSRProvider>
    <Provider theme={defaultTheme} colorScheme='light'>
        ....
    </Provider>
</SSRProvider>

When i remove node_modules and install dependencies with yarn and then start dev server i get this error:

Error: next-transpile-modules - an unexpected error happened when trying to resolve "@spectrum-icons/illustrations". Are you sure the name of the module you are trying to transpile is correct, and it has a package.json with a "main" or an "exports" field?

So I installed this package @spectrum-icons/illustrations and it now worked

I will post here both lock files maybe it will be helpfull

First one is yarn.lock (react spectrum is working):
https://gist.github.com/snax4a/76b166f467071a5f83d5c80729e38817

The second one is pnpm-lock.yaml (react spectrum not working, error resolving @react-spectrum/actiongroup package - full error was posted above):
https://gist.github.com/snax4a/3baa88ce306afefcb4f52cb1d8374abe

matijagrcic · 2023-01-10T11:39:33Z

The https://react-spectrum.adobe.com/react-spectrum/ssr.html#nextjs is outdated. In Next v13.1 you can do the following

-const withTM = require('next-transpile-modules')(['awesome_module']);

-module.exports = withTM({});
+module.exports = {
+  transpilePackages: ['awesome_module'],
+};

Ref: https://github.com/martpie/next-transpile-modules/releases/tag/the-end

So your next.config.js should look like the below

module.exports = {
  transpilePackages: [
    "@adobe/react-spectrum",
    "@react-spectrum/actiongroup",
    "@react-spectrum/badge",
    "@react-spectrum/breadcrumbs",
    "@react-spectrum/button",
    "@react-spectrum/buttongroup",
    "@react-spectrum/calendar",
    "@react-spectrum/checkbox",
    "@react-spectrum/color",
    "@react-spectrum/combobox",
    "@react-spectrum/contextualhelp",
    "@react-spectrum/datepicker",
    "@react-spectrum/dialog",
    "@react-spectrum/divider",
    "@react-spectrum/dnd",
    "@react-spectrum/form",
    "@react-spectrum/icon",
    "@react-spectrum/illustratedmessage",
    "@react-spectrum/image",
    "@react-spectrum/label",
    "@react-spectrum/labeledvalue",
    "@react-spectrum/layout",
    "@react-spectrum/link",
    "@react-spectrum/list",
    "@react-spectrum/listbox",
    "@react-spectrum/menu",
    "@react-spectrum/meter",
    "@react-spectrum/numberfield",
    "@react-spectrum/overlays",
    "@react-spectrum/picker",
    "@react-spectrum/progress",
    "@react-spectrum/provider",
    "@react-spectrum/radio",
    "@react-spectrum/slider",
    "@react-spectrum/searchfield",
    "@react-spectrum/statuslight",
    "@react-spectrum/switch",
    "@react-spectrum/table",
    "@react-spectrum/tabs",
    "@react-spectrum/text",
    "@react-spectrum/textfield",
    "@react-spectrum/theme-dark",
    "@react-spectrum/theme-default",
    "@react-spectrum/theme-light",
    "@react-spectrum/tooltip",
    "@react-spectrum/view",
    "@react-spectrum/well",
    "@spectrum-icons/illustrations",
    "@spectrum-icons/ui",
    "@spectrum-icons/workflow",
  ],

Ref: next.config.js and #3895

snowystinger · 2023-01-10T23:20:02Z

Thanks for the update, docs update here #3897

ktsnkmrcom · 2023-07-15T14:57:31Z

I think you already know...

Add @react-spectrum/actionbar

module.exports = {
transpilePackages: [
'@adobe/react-spectrum',
'@react-spectrum/actionbar', <<<
'@react-spectrum/actiongroup',

best regards.

devongovett added bug Something isn't working ssr labels Jul 16, 2020

This was referenced Jul 19, 2020

Can't use VisuallyHidden in Next.js #788

Closed

Setup SSR test harness #835

Merged

dannify mentioned this issue Aug 6, 2020

SSR - Add more component tests #899

Merged

benjroy mentioned this issue Aug 13, 2020

SSR compatibility patch for useId(...) #959

Closed

5 tasks

This was referenced Aug 20, 2020

Add SSRProvider to ensure consistent ids between server and client #992

Merged

Fix remaining SSR tests #994

Merged

dannify closed this as completed in #994 Aug 21, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use React Spectrum with Next.js #760

How to use React Spectrum with Next.js #760

vestimir commented Jul 15, 2020

devongovett commented Jul 15, 2020

ross-pfahler commented Jul 15, 2020

mrmntte commented Jul 16, 2020

RafalFilipek commented Jul 16, 2020

devongovett commented Jul 24, 2020

krijoh92 commented Aug 4, 2020

devongovett commented Aug 22, 2020

jcarrera commented Aug 22, 2020

SheaBelsky commented Aug 27, 2020

devongovett commented Aug 27, 2020

SheaBelsky commented Aug 27, 2020

devongovett commented Sep 2, 2020

snax4a commented Sep 14, 2022

giovanniincammicia commented Oct 5, 2022

reidbarber commented Oct 5, 2022

tknoq commented Oct 14, 2022

snax4a commented Oct 17, 2022 •

edited

Loading

snax4a commented Oct 17, 2022

snowystinger commented Oct 17, 2022

snax4a commented Oct 17, 2022 •

edited

Loading

matijagrcic commented Jan 10, 2023

snowystinger commented Jan 10, 2023

ktsnkmrcom commented Jul 15, 2023

How to use React Spectrum with Next.js #760

How to use React Spectrum with Next.js #760

Comments

vestimir commented Jul 15, 2020

❔ Question

🔦 Context

💻 Code Sample

devongovett commented Jul 15, 2020

ross-pfahler commented Jul 15, 2020

mrmntte commented Jul 16, 2020

RafalFilipek commented Jul 16, 2020

devongovett commented Jul 24, 2020

krijoh92 commented Aug 4, 2020

devongovett commented Aug 22, 2020

jcarrera commented Aug 22, 2020

SheaBelsky commented Aug 27, 2020

devongovett commented Aug 27, 2020

SheaBelsky commented Aug 27, 2020

devongovett commented Sep 2, 2020

snax4a commented Sep 14, 2022

giovanniincammicia commented Oct 5, 2022

reidbarber commented Oct 5, 2022

tknoq commented Oct 14, 2022

snax4a commented Oct 17, 2022 • edited Loading

snax4a commented Oct 17, 2022

snowystinger commented Oct 17, 2022

snax4a commented Oct 17, 2022 • edited Loading

matijagrcic commented Jan 10, 2023

snowystinger commented Jan 10, 2023

ktsnkmrcom commented Jul 15, 2023

snax4a commented Oct 17, 2022 •

edited

Loading

snax4a commented Oct 17, 2022 •

edited

Loading