Issue 1:
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

styled-components should not result in the className mismatch warning from React.

Current Behavior

Warning: Prop `className` did not match. Server: "Header-johx6c-0 bHIeEO" Client: "Header___default-johx6c-0 gGUBlx"

I'm exporting the header component like so:

export default styled(Header)`
text-align: center;
`;

Notice that styled-components uses the name Header on the server and Header__default on the client. This doesn't happen with Next.js 4, so I assume it has something to do with the way modules are built with the new Universal Webpack setup.

Steps to Reproduce (for bugs)

Use styled-components with next v5.

Use babel-plugin-styled-components with the default displayName setting.

Render a component exported like: export default styled(Component)

(It doesn't matter what the Babel plugin's ssr setting is, nor if the server stylesheet is set up in _document.js. Same thing in every combination.)

Your Environment

Tech
Version

next
v5.0.0

node
v8.9.4

OS
macOS

browser
Chrome

Issue 2:
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I am trying to host Next.js on AWS Lambda/CloudFormation. (using Serverless)

I am running into two issues:

When I host the packaged version of next (.next folder), it fails on AWS with

{ Error: Cannot find module '/Users/vadorequest/dev/serverless-with-next/node_modules/next/dist/pages/_document.js'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.7 (/var/task/.next/dist/bundles/pages/_document.js:86:18)
at __webpack_require__ (/var/task/.next/dist/bundles/pages/_document.js:23:31)
at Object.6 (/var/task/.next/dist/bundles/pages/_document.js:78:18)
at __webpack_require__ (/var/task/.next/dist/bundles/pages/_document.js:23:31)
at /var/task/.next/dist/bundles/pages/_document.js:70:18
at Object.<anonymous> (/var/task/.next/dist/bundles/pages/_document.js:73:10) code: 'MODULE_NOT_FOUND' }

I don't understand why there are absolute paths used in the generated code. I looked at the content of .next folder and there are tons of them, how are we supposed to use this package if it cannot be moved to another system? I cannot compile on AWS lambda. Is there a way of replacing those path programmatically using webpack for instance?

I manually replaced those paths to match AWS, basically replaced /Users/vadorequest/dev/serverless-with-next to /var/task in the .next folder. Once uploaded to AWS and hitting my endpoint https://bcwl62lv2e.execute-api.us-east-1.amazonaws.com/dev it loads for 30 seconds and then time out. Logs are empty, I don't know what's happening, at first I assumed the first Next.js load was slow (default timeout 6s) but 30s is way too much and something must be wrong. How can I debug this? Is there a way to configure Next.js to log what it does?

Steps to Reproduce (for bugs)

Go to https://github.com/Vadorequest/serverless-with-next

git clone git@github.com:Vadorequest/serverless-with-next.git

nvm use or use node 6.10.3

npm i

npm run build:staging => Generates a .next folder, you can check files have absolute path here

serverless deploy -v --package .serverless => Deploy to AWS, requires serverless cli, and an AWS account

Your Environment

Tech
Version

next
5

node
6.10.3

OS
MacOS X