Title.
This is also written in their README.md.

const {
PHASE_DEVELOPMENT_SERVER,
PHASE_PRODUCTION_BUILD,
} = require('next/constants')

const getBuildConfig = (...args) => {
const path = require('path')
const withPugins = require('next-compose-plugins')
const withCSS = require('@zeit/next-css')
const withFonts = require('next-fonts')
const withImages = require('next-images')
const withSCSS = require('@zeit/next-sass')
const postcssPresetEnv = require('postcss-preset-env')
const postcssPresetEnvOptions = {
features: {
'custom-media-queries': true,
'custom-selectors': true,
},
}

const cssOptions = {
postcssLoaderOptions: {
plugins: [postcssPresetEnv(postcssPresetEnvOptions)],
},
sassLoaderOptions: {
includePaths: [path.join(process.cwd(), 'src', 'common', 'scss')],
},
}

const nextConfig = {
webpack(config) {
config.module.rules.push({
test: /.svg$/,
include: /src/common/icon/icons/,
use: [
'svg-sprite-loader',
{
loader: 'svgo-loader',
options: {
plugins: [
{ removeAttrs: { attrs: '(fill)' } },
{ removeTitle: true },
{ cleanupIDs: true },
{ removeStyleElement: true },
],
},
},
],
})
return config
},
}
return withPugins(
[[withSCSS, cssOptions], withFonts, [withImages], withCSS],
nextConfig
)(...args)
}

module.exports = (phase, ...rest) => {
const shouldAddBuildConfig =
phase === PHASE_DEVELOPMENT_SERVER || phase === PHASE_PRODUCTION_BUILD
return shouldAddBuildConfig ? getBuildConfig(phase, ...rest) : {}
}

First time, I clone the source.
Yarn install => yarn dev.
I have error.

error - ./src/common/css/variables.scss
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'includePaths'. These properties are valid:
  object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }

how can I resolved this issue?
Thank you!
(p/s) My english is not good. I'm sorry for the inconvenience

const {
PHASE_DEVELOPMENT_SERVER,
PHASE_PRODUCTION_BUILD,
} = require('next/constants')

const getBuildConfig = (...args) => {
const path = require('path')
const postcssPresetEnv = require('postcss-preset-env')
const withPlugins = require('next-compose-plugins')
const optimizedImages = require('next-optimized-images');
const postcssPresetEnvOptions = {
features: {
'custom-media-queries': true,
'custom-selectors': true,
},
}

const cssOptions = {
postcssLoaderOptions: {
plugins: [postcssPresetEnv(postcssPresetEnvOptions)],
},
sassOptions: {
includePaths: [path.join(process.cwd(), 'src', 'common', 'css')],
},
}

const nextConfig = {
...cssOptions,
webpack(config) {
config.module.rules.push({
test: /.svg$/,
include: path.join(process.cwd(), 'src', 'components', 'icon', 'icons'),
use: [
'svg-sprite-loader',
{
loader: 'svgo-loader',
options: {
plugins: [
{ removeAttrs: { attrs: '(fill)' } },
{ removeTitle: true },
{ cleanupIDs: true },
{ removeStyleElement: true },
],
},
},
],
})
return config
},
}
return withPlugins([[optimizedImages, {}]], nextConfig)(...args)
}

module.exports = (phase, ...rest) => {
const shouldAddBuildConfig =
phase === PHASE_DEVELOPMENT_SERVER || phase === PHASE_PRODUCTION_BUILD
return shouldAddBuildConfig ? getBuildConfig(phase, ...rest) : {}
}

Hi @sanjaytwisk .
I use windows 10. node v12.16.3 version
I received your feeback.
After clone latest source.

Yarn install => Yarn dev
I got another issue.

./src/components/icon/icons/plus.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

|
|

Thanks @sanjaytwisk

next.config.js
const withCSS = require('@zeit/next-css')
return withPugins(
[
[
[
withCSS,
{
postcssLoaderOptions: {
parser: true,
config: {
ctx: {
theme: JSON.stringify(process.env.REACT_APP_THEME),
},
},
},
},
],
withSCSS,
cssOptions,
],
],
nextConfig
)(...args)

==> TypeError: parsedPhaseConfig.substr is not a function
Can you give me examples ,thanks

Hi @sanjaytwisk ,

I using next-compose-plugins and combind next-images with nextConfig.

In your next.config.js. I add some line

const withPlugins = require('next-compose-plugins'); // added
const withImage = require('next-images'); // added
// const nextConfig is here.....
I change return nextConfig to return withPlugins([[withImage, {}]], nextConfig);

I run yarn dev. I see warn Detected next.config.js, no exported configuration found

++++++++++++++++++++++++++++++++++++++++++++++++++++++
source code next.config.js

const {
PHASE_DEVELOPMENT_SERVER,
PHASE_PRODUCTION_BUILD,
} = require('next/constants')

const getBuildConfig = () => {
const path = require('path')
const postcssPresetEnv = require('postcss-preset-env')
const postcssPresetEnvOptions = {
features: {
'custom-media-queries': true,
'custom-selectors': true,
},
}

const cssOptions = {
postcssLoaderOptions: {
plugins: [postcssPresetEnv(postcssPresetEnvOptions)],
},
sassOptions: {
includePaths: [path.join(process.cwd(), 'src', 'common', 'css')],
},
}

const withPlugins = require('next-compose-plugins');
const withImage = require('next-images');

const nextConfig = {
...cssOptions,
webpack(config) {
config.module.rules.push({
test: /.svg$/,
include: path.join(process.cwd(), 'src', 'components', 'icon', 'icons'),
use: [
'svg-sprite-loader',
{
loader: 'svgo-loader',
options: {
plugins: [
{ removeAttrs: { attrs: '(fill)' } },
{ removeTitle: true },
{ cleanupIDs: true },
{ removeStyleElement: true },
],
},
},
],
})
return config
},
}
return withPlugins([[withImage, {}]], nextConfig);
}

module.exports = (phase) => {
const shouldAddBuildConfig =
phase === PHASE_DEVELOPMENT_SERVER || phase === PHASE_PRODUCTION_BUILD
return shouldAddBuildConfig ? getBuildConfig() : {}
}

Hi, @sanjaytwisk , i use image component next 10 , but not working ? Do you help me ?

import { Icon } from '@components/icon/Icon'
import style from './style.module.scss'
import Image from 'next/image'

interface CounterProps {
count: number
add: () => void
remove: () => void
}

export const Counter: React.SFC = ({ count, add, remove }) => {
const onAdd = () => add()
const onRemove = () => remove()
return (

Count: {count}

<Icon name={'plus'} /> Add


<Icon name={'minus'} /> Remove

I'm not a developer so my troubleshooting attempts is mostly Google.
I error I get in the browser is:

./src/components/icon/icons/minus.svg
Error: Plugin name should be specified
    at Array.map (<anonymous>)

I run npm install with no issues.
I attempt to run npm run dev and get this in the terminal

./src/components/icon/icons/minus.svg
Error: Plugin name should be specified
    at Array.map (<anonymous>)

I've tried stupid things like just deleting any reference to minus.svg and then I get the error with plus.svg, so that did not work.
I see webpack is mentioned so I try to move to a lower version without success.
Any ideas?

Thanks
Paul

As you probably also noticed, Next.js was just updated to the next major version 9 (https://nextjs.org/blog/next-9).

Are you actually planning to upgrade your boilerplate as well?