CODEWITHSUNDEEP
reactjswebpackstyled-componentsserver-side-renderinglerna
Maxim Safaraliev
Maxim Safaraliev

Reputation: 31

SSR with Lerna + React + Styled components

I trying to build project using Lerna and its hoist feature. Everything worked great, before i decided to move ui components from site to packages, for reuse purposes.

I have file structure like this

root
├── node_modules
└── packages
    ├── admin
    ├── site
    └── ui

where ui is react + styled-components components library, and it used as dependency in site

// site packages.json
...,
"dependencies": {
  ...,
  "@root/ui": "^1.0.0"
}

ui have only one file index.tsx

import React, { FC } from "react";
import styled from "styled-components";

const SharedComponent: FC = () => {
  return (
    <Wrapper>Hello from SharedComponent</Wrapper>
  );
};

const Wrapper= styled.div`
  color: red;
`;

export default SharedComponent;

then i use tsc to compile tsx

trying to use it inside site

import React, { FC  } from 'react';
import SharedComponentfrom '@root/ui/dist';

const App: FC = () => {
    return (
            <>
                <SharedComponent />
                <div>Hello from Site App</div>
            </>
    );
};

export default App;

So if i start devServer everything is OK.

enter image description here

But when i try to SSR, i got server side error

UnhandledPromiseRejectionWarning: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

i tried to declare alias property in wepback settings as mentioned here https://github.com/facebook/react/issues/14257#issuecomment-508808246

// site webpack.config.js
module.exports = {
  ...,
  resolve: {
    ...,
    alias: {
      react: path.resolve('../../node_modules/react') // path to root node_modules
    }
  },
}

but error is still in present

Also, if i remove styled-components from ui it works fine. It's seems like the problem is somewhere in styled-components

So, how can i pair lerna + styled-components + react + SSR ?

Upvotes: 0

Views: 469

Answers (2)

carlos.guo
carlos.guo

Reputation: 1

  1. Try to use dangerouseInnerHtml to solve css probleum. otherwise if you use emtion.css then you can try @emotion/server

  2. try to use next/dynamic or React.lazy to load dynamic

  3. I still confused duplicate React. how to resolve this.

Upvotes: 0

Maxim Safaraliev
Maxim Safaraliev

Reputation: 31

I managed to get it work. All i need to do is set externals field in webpack config. like this:

externals: [
        nodeExternals(),
        nodeExternals({ additionalModuleDirs: [path.resolve(__dirname, '../../node_modules')] }),
        'express'
]

Upvotes: 1

Related Questions