search

martpie / next-transpile-modules

Next.js plugin to transpile code from node_modules. Please see: https://github.com/martpie/next-transpile-modules/issues/291
MIT License
1.13k stars 85 forks source link

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

Closed DaveStein closed 3 years ago

DaveStein commented 3 years ago

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

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

martpie commented 3 years ago

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

DaveStein commented 3 years ago 
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 commented 3 years ago

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

DaveStein commented 3 years ago

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 commented 3 years ago

I think we already discussed this issue in https://github.com/martpie/next-transpile-modules/issues/146

DaveStein commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

@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

image

fabianishere commented 3 years ago

@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 commented 3 years ago

@fabianishere Okay so I took the list from https://github.com/devongovett/rsp-next/issues/2#issuecomment-773754816. 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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

DaveStein commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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