html5-device-mockups not found in nextjs

[zaaakher]

It seems this line is causing an error in Nextjs when I try to import the library

https://github.com/kajchang/react-device-mockups/blob/7b976cb1a3c8ff3a550f8fafffd52f54cb818811/src/Device.tsx#L51-L53

My package.json

{
  "private": true,
  "scripts": {
    "dev": "next dev -p 3002",
    "build": "next build",
    "beta-deploy": "next build && next export",
    "start": "next start -p 3002"
  },
  "dependencies": {
    "@apollo/react-hooks": "^4.0.0",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "apollo-boost": "^0.4.9",
    "apollo-upload-client": "^16.0.0",
    "axios": "^0.21.1",
    "framer-motion": "^3.3.0",
    "graphql": "^15.5.1",
    "moment": "^2.29.1",
    "next": "^10.2.3",
    "next-compose-plugins": "^2.2.1",
    "next-optimized-images": "^2.6.2",
    "next-seo": "^4.28.1",
    "next-translate": "^1.0.6",
    "react": "17.0.1",
    "html5-device-mockups": "^3.2.1",
    "react-device-mockups": "^0.1.10",
    "react-dom": "17.0.1",
    "rollbar": "^2.21.1",
    "webp-loader": "^0.6.0"
  }
}

And at first I used it regularly in /pages/index.js of my project

import "html5-device-mockups/dist/device-mockups.min.css";
import { IPhoneX } from "react-device-mockups";

export default function Home() {
  return (
    <div>
           <IPhoneX height={500} orientation='landscape' color='black' buttonProps={ {
                onClick: () => alert('Home Button Clicked!')
            } }>
                <iframe title='showcase' src='https://example.com' style={ {
                    width: '100%',
                    height: '100%',
                    margin: 0
                } }/>
            </IPhoneX>
     </div>
  );
}

And then based on this answer, I tried using this approach by importing the css in pages/_apps.js

import "html5-device-mockups/dist/device-mockups.min.css";

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <ThemeProvider theme={theme}>
        <Component {...pageProps} />
      </ThemeProvider>
    </ApolloProvider>
  );
}

[kaijchang]

@zaaakher Thanks for pointing out this issue! I think the main issue is that the library breaks when NextJS attempt to do server-side rendering because the library depends on being able to read values from the stylesheet to size the component. I'll look into the issue this weekend!

[kaijchang]

@zaaakher Try upgrading to v0.1.11, you shouldn't the get error anymore but you also won't be able to directly set the height of your devices. To control the height of the device, see pixelsign/html5-device-mockups#47.