Next 10 Support #2
Comments
|
I have also tried manually adding all the packages instead of using wildcard: const withPlugins = require("next-compose-plugins");
const withTM = require("next-transpile-modules")([
"@adobe/react-spectrum",
"@react-spectrum/actiongroup",
"@react-spectrum/breadcrumbs",
"@react-spectrum/button",
"@react-spectrum/buttongroup",
"@react-spectrum/checkbox",
"@react-spectrum/dialog",
"@react-spectrum/divider",
"@react-spectrum/form",
"@react-spectrum/icon",
"@react-spectrum/illustratedmessage",
"@react-spectrum/image",
"@react-spectrum/layout",
"@react-spectrum/link",
"@react-spectrum/listbox",
"@react-spectrum/menu",
"@react-spectrum/meter",
"@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/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",
]);
module.exports = withPlugins([withTM], {
images: {
domains: ["github.com"],
},
});but get the same error: λ yarn dev
yarn run v1.22.10
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Using external babel configuration from /Users/postman/Projects/platform/web/.babelrc
error - ./node_modules/@react-spectrum/actiongroup/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-spectrum/actiongroup/dist/module.js
event - build page: /next/dist/pages/_error
wait - compiling...
error - ./node_modules/@react-spectrum/actiongroup/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-spectrum/actiongroup/dist/module.js
/Users/postman/Projects/platform/web/node_modules/@react-spectrum/provider/dist/main.css:1
._spectrum_d43d2{background-color:var(--spectrum-global-color-gray-100);-webkit-tap-highlight-color:rgba(0,0,0,0)}._spectrum_60105{font-family:adobe-clean-ux,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:var(--spectrum-global-dimension-font-size-100);color:var(--spectrum-global-color-gray-800)}._spectrum_60105:lang(ar){font-family:adobe-arabic,myriad-arabic,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}._spectrum_60105:lang(he){font-family:adobe-hebrew,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}._spectrum_60105:lang(zh),._spectrum_60105:lang(zh-Hans){font-family:adobe-clean-han-simplified-c,SimSun,Heiti SC Light,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}._spectrum_60105:lang(ko){font-family:adobe-clean-han-korean,Malgun Gothic,Apple Gothic,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}._spectrum_60105:lang(ja){font-family:adobe-clean-han-japanese,Yu Gothic,"\30E1 \30A4 \30EA \30AA","\30D2 \30E9 \30AE \30CE \89D2 \30B4 Pro W3",Hiragino Kaku Gothic Pro W3,Osaka,"\FF2D \FF33 \FF30 \30B4 \30B7 \30C3 \30AF",MS PGothic,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}._spectrum-Body_60105,._spectrum_60105,._spectrum_60105._spectrum-Body_60105{font-size:var(--spectrum-alias-font-size-default,var(--spectrum-global-dimension-font-size-100));font-weight:var(--spectrum-alias-body-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:var(--spectrum-alias-body-text-line-height,var(--spectrum-global-font-line-height-medium));font-style:var(--spectrum-global-font-style-regular,normal)}._spectrum-Body--italic_60105{font-style:var(--spectrum-global-font-style-italic,italic)}
^
SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:1001:16)
at Module._compile (internal/modules/cjs/loader.js:1049:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:791:14)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (/Users/postman/Projects/platform/web/node_modules/@react-spectrum/provider/dist/main.js:38:1)
at Module._compile (internal/modules/cjs/loader.js:1085:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:791:14)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (/Users/postman/Projects/platform/web/node_modules/@react-spectrum/icon/dist/main.js:3:5)
at Module._compile (internal/modules/cjs/loader.js:1085:30)
error - ./node_modules/@react-spectrum/actiongroup/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-spectrum/actiongroup/dist/module.js |
|
Id also love to see this implemented |
|
what's the workaround for this? |
|
@b-bot couldn't find one, ended up switching to chakra |
|
I'm not sure there's much we can do other than wait for the Next.JS team to actually support CSS rather than only CSS in JS. You do have access to the webpack config so it should be possible to hack it as this repo does. Regardless, this is not the right place for issues about React Spectrum as this is just a demo repo. Please feel free to continue the conversation on the RSP issue tracker. Or better yet, comment on the Next.JS repo to ask them to support CSS. |
|
@devongovett thanks for the response. I know the issue at one stage was that CSS couldn't be imported from |
|
That's not the same thing. The problem is that JS files within node_modules cannot import their own CSS. We'd have to remove the CSS imports from the JS files we publish and instead force users to manually import the CSS along with the JS in every place they use a React Spectrum component. This would be very easy to mess up as you need to remember to do two imports for every import. Given that Next.js is the only tool with this limitation, it doesn't make sense for us to change our published JS to work around it. Next.js needs to enable support for this, or there needs to be a way to override the default webpack config that is explicitly disabling it for node_modules. |
same issue, any help please. |
2 tasks
|
Upgraded to Next 11 in #7. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey 👋,
I tried following the instructions from the documentation however I couldn't get this working and keep running into the following after running
yarn run dev:The
next.config.js:The text was updated successfully, but these errors were encountered: