Issue 1:
After reading some different methods of utilizing CSS modules within Nextjs pages, I'm wanting to know if the same concept can be applied to components but with SASS. This is one of the examples I'm referencing to:

https://github.com/zeit/next.js/tree/canary/examples/with-next-sass

What I'm trying to achieve is something like this with the following file structure:

Reusable components are in a folder structure so both .js and .sass files are in the same area.

├── pages
│ ├── index.js
├── components
│ ├── Button
│ │ ├── index.js
│ │ ├── index.sass

Import components as usual...

// pages/index.js

import Button from 'components/Button'

...

<Button
className='book'
text="I'm a button"
href='/about'
/>

Import styles from the component's sass file, then pass the styles as properties with styles.btn

// components/Button/index.js

// Libraries
import React, { Component } from 'react'
import Link from 'next/link'

// Styles
import styles from './index.sass'

export default class Button extends Component {
constructor(props) {
super(props)
}

componentDidMount() {

}

render() {
return (
this.props.href
? (
<a className={styles.btn + this.props.className} target='_blank' href={this.props.href}>
{this.props.text}
</a>
) : (
<Link href={this.props.link}>
<a className={styles.btn + this.props.className}>
{this.props.text}
</a>
</Link>
)
)
}
}

Button's styling.

// components/Button/index.sass

.btn
color: red

My next.config.js setup:

const path = require('path')
const glob = require('glob')
const withSASS = require('@zeit/next-sass')

module.exports = withSASS({
cssModules: true,
distDir: 'public',

exportPathMap: function () {
return {
"/": { page: "/" },
"/about": { page: "/about" },
}
},

webpack: (config, { dev }) => {
return config
}
})

The markup for the page renders, but styles aren't being applied and the class name has a weird string with it (book is the class passed in the Button properties):

<a class="EGxqjOug9lYuZ5fOMdFUbbook" target="_blank" href="/about">I'm a button</a>

With all of this, I have a couple of questions concerning this setup:

Is what I'm trying to achieve even possible to do at the moment?

Is this issue depending on how my next.config.js file is setup?

How would I be able to import other sass files from different directories into the index.sass of my component? For example, if I want to import breakpoint mixins into my button component, will that cause any issues with modules?

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

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

Expected Behavior

I just started to use next.js, but after the completion of the installation is encountered, only in macOS, win 10 is normal.

Current Behavior

`These relative modules were not found:

../../../../.4.1.4@next/dist/lib/error.js in ./node_modules/.4.1.4@next/dist/pages/_error.js?entry

../../../../.4.1.4@next/dist/server/document.js in ./node_modules/.4.1.4@next/dist/pages/_document.js?entry

(node:6711) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead`

Steps to Reproduce (for bugs)

My operation process :

mkdir gw

cd gw

npm install --save next react react-dom

mkdir pages

cd pages

vim index.js

index.js content

export default () => <div>Welcome to next.js!</div>

package.json

{ "scripts": { "a": "next", "build": "next build", "start": "next start" }, "dependencies": { "next": "^4.1.4", "react": "^16.1.0", "react-dom": "^16.1.0" } }

npm run dev

Context

I'm just going to do my project with next.js, but I've got this problem at the beginning.

Your Environment

Tech
Version

next
4.1.4

node
8.0.0

OS
macOS 10.12.6

browser
Chrome

etc

I hope to get help. Thank you very much!