TypeError: Cannot set property 'styles' of undefined #222

DaveStein · 2021-06-28T16:03:13Z

I HAVE READ THE FAQ AND MY PROBLEM WAS NOT DESCRIBED THERE
I WILL GIVE 10$ TO CHARITY IF MY SOLUTION WAS ACTUALLY IN THE README/FAQ

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 that TypeError: Cannot set property 'styles' of undefined.

To Reproduce
I have config like this:

const withPlugins = require("next-compose-plugins");
const withCSS = require("@zeit/next-css");
const withTM = require("next-transpile-modules")(["@adobe/react-spectrum"]);

module.exports = withPlugins([withCSS, withTM], {
  reactStrictMode: true,
});

I run npm run dev and the ONLY page I have is this:

import mystyles from "../../styles/index.module.scss";
export default function Index() {

My _app.js has these imports:

import { SSRProvider, Provider, defaultTheme } from "@adobe/react-spectrum";
import "../../styles/globals.scss";
import type { AppProps } from "next/app";

Expected behavior
For things to compile

Setup

Next.js version: 11.0.1
next-transpile-modules version: 8.0.0
Node.js version: 14.17.0
npm/yarn version: npm 6.14.13
Operating System: OSX Catalina
Webpack 4 or 5: 5

TypeError: Cannot set property 'styles' of undefined
    at module.exports (/path/to/repo/node_modules/@zeit/next-css/css-loader-config.js:25:56)
    at Object.webpack (/path/to/repo/node_modules/@zeit/next-css/index.js:15:36)
    at Object.webpack (/path/to/repo/node_modules/next-transpile-modules/src/next-transpile-modules.js:352:29)
    at getBaseWebpackConfig (/path/to/repo/node_modules/next/dist/build/webpack-config.js:162:454)
    at async Promise.all (index 0)
    at async HotReloader.start (/path/to/repo/node_modules/next/dist/server/hot-reloader.js:16:133)
    at async DevServer.prepare (/path/to/repo/node_modules/next/dist/server/next-dev-server.js:16:453)
    at async /path/to/repo/node_modules/next/dist/cli/next-dev.js:22:1

Additional context

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

martpie · 2021-06-28T16:13:56Z

Can you paste here a debug log? (cf readme)

DaveStein · 2021-06-28T17:02:00Z

next-transpile-modules - trying to resolve the following modules:
  - @adobe/react-spectrum
next-transpile-modules - the following paths will get transpiled:
  - /path/to/repo/node_modules/@adobe/react-spectrum

martpie · 2021-06-28T17:57:05Z

Can you please paste the whole log from npm run dev to the compiled page?

DaveStein · 2021-06-28T18:05:46Z

Sorry @martpie I meant that was above what I had pasted before... debug only added that.

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
next-transpile-modules - trying to resolve the following modules:
  - @adobe/react-spectrum
next-transpile-modules - the following paths will get transpiled:
  - /path/to/repo/node_modules/@adobe/react-spectrum
TypeError: Cannot set property 'styles' of undefined
    at module.exports (/path/to/repo/node_modules/@zeit/next-css/css-loader-config.js:25:56)
    at Object.webpack (/path/to/repo/node_modules/@zeit/next-css/index.js:15:36)
    at Object.webpack (/path/to/repo/node_modules/next-transpile-modules/src/next-transpile-modules.js:352:29)
    at getBaseWebpackConfig (/path/to/repo/node_modules/next/dist/build/webpack-config.js:162:454)
    at async Promise.all (index 0)
    at async HotReloader.start (/path/to/repo/node_modules/next/dist/server/hot-reloader.js:16:133)
    at async DevServer.prepare (/path/to/repo/node_modules/next/dist/server/next-dev-server.js:16:453)
    at async /path/to/repo/node_modules/next/dist/cli/next-dev.js:22:1

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

nhducit · 2021-07-03T03:45:55Z

I think we already discussed this issue in
#146

DaveStein · 2021-07-12T13:53:09Z

@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?

fabianishere · 2021-07-12T13:58:17Z

@DaveStein Global CSS support does not rely on @zeit/next-css to work. Could you try to remove the @zeit/next-css plugin from your configuration and see what happens? It might be that @zeit/next-css causes some issues.

DaveStein · 2021-07-12T14:47:31Z

@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:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - automatically enabled Fast Refresh for 1 custom loader
(node:663) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
error - ./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/@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://nextjs.org/docs/messages/css-npm
Location: node_modules/@react-spectrum/actiongroup/dist/module.js
/usr/src/node-app/node_modules/@react-spectrum/provider/dist/main.css:1

fabianishere · 2021-07-12T15:05:12Z

@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, @react-spectrum/actiongroup.

DaveStein · 2021-07-12T15:20:28Z

@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 actiongroup, tabs, and a few others that were not in the list I linked. When I got through all of those I got to...

/path/to/site/node_modules/@react-spectrum/provider/dist/main.css:1
._spectrum_eb688{background-color:var(--spectrum-global-color-gray-100);-webkit-tap-highlight-color:rgba(0,0,0,0)}._spectrum_c6e6e{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_c6e6e:lang(ar){font-family:adobe-arabic,myriad-arabic,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}._spectrum_c6e6e:lang(he){font-family:adobe-hebrew,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}._spectrum_c6e6e:lang(zh),._spectrum_c6e6e:lang(zh-Hans){font-family:adobe-clean-han-simplified-c,SimSun,Heiti SC Light,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}._spectrum_c6e6e:lang(ko){font-family:adobe-clean-han-korean,Malgun Gothic,Apple Gothic,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}._spectrum_c6e6e:l

SyntaxError: Unexpected token .
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/path/to/site/node_modules/@react-spectrum/provider/dist/main.js:40:1)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)

