Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[examples] Add example to alias styled-components with Next.js

See original GitHub issue

The issue is present in the latest release. (next v5)
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Setting the webpack alias to target styled-components does not work for nextjs.

Error: Cannot find module '@emotion/styled'

Full stack

Error: Cannot find module '@emotion/styled'
Require stack:
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/@material-ui/styled-engine/node/index.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/@material-ui/system/index.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/@material-ui/core/node/styles/adaptV4Theme.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/@material-ui/core/node/styles/index.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/.next/server/pages/_document.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/next-server/server/require.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/next-server/server/load-components.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/next-server/server/api-utils.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/next-server/server/next-server.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/server/next.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/server/lib/start-server.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/cli/next-dev.js
- /Users/hugh/Development/node/material-ui/examples/nextjs-with-styled-components-typescript/node_modules/next/dist/bin/next

Expected Behavior 🤔

Webpack alias should replace @material-ui/styled-engine with styled-components version.

// next.config.js
module.exports = {
  webpack: config => {
    config.resolve.alias['@material-ui/styled-engine'] = '@material-ui/styled-engine-sc'
    return config
  },
}

Steps to Reproduce 🕹

Steps:

Add webpack alias for styled-components using above config. ☝🏻
Add tsconfig paths for styled-components:

{
  "compilerOptions": {
    "paths": {
      "@material-ui/styled-engine": ["./node_modules/@material-ui/styled-engine-sc"]
    }
}

Create theme.ts:

import { createTheme } from '@material-ui/core/styles'

export default createTheme()

Update _document.tsx:

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
import theme from 'styles/theme';

// https://material-ui.com/styles/advanced/#next-js
export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          {/* PWA primary color */}
          <meta content={theme.palette.primary.main} name="theme-color" />
          <link
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  // Step 1: Create an instance of ServerStyleSheet
  const sheet = new ServerStyleSheet();

  // Step 2: Retrieve styles from components in the page
  const view = ctx.renderPage((App) => (props) => sheet.collectStyles(<App {...props} />));

  // Step 3: Extract the styles as <style> tags
  const styleTags = sheet.getStyleElement();

  // Step 4: Pass styleTags as a prop
  return { ...view, styleTags };
};

Update _app.tsx:

import CssBaseline from '@material-ui/core/CssBaseline';
import { StyledEngineProvider, ThemeProvider } from '@material-ui/core/styles';
import type { AppProps } from 'next/app';
import Head from 'next/head';
import theme from 'styles/theme';

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>Next App</title>
        <link href="/favicon.ico" rel="icon" />
        <meta content="minimum-scale=1, initial-scale=1, width=device-width" name="viewport" />
      </Head>
      <StyledEngineProvider injectFirst={true}>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <Component {...pageProps} />
        </ThemeProvider>
      </StyledEngineProvider>
    </>
  );
}

Context 🔦

Trying to upgrade NextJS app from MUI v4 to v5 using styled-components instead of emotion.

I’d like to add an example for this solution once I get it working. Something like material-ui/examples/nextjs-with-styled-components-typescript

Your Environment 🌎

`npx @material-ui/envinfo`

Browser:
    Brave: Version 1.25.70 Chromium: 91.0.4472.77 (Official Build) (x86_64)
System:
    OS: macOS 11.4
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Edge: 90.0.818.56
    Firefox: 87.0
    Safari: 14.1.1
  npmPackages:
    @material-ui/core: next => 5.0.0-beta.0 
    @material-ui/private-theming:  5.0.0-beta.0 
    @material-ui/styled-engine:  5.0.0-beta.0 
    @material-ui/styled-engine-sc: next => 5.0.0-beta.0 
    @material-ui/system:  5.0.0-beta.0 
    @material-ui/types:  6.0.1 
    @material-ui/unstyled:  5.0.0-alpha.39 
    @material-ui/utils:  5.0.0-beta.0 
    @types/react: latest => 17.0.13 
    react: latest => 17.0.2 
    react-dom: latest => 17.0.2 
    styled-components: latest => 5.3.0 
    typescript: latest => 4.3.5

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:8 (3 by maintainers)

Top GitHub Comments

1reaction

LucasBassetticommented, Oct 13, 2021

I’m still having this issue, even trying the #27088 .

Do someone has a different solution?

0reactions

thomasmerycommented, Nov 10, 2021

Hi there,

chiming in because I’m facing the same problem and can’t seem to solve it

I cannot run the examples/nextjs-with-styled-components-typescript

without installing @emotion/react & @emotion/styled

MODULE_NOT_FOUND errors are thrown server side

I thought just running the example should work

any insight on this?

thanks

Top Results From Across the Web

[examples] Add example to alias styled-components with Next.js

The issue is present in the latest release. (next v5) I have searched the issues of this repository and believe that this is...

Advanced Features: Next.js Compiler

Added support for Styled Components, Jest, Relay, Remove React Properties, Legacy Decorators, Remove Console, and jsxImportSource. v12.0.0, Next.js Compiler ...

FAQs - styled-components

Integrating an existing CSS framework with styled-components is really easy! You can use its existing class names alongside your components. For example, ...

Next.js 11 setup with Material UI Version 5 | Part 2 - YouTube

Next. js 11 setup with Material UI Version 5 | Part 2 - Styled - Components. 7.9K views · 1 year ago ...more ......

Next.js + Styled Components The Really Simple Guide +

1. Create a project directory and install next and react dependencies · 2. Add scripts to your package.json · 3. Create a /pages...