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

Expected Behavior

My page contains this very basic code:

import React from 'react'
import styled from 'styled-components'

const Title = styled.h1`
color: pink;
font-size: 50px;
`

export default () => <Title>My page</Title>

When I refresh the page, I expect the Title to be of color pink

Current Behavior

The first time the page is built, the title does appear as pink. When I refresh the page, the pink color is no longer respected.

If I change the color in the code to anything else, and save the file, then the page will update. But again, upon refreshing, the changes are lost again. I have no clue what might be causing this. Any help is appreciated.

Your Environment

Tech
Version

next
latest

node

OS
arch

browser
vivaldi

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

Expected Behavior

In production, enabling devtool and tweaking the UglifyJSPlugin configuration should build a full source map that can e.g. be used by the browser or external services to map stack traces back to original source files.

Current Behavior

In Next.js v5.0.0, source maps are generated for common.js, manifest.js and react.js in the Next.js build directory, but not for app.js (see context below for the gory details).

I haven't checked canary yet to see if the problem has been fixed, but from a casual inspection of the changes since 5.0.0, I would expect to still have the same problem.

Context

(I've copied the following from an internal discussion about this, apologies if any of it is unclear)

Next 5.0.0 by default will not correctly build source maps for

production. The client-code build process is:

List app pages and main.js as Webpack entry points. main.js

points to node_modules/next/dist/client/next.js (and pages point

to the indivdual file in pages/ 1

Use CommonsChunkPlugin to: a) extract common code from pages into

common.js, b) provide a single implementation of React, and c)

extract the webpack setup code. 2

Use UglifyJS to minify code.

Use custom CombineAssetsPlugin 3 to hand-merge the common

chunks from step 2, with main.js, into app.js. 4

Then when pages are generated in production, only app.js is linked

5.

By:

adjusting the UglifyJS plugin configuration 6,

setting devtool in the Webpack configuration, and

using source-map-loader for all JS code,

it's possible to get Next to build source maps for the files generated

in step 1 and step 2.

But when the chunks are merged in step 4, it causes the source map

offsets to become incorrect (because only the file content is merged,

the maps are not adjusted).

We can't build app.js directly with Webpack, because it needs to

contain the Next.js framework entry code (main.js) but not have it

linked in as a module (it needs to execute on load).

We can't easily modify Next to link in both app.js and main.js

when generating production HTML, without hacking further into the

build process, as we need to a) build the two files, b) include

main.js in the generated .next/build-stats.json file and c) modify

Head and NextScript to include main.js (see 5 again).

We can modify the CommonsChunkPlugin setup from step 2, and the

CombineAssetsPlugin from step 4:

Create a single common.js chunk that will have a correct source

map.

Merge common.js and main.js using CombineAssetsPlugin,

ensuring that common.js is first in the file.

Then we can reuse the generated source map file for

common.js (common.js.map), by copying it somewhere that Next can

serve directly (eg. static/, and linking it from app.js by

appending a source map comment like this:

//# sourceMappingURL=/static/common.js.map

Then we have:

Server generating HTML that links to app.js

app.js links to static/common.js.map

the first part of app.js is identical to common.js so the map

file is correct for most of the code in app.js.

static/common.js.map is a source map for app and library code.

There is a hole where client-side errors in getInitialProps do not

use a source map when being displayed in Chrome.