The entire file is this:

._spectrum_eb688{background-color:var(--spectrum-global-color-gray-100);-webkit-tap-highlight-color:rgba(0,0,0,0)}._spectrum_c6e6e{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_c6e6e:lang(ar){font-family:adobe-arabic,myriad-arabic,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}._spectrum_c6e6e:lang(he){font-family:adobe-hebrew,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}._spectrum_c6e6e:lang(zh),._spectrum_c6e6e:lang(zh-Hans){font-family:adobe-clean-han-simplified-c,SimSun,Heiti SC Light,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}._spectrum_c6e6e:lang(ko){font-family:adobe-clean-han-korean,Malgun Gothic,Apple Gothic,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}._spectrum_c6e6e: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_c6e6e,._spectrum_c6e6e,._spectrum_c6e6e._spectrum-Body_c6e6e{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_c6e6e{font-style:var(--spectrum-global-font-style-italic,italic)}

DaveStein · 2021-07-16T19:52:39Z

@fabianishere @martpie any idea what to do here? if we can't solve for that i'll need to move away from NextJS unfortunately.

fabianishere · 2021-07-16T23:12:00Z

@DaveStein So it is a bit of a pain in the ass to debug, but you'll have to identify every transitive dependency of @adobe/react-spectrum that uses itself any of the Spectrum libraries and make sure that they are transpiled as well.

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 @react-spectrum, so it needs to be transpiled as well.

martpie · 2021-07-17T10:35:02Z

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.

DaveStein · 2021-07-19T15:02:17Z

@fabianishere I already have that basic list of what you supplied based on the error messages. Just like how you noticed actiongroup from

error - ./node_modules/@react-spectrum/actiongroup/dist/main.css
Global CSS cannot be imported from within node_modules.

I fixed all those htne got to the current error. I am gonna try the steps @martpie just sent over.

martpie · 2021-07-19T15:05:58Z

It might be harder for styles indeed as they are compiled at build time, I haven't thought about that 🤨

DaveStein · 2021-07-19T15:07:28Z

@martpie Yeah I don't get that far. The build step showed me combobox had an error similar to before so I added it to config. Once that was resolved I got back to:

> Build error occurred
{ /Users/dstein/Repositories/social-site/node_modules/@react-spectrum/provider/dist/main.css:1
._spectrum_eb688{background-color:var(--spectrum-global-color-gray-100)

from SyntaxError: Unexpected token .

fabianishere · 2021-07-19T15:12:54Z

@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.

DaveStein · 2021-07-19T15:17:52Z

Ohhh @fabianishere cool! I copy pasted your list (didn't realize you had done it this specific way) and it works

DaveStein mentioned this issue Jun 30, 2021

Server Side Rendering doesn't work with latest NextJS adobe/react-spectrum#1156

Closed

DaveStein closed this as completed Jul 19, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: Cannot set property 'styles' of undefined #222

TypeError: Cannot set property 'styles' of undefined #222

DaveStein commented Jun 28, 2021

martpie commented Jun 28, 2021 •

edited

DaveStein commented Jun 28, 2021

martpie commented Jun 28, 2021

DaveStein commented Jun 28, 2021 •

edited

nhducit commented Jul 3, 2021

DaveStein commented Jul 12, 2021

fabianishere commented Jul 12, 2021

DaveStein commented Jul 12, 2021

fabianishere commented Jul 12, 2021

DaveStein commented Jul 12, 2021

DaveStein commented Jul 16, 2021

fabianishere commented Jul 16, 2021

martpie commented Jul 17, 2021

DaveStein commented Jul 19, 2021

martpie commented Jul 19, 2021

DaveStein commented Jul 19, 2021

fabianishere commented Jul 19, 2021

DaveStein commented Jul 19, 2021

TypeError: Cannot set property 'styles' of undefined #222

TypeError: Cannot set property 'styles' of undefined #222

Comments

DaveStein commented Jun 28, 2021

martpie commented Jun 28, 2021 • edited

DaveStein commented Jun 28, 2021

martpie commented Jun 28, 2021

DaveStein commented Jun 28, 2021 • edited

nhducit commented Jul 3, 2021

DaveStein commented Jul 12, 2021

fabianishere commented Jul 12, 2021

DaveStein commented Jul 12, 2021

fabianishere commented Jul 12, 2021

DaveStein commented Jul 12, 2021

DaveStein commented Jul 16, 2021

fabianishere commented Jul 16, 2021

martpie commented Jul 17, 2021

DaveStein commented Jul 19, 2021

martpie commented Jul 19, 2021

DaveStein commented Jul 19, 2021

fabianishere commented Jul 19, 2021

DaveStein commented Jul 19, 2021

martpie commented Jun 28, 2021 •

edited

DaveStein commented Jun 28, 2021 •

edited