Stateless component styles break on build!

[micahbrich]

Hey — first of all, this library is both amazing and exactly what I needed for a fun project I started messing with yesterday. 🙌

Initially, I was using styled-components, too, and I saw an unexpected error when building & exporting (with next.js!), that said I was using 2 versions of styled-components. I'd never seen that, and after a little googling I figured I'd just quickly switch over to emotion and save myself the headache.

But then! I saw this funky lil set of errors, only when building & exporting to static:

It looks like you've wrapped styled() around your React component (span), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.

It looks like you've wrapped styled() around your React component (input), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.

After more googling, I realize in some instances, this is a silly warning that doesn't matter — and I think this might be one of those cases, thanks to your internalized ThemeProvider.

But for some reason, despite all that, my theme isn't actually working, only when building & exporting. What once was white text on a black background, with an invisible input, turns into this (highlighted with my cursor to demonstrate what's up:)

Running locally with next dev:

After export using serve:

To clarify, this is what I'm working with, wrapped the ReactTerminalStateless in a handy little component to encapsulate the configuration:

import ReactTerminal from 'react-terminal-component'
import { ReactTerminalStateless } from 'react-terminal-component';

const Term = ({ state, inputStr, setInputStr, dispatch, ...props }) => {

  return (
    <ReactTerminalStateless
      clickToFocus={true}
      autoFocus={true}
      theme={{
        background: '#141313 !important',
        promptSymbolColor: '#6effe6 !important',
        commandColor: '#fcfcfc !important',
        outputColor: '#fcfcfc !important',
        errorOutputColor: '#ff89bd !important',
        fontSize: '1.1rem',
        fontFamily: 'source-code-pro, monospace',
        fontWeight: '400',
        spacing: '1%',
        width: '100%',
        height: '100%'
      }}
      emulatorState={state}
      inputStr={inputStr}
      onInputChange={setInputStr}
      onStateChange={newState => dispatch({ type: inputStr }) }
      {...props}
    />
  )
}


export default Term

Any ideas on what's going on with this crazy business? 🤔 Have you seen this happen at all before?

[micahbrich]

For what it's worth, I just discovered this interesting answer, and wonder if it's the same deal.

I'm gonna follow this advice and not export as static for now, but still interested to know if anyone has any ideas if this is an issue with how I'm implementing!

[micahbrich]

Wild development. I realize I'm talking with myself, but maybe it'll be useful if anyone else ever encounters shnaz like this.

TURNS OUT. It was the !important flags in the theme css that were making things bonkers. I've used themes plenty in the past with styled-components, I'm not sure I can explain that.

 theme={{
        background: '#141313 !important',
        promptSymbolColor: '#6effe6 !important',
        commandColor: '#fcfcfc !important',
        outputColor: '#fcfcfc !important',
        errorOutputColor: '#ff89bd !important',
        fontSize: '1.1rem',
        fontFamily: 'source-code-pro, monospace',
        fontWeight: '400',
        spacing: '1%',
        width: '100%',
        height: '100%'
      }}

Apparently, don't do this! Strangely, without the !important flag, my terminal text color goes black on black, I'm not sure why. But that's at least easy to do differently.

That being said, I am noticing that the theme variables aren't working without the !important, so maybe this is still a thing.

[rohanchandra]

Hey

Thanks for documenting all this!

I actually haven't come across this issue before, seems like a very strange bug given it's only coming up when you export with serve! Have you come across a fix, otherwise is there a repo with a minimal reproducible demo I can look at?