Issue 1:
This is very simple react component run from 'pages/index.js' (sorry, but I don't know why the code is not formatted properly in this example).

If I change input value to, say, 'click Me' then the page is HMR'ed and changes are immediately reflected in the browser. However, if I change console.log in the handler() to, say, 'some other message' then changes are not reflected in the browser and I have to do a hard refresh to pick up the changes. I would think that this change should be picked up but I could be wrong and it's normal.

export default class Test extends React.Component {
handler = () => { console.log('some message')}
render () {
return ( <input type="button" value="click" onClick={this.handler} />)
}
}

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

Expected Behavior

If I change console.log('message') to console.log('some message') and save the file and click the button then I would expect this changes to be picked up by HMR and see 'some message' in the browser's console output

Current Behavior

I don't see these changes and I have to do a hard refresh in order to see them in the browser.

Steps to Reproduce (for bugs)

Just run the sample code provided and change variables as described.

Context

It's not affecting me in any meaningful way. I can do a hard refresh if that's by design.

Your Environment

Next.js version: 3.0.1-beta.8

Environment name and version (e.g. Chrome 39, Node.js 5.4): Node 8.x, NPM 5

Operating System (Linux, maxOS, Windows): OSX Sierra

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

Expected Behavior

I want to expect styles from my modules to be compiled into the same stylesheet as my global styles. Please see demo setup below to understand where styles are being pulled from.

├── pages
│ ├── index.js
├── components
│ ├── Button
│ │ ├── index.js
│ │ ├── index.sass
├── styles
│ ├── index.sass (Global stylesheet with @imports)

Current Behavior

Can't get both modules and global styles to work together in parallel. Only one of them can be used while the other cannot. Please see my comments in this demo repo in the files, _document.js and styles/index.sass

Steps to Reproduce

Clone this repo

yarn && yarn dev

View comments in _document.js and styles/index.sass to turn on and off behaviors.

If you inspect the styles you'll see that the global styles are only being applied.

Comment out line 5 in _document.js, save, and you'll notice that module styles will be applied but not the global styles.

Context

As stated in the above, I want the ability to use SASS modules within my components folder AND global styles in my styles folder together. As of right now I can either have styles from modules and NOT from my global stylesheet OR have styles from global stylesheet and not my modules.

The only work around I've found is including the path of a component's style inside my styles/index.sass file, like so:

@import '../components/Button/index'

The only issue with this is that the global stylesheet is imported into the _document.js and therefore reloads the page on save for those styles intstead of injecting those changes. That's not the biggest deal in the world, but not ideal.

I'm not sure if the issue is due to the way modules and _document.js work together, or if there needs to be a specific way to allow this within the next.config.js setup.

Your Environment

Tech
Version

next
6.0.0-canary.4

Issue is persistant for stable releases too.