Issue 1:
Bug report

The now dev task hangs forever when I use fork-ts-checker-webpack-plugin

Describe the bug

Just instantiating the plugin causes the build to hang when an error is raised from hot-reloader. Given the following config:

const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const withTypescript = require("@zeit/next-typescript");

module.exports = withTypescript({
webpack: (config, options) => {
if (options.isServer) {
const plugin = new ForkTsCheckerWebpackPlugin();
}

return config;
},
target: "serverless"
});

If I comment out the plugin assignment, the build completes. But otherwise, I get this in my output:

⠴ Setting up Builder for package.json: at HotReloader.getWebpackConfig (/home/sam/sawtooth-alley/nextjs/node_modules/next/dist/server/hot-reloader.js:163:37) code: 'MODULE_NOT_FOUND' }^C

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Clone the project

Install dependencies

Run now dev

See error

Comment out plugin instantiation code

Run now dev again

No error, the build completes

Expected behavior

The build output should look like this:

sam@sam-ThinkPad-T480s:~/sawtooth-alley/nextjs$ now dev
> Now CLI 15.7.0 dev (beta) — https://zeit.co/feedback/dev
> Setting up 1 Builder
> Success! Builder setup complete
> Ready! Available at http://localhost:3000

Screenshots

If applicable, add screenshots to help explain your problem.

System information

OS: Ubuntu 18.04.2 LTS

Version of Next.js: 8.1.0

Additional context

I was unsure where to leave this report. The error seems to occur in the hot-reloader code, but it only happens when executing code from someone else's plugin. And it's the TypeScript plugin's repo that suggests using fork-ts-checker in the first place. So we have one plugin reporting the error cryptically, one third-party plugin seemingly causing it, and an official plugin suggesting the use of the third-party one. Who owns this thing? If it's not you, I'm happy to duplicate the issue in other repos! 😂

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

Expected Behavior

I had a simple working styled-components header inside a Next@3 website:

h1 {
cursor: pointer;
${props => (props.primary && 'font-size: 6rem;') || 'font-size: 2rem;'}
line-height: 1.1;
margin-bottom: 1rem;
transform: skewY(-2deg);
}

This is based on the documentation for styled-components at: https://www.styled-components.com/docs/basics#adapting-based-on-props

Current Behavior

Upgrading to next@4 resulted in the following error message:

Module build failed: SyntaxError:
Found an `undefined` or invalid value in your styles: `props.primary`.

If you are trying to use dynamic styles in external files this is unfortunately not possible yet.
Please put the dynamic parts alongside the component. E.g.

<button>
<style jsx>{externalStylesReference}</style>
<style jsx>{`
button { background-color: ${props.primary} }
`}</style>
</button>

Steps to Reproduce (for bugs)

Init a new Next@3 site with styled-components@latest, sample document, page and component: https://gist.github.com/jamiemchale/3d7d593f7911ad33b354a80f134b32fd

Run, see site.

Update to Next@4, run, see error.