Nextjs + Patternfly react table head + using legacy node-sass works, but using dart-sass fails

[willieseabrook]

Difficult to know where to log this as the problem is generated by a combination of projects.

However, I thought I'd take a shot at logging here as I've been able to create a repeatable test cycle where I get:

• Success: I include a sass file using the legacy npm node-sass module
• Failure: I include a sass file using file using this npm sass module

Steps to reproduce

1. See the example working with legacy node-sass

git co git@github.com:willieseabrook/nextjs-with-patternfly.git
cd nextjs-with-patternfly
yarn
yarn run dev

Then open chrome to http://localhost:3000/table and see the patternfly table working

You can see on https://github.com/willieseabrook/nextjs-with-patternfly/blob/master/pages/table/index.js#L41 that an scss file is included: import '../../test-scss.scss'

2. Change from legacy node-sass to sass

2.1 Ctrl + C to stop server

2.2 Open package.json and:

  replace:
    "node-sass": "^4.8.3", (or any other version of the node-sass npm module)

  with:
    "sass": "^1.32.2", (or any other version of the sass npm module)

3. See the import of test-scss.scss break

Clear and reload packages (with new sass module this time) and rerun the local server with the following:

rm yarn.lock && rm -fr node_module && yarn
yarn run dev

Then open chrome to http://localhost:3000/table at it breaks with the following errors:

Error on the terminal

TypeError: Cannot convert object to primitive value
    at escapeHtml (/var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js:794:16)
    at escapeTextForBrowser (/var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js:865:10)
    at quoteAttributeValueForBrowser (/var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js:876:16)
    at createMarkupForProperty (/var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js:916:25)
    at createOpenTagMarkup (/var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js:2915:16)
    at ReactDOMServerRenderer.renderDOM (/var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js:3922:15)
    at ReactDOMServerRenderer.render (/var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js:3484:21)
    at ReactDOMServerRenderer.read (/var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
    at renderToString (/var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)
    at Object.renderPage (/var/data/william/projects/nextjs-with-patternfly/node_modules/next/dist/next-server/server/render.js:54:851)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:135:19)
    at loadGetInitialProps (/var/data/william/projects/nextjs-with-patternfly/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML (/var/data/william/projects/nextjs-with-patternfly/node_modules/next/dist/next-server/server/render.js:54:1142)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async /var/data/william/projects/nextjs-with-patternfly/node_modules/next/dist/next-server/server/next-server.js:107:97

Error in the browser*

Server Error
TypeError: Cannot convert object to primitive value

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
escapeHtml
file:///var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js (794:16)
escapeTextForBrowser
file:///var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js (865:10)
quoteAttributeValueForBrowser
file:///var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js (876:16)
createMarkupForProperty
file:///var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js (916:25)
createOpenTagMarkup
file:///var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js (2915:16)
ReactDOMServerRenderer.renderDOM
file:///var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js (3922:15)
ReactDOMServerRenderer.render
file:///var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js (3484:21)
ReactDOMServerRenderer.read
file:///var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js (3373:29)
renderToString
file:///var/data/william/projects/nextjs-with-patternfly/node_modules/react-dom/cjs/react-dom-server.node.development.js (3988:27)
Object.renderPage
file:///var/data/william/projects/nextjs-with-patternfly/node_modules/next/dist/next-server/server/render.js (54:851)
../../pages/_document.tsx (86:33) @ Function.getInitialProps

  84 |     }
  85 | 
> 86 |     const { html, head } = await ctx.renderPage({ enhanceApp })
     |                                 ^
  87 |     const styles = [...flush()]
  88 |     return { html, head, styles }
  89 |   }
Call Stack
loadGetInitialProps
file:///var/data/william/projects/nextjs-with-patternfly/node_modules/next/dist/next-server/lib/utils.js (5:101)
renderToHTML
file:///var/data/william/projects/nextjs-with-patternfly/node_modules/next/dist/next-server/server/render.js (54:1142)
runMicrotasks
<anonymous>
processTicksAndRejections
internal/process/task_queues.js (93:5)
async
file:///var/data/william/projects/nextjs-with-patternfly/node_modules/next/dist/next-server/server/next-server.js (107:97)

4. Isolate the issue further

1. Comment out line Read Sass from stdin #137 in https://github.com/willieseabrook/nextjs-with-patternfly/blob/master/pages/table/index.js#L137 thus commenting out <TableHeader />
2. Reload http://localhost:3000/table and it works even with the new sass module

So it appears there's a possibility that this error is specifically something to do with Nextjs + Patternfly <TableHeader /> + this sass module

5. Notes

• Nextjs: https://github.com/vercel/next.js
• Patternfly react table: https://github.com/patternfly/patternfly-react/tree/master/packages/react-table

Note that this project uses unoffical and deprecated modules below.

This is because the Patternfly project directly includes CSS files through all its React components, which is specifically blocked by the nextjs team.

To see an example of Patternfly including CSS, open node_modules/@patternfly/react-styles/css/components/AboutModalBox/about-modal-box.js that does require('./about-modal-box.css');.

However Nextjs + Patternfly is kind of supported - the example repo linked is a slightly changed example of the official Patternfly example at https://github.com/vercel/next.js/tree/canary/examples/with-patternfly to enable SASS and tidy up formatting of nextjs.config.js slightly and use the latest version of next-transpile modules but it just hasn't been updated in a while to account for the deprecated modules with a new technique.

• Official Nextjs Patternfly example: https://github.com/vercel/next.js/tree/canary/examples/with-patternfly
• Nextjs transpile modules: https://github.com/martpie/next-transpile-modules
• https://www.npmjs.com/package/@zeit/next-sass
• https://www.npmjs.com/package/@zeit/next-css

[Awjin]

This is impossible to debug without access to the actual styles that are breaking. Since commenting out <TableHeader /> seems to fix the issue, I'd suggest digging into the styles that target the <TableHeader />, and seeing which Sass code works with Node Sass but breaks with Dart Sass. It's possible that there is invalid Sass that was previously allowed by Node Sass, but is correctly being disallowed by Dart Sass.

[willieseabrook]

I don't have the capability to debug the SASS on the Patternfly TableHeader (nor can I even confirm they are using SASS - it might be a pure CSS project as the offending node_modules folder doesn't have any SASS in it)

So I've filed an issue with Patternfly patternfly/patternfly-react#5320

[Awjin]

Sounds good. I’ll close this issue out since they are much better equipped to investigate.