-
-
Notifications
You must be signed in to change notification settings - Fork 85
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TypeError: Cannot set property 'styles' of undefined #222
Comments
Can you paste here a debug log? (cf readme) |
|
Can you please paste the whole log from |
Sorry @martpie I meant that was above what I had pasted before... debug only added that.
then the usual ELIFECYCLE this was not a problem with npm messaging and then the server didn't start so nothign to show from a compiled page |
I think we already discussed this issue in |
@nhducit @martpie the last comment was "Support for global CSS was added by @fabianishere in 7.2.0". Whether that meant here or NextJS, both are beyond a 7 release. So this was possibly resolved and then broke again in latest Next? |
@DaveStein Global CSS support does not rely on |
@fabianishere gave it a shot Config: const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['@adobe/react-spectrum']);
module.exports = withPlugins([withTM], {
reactStrictMode: true,
}); Console:
|
@DaveStein You’ll need to add every dependency of Adobe Spectrum that uses Global CSS to the list of modules to transpile. In this case, |
@fabianishere Okay so I took the list from devongovett/rsp-next#2 (comment). I then restarted the server each time as I saw more errors. So I had added
The entire file is this:
|
@fabianishere @martpie any idea what to do here? if we can't solve for that i'll need to move away from NextJS unfortunately. |
@DaveStein So it is a bit of a pain in the ass to debug, but you'll have to identify every transitive dependency of To get the basic sample of Spectrum working with Next.js, you'll need at least the following configuration: https://codesandbox.io/s/nextjs-adobe-spectrum-yk9xe?file=/next.config.js If you stumble upon this error again, there is probably some dependency in your project that uses a package from |
In the readme there is a section called "How do I find out which package is causing a runtime exception?" I think it may help. But yes, this is a pain. |
@fabianishere I already have that basic list of what you supplied based on the error messages. Just like how you noticed
I fixed all those htne got to the current error. I am gonna try the steps @martpie just sent over. |
It might be harder for styles indeed as they are compiled at build time, I haven't thought about that 🤨 |
@martpie Yeah I don't get that far. The build step showed me
from |
@DaveStein What I did to identify the additional modules was to enter the debugger: NODE_OPTIONS='--inspect' node_modules/next/dist/bin/next dev Enable "Pause on caught exception" and waiting for the import error to occur. From there you can see from the stacktrace which package is importing the non-transpiled Spectrum package. |
Ohhh @fabianishere cool! I copy pasted your list (didn't realize you had done it this specific way) and it works |
Are you trying to transpile a local package or an npm package?
https://www.npmjs.com/package/@adobe/react-spectrum
Describe the bug
Not sure what styles are undefined. I actually updated my single page to say
import mystyles
but I am still getting a message thatTypeError: Cannot set property 'styles' of undefined
.To Reproduce
I have config like this:
I run
npm run dev
and the ONLY page I have is this:My
_app.js
has these imports:Expected behavior
For things to compile
Setup
next-transpile-modules
version: 8.0.0npm
/yarn
version: npm 6.14.13Additional context
The text was updated successfully, but these errors were encountered: