如何配置 transpilePackages 与 glob 让 Next.js 正确加载 React Spectrum 的 CSS【免费下载链接】react-spectrumA collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.项目地址: https://gitcode.com/GitHub_Trending/re/react-spectrum在 Next.js 项目中使用 React Spectrumadobe/react-spectrum时组件能渲染出来但样式CSS可能没有被 Next.js 正确加载页面呈现无主题状态。SSR 文档中的 “Next.js” 一节给出了明确做法安装glob包然后在next.config.js里通过transpilePackages配合glob.sync枚举出需要转译的 Spectrum 包。仓库中的两个 Next.js 示例应用examples/next-app/next.config.js、examples/rsp-next-ts/next.config.mjs都采用了这一配置可以直接对照。准备条件一个已安装adobe/react-spectrum的 Next.js 项目。仓库示例应用中的依赖声明可参考 examples/rsp-next-ts/package.jsonadobe/react-spectrum: latest、next: 16.2.9、glob: ^11.0.3。项目能正常执行next dev/next build。注意仓库示例的package.json中脚本统一带了--webpack标志例如dev: next dev --webpack、build: next build --webpack见 examples/next-app/package.json本文示例沿用该运行方式。文档中的transpilePackages方案适用于新版 Next.js如果你使用的是Next.js 13.0.x 及更早版本见后文的替代路径。执行步骤1. 安装 glob按文档说明用 npm 或 yarn 安装glob包npm install glob或yarn add glob仓库示例中固定的版本是^11.0.3。2. 在 next.config.js 中配置 transpilePackages文档给出的核心配置是把三个 Spectrum 包名规格adobe/react-spectrum、react-spectrum/*、spectrum-icons/*作为 glob 模式在node_modules/目录下展开成具体的包名列表再赋给transpilePackages。这样 Next.js 会转译这些包确保 React Spectrum 的 CSS 被正确加载。CJS 配置next.config.js与 SSR 文档 及 examples/next-app/next.config.js 一致const glob require(glob); module.exports { transpilePackages: [ adobe/react-spectrum, react-spectrum/*, spectrum-icons/*, ].flatMap((spec) glob.sync(${spec}, { cwd: node_modules/ })), };如果你的配置文件是 ESM 的next.config.mjs示例 examples/rsp-next-ts/next.config.mjs 展示了等价的 import 写法import {glob} from glob; export default { transpilePackages: [adobe/react-spectrum, react-spectrum/*, spectrum-icons/*].flatMap( spec glob.sync(${spec}, {cwd: node_modules/}) ) };配置项中只有一个可变输入三个 glob 规格固定为adobe/react-spectrum、react-spectrum/*、spectrum-icons/*无需修改glob.sync会在你本地node_modules/中实际枚举出已安装的包名因此这份配置可以原样复制。如果你还配置了文档中提到的react-aria/optimize-locales-plugin用于 SSR 下优化语言包体积webpack(config, {isServer})部分与transpilePackages是互不影响的独立配置项可以共存参考 examples/next-app/next.config.js 的完整写法。3. 确认应用侧正常引用示例应用 examples/next-app/app/page.tsx 展示了组件侧的典型用法在页面中用Provider包裹组件并提供defaultThemeimport {Provider, defaultTheme, DatePicker} from adobe/react-spectrum; export default function Home() { return ( Provider theme{defaultTheme} localeen DatePicker labelDate / /Provider ); }组件代码本身不需要为 CSS 加载做任何额外处理样式是否生效取决于上面的next.config.js配置。结果验证启动开发服务器。沿用仓库示例的脚本next dev --webpack或执行package.json中已有的dev脚本dev: next dev --webpack。打开浏览器访问http://localhost:3000示例应用 README 给出的验证地址查看渲染了Provider Spectrum 组件的页面。按 SSR 文档 的说法上述配置的作用就是“确保 React Spectrum 的 CSS 被 Next.js 正确加载”因此带 Spectrum 主题的组件如示例中的DatePicker正常带样式渲染即为符合预期。如需在无浏览器环境下做冒烟检查仓库示例 examples/rsp-next-ts 提供了一个 Jest 测试test/index.test.js用testing-library/react把页面组件包在Provider里执行render断言组件可渲染。注意该测试验证的是组件能正常渲染不覆盖 CSS 加载本身样式是否生效仍以上面的浏览器检查为准。Next.js 13.0.x 及更早版本的替代路径SSR 文档 明确说明Next.js 13.0.x 及以下版本没有transpilePackages方案可直接用需要额外安装next-transpile-modules插件yarn add next-transpile-modules然后把同样的 glob 枚举结果传给withTM并包裹原有 Next.js 配置const glob require(glob); const withTM require(next-transpile-modules)([ adobe/react-spectrum, react-spectrum/*, spectrum-icons/*, ].flatMap((spec) glob.sync(${spec}, { cwd: node_modules/ }))); module.exports withTM({ // Your Next.js configuration });即同一份 glob 包名列表新版 Next.js 直接写入transpilePackages13.0.x 及以下则经next-transpile-modules包一层两者不要同时使用。边界与后续这份配置只解决 Next.js 下 Spectrum CSS 的加载问题SSR 场景还有独立事项如Provider上显式设置locale、用LocalizedStringProvider优化语言包体积同样在 packages/dev/docs/pages/react-spectrum/ssr.mdx 中有说明属于另一项任务可按需查阅。示例工程基于next: 16.2.9、glob: ^11.0.3、React 19见 examples/rsp-next-ts/package.json如果你的项目 Next.js 版本不同以上文档中的主路径与 13.0.x 替代路径覆盖了新旧两类情况文档未给出其他版本的额外差异。【免费下载链接】react-spectrumA collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.项目地址: https://gitcode.com/GitHub_Trending/re/react-spectrum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何配置 transpilePackages 与 glob 让 Next.js 正确加载 React Spectrum 的 CSS
如何配置 transpilePackages 与 glob 让 Next.js 正确加载 React Spectrum 的 CSS【免费下载链接】react-spectrumA collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.项目地址: https://gitcode.com/GitHub_Trending/re/react-spectrum在 Next.js 项目中使用 React Spectrumadobe/react-spectrum时组件能渲染出来但样式CSS可能没有被 Next.js 正确加载页面呈现无主题状态。SSR 文档中的 “Next.js” 一节给出了明确做法安装glob包然后在next.config.js里通过transpilePackages配合glob.sync枚举出需要转译的 Spectrum 包。仓库中的两个 Next.js 示例应用examples/next-app/next.config.js、examples/rsp-next-ts/next.config.mjs都采用了这一配置可以直接对照。准备条件一个已安装adobe/react-spectrum的 Next.js 项目。仓库示例应用中的依赖声明可参考 examples/rsp-next-ts/package.jsonadobe/react-spectrum: latest、next: 16.2.9、glob: ^11.0.3。项目能正常执行next dev/next build。注意仓库示例的package.json中脚本统一带了--webpack标志例如dev: next dev --webpack、build: next build --webpack见 examples/next-app/package.json本文示例沿用该运行方式。文档中的transpilePackages方案适用于新版 Next.js如果你使用的是Next.js 13.0.x 及更早版本见后文的替代路径。执行步骤1. 安装 glob按文档说明用 npm 或 yarn 安装glob包npm install glob或yarn add glob仓库示例中固定的版本是^11.0.3。2. 在 next.config.js 中配置 transpilePackages文档给出的核心配置是把三个 Spectrum 包名规格adobe/react-spectrum、react-spectrum/*、spectrum-icons/*作为 glob 模式在node_modules/目录下展开成具体的包名列表再赋给transpilePackages。这样 Next.js 会转译这些包确保 React Spectrum 的 CSS 被正确加载。CJS 配置next.config.js与 SSR 文档 及 examples/next-app/next.config.js 一致const glob require(glob); module.exports { transpilePackages: [ adobe/react-spectrum, react-spectrum/*, spectrum-icons/*, ].flatMap((spec) glob.sync(${spec}, { cwd: node_modules/ })), };如果你的配置文件是 ESM 的next.config.mjs示例 examples/rsp-next-ts/next.config.mjs 展示了等价的 import 写法import {glob} from glob; export default { transpilePackages: [adobe/react-spectrum, react-spectrum/*, spectrum-icons/*].flatMap( spec glob.sync(${spec}, {cwd: node_modules/}) ) };配置项中只有一个可变输入三个 glob 规格固定为adobe/react-spectrum、react-spectrum/*、spectrum-icons/*无需修改glob.sync会在你本地node_modules/中实际枚举出已安装的包名因此这份配置可以原样复制。如果你还配置了文档中提到的react-aria/optimize-locales-plugin用于 SSR 下优化语言包体积webpack(config, {isServer})部分与transpilePackages是互不影响的独立配置项可以共存参考 examples/next-app/next.config.js 的完整写法。3. 确认应用侧正常引用示例应用 examples/next-app/app/page.tsx 展示了组件侧的典型用法在页面中用Provider包裹组件并提供defaultThemeimport {Provider, defaultTheme, DatePicker} from adobe/react-spectrum; export default function Home() { return ( Provider theme{defaultTheme} localeen DatePicker labelDate / /Provider ); }组件代码本身不需要为 CSS 加载做任何额外处理样式是否生效取决于上面的next.config.js配置。结果验证启动开发服务器。沿用仓库示例的脚本next dev --webpack或执行package.json中已有的dev脚本dev: next dev --webpack。打开浏览器访问http://localhost:3000示例应用 README 给出的验证地址查看渲染了Provider Spectrum 组件的页面。按 SSR 文档 的说法上述配置的作用就是“确保 React Spectrum 的 CSS 被 Next.js 正确加载”因此带 Spectrum 主题的组件如示例中的DatePicker正常带样式渲染即为符合预期。如需在无浏览器环境下做冒烟检查仓库示例 examples/rsp-next-ts 提供了一个 Jest 测试test/index.test.js用testing-library/react把页面组件包在Provider里执行render断言组件可渲染。注意该测试验证的是组件能正常渲染不覆盖 CSS 加载本身样式是否生效仍以上面的浏览器检查为准。Next.js 13.0.x 及更早版本的替代路径SSR 文档 明确说明Next.js 13.0.x 及以下版本没有transpilePackages方案可直接用需要额外安装next-transpile-modules插件yarn add next-transpile-modules然后把同样的 glob 枚举结果传给withTM并包裹原有 Next.js 配置const glob require(glob); const withTM require(next-transpile-modules)([ adobe/react-spectrum, react-spectrum/*, spectrum-icons/*, ].flatMap((spec) glob.sync(${spec}, { cwd: node_modules/ }))); module.exports withTM({ // Your Next.js configuration });即同一份 glob 包名列表新版 Next.js 直接写入transpilePackages13.0.x 及以下则经next-transpile-modules包一层两者不要同时使用。边界与后续这份配置只解决 Next.js 下 Spectrum CSS 的加载问题SSR 场景还有独立事项如Provider上显式设置locale、用LocalizedStringProvider优化语言包体积同样在 packages/dev/docs/pages/react-spectrum/ssr.mdx 中有说明属于另一项任务可按需查阅。示例工程基于next: 16.2.9、glob: ^11.0.3、React 19见 examples/rsp-next-ts/package.json如果你的项目 Next.js 版本不同以上文档中的主路径与 13.0.x 替代路径覆盖了新旧两类情况文档未给出其他版本的额外差异。【免费下载链接】react-spectrumA collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.项目地址: https://gitcode.com/GitHub_Trending/re/react-spectrum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考