Next-plugins: Style Loader Invalid Options

[paulbrie]

Hi, I'd like to use TypeScript with next-css. For now I get this error:

This is my next.config.js file.

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssModules: true,
  webpack: (config, options) => {
    const { dir, defaultLoaders } = options
    // add TypeScript support
    config.resolve.extensions.push('.ts', '.tsx')
    config.module.rules.push({
      test: /\.+(ts|tsx)$/,
      include: [dir],
      exclude: /node_modules/,
      use: [
        defaultLoaders.babel,
        { loader: 'ts-loader', options: { transpileOnly: true } }
      ]
    })

    return config
  }
})

I get the same with module.exports = withCSS(withTypescript())

Am I doing something wrong?

Thanks,
Paul

[fadiquader]

Without typescript!, and i get same Error!

> Failed to build
{ Error: (client) ./styles/style.less
Module build failed: ValidationError: Style Loader Invalid Options

options['importLoaders'] should NOT have additional properties

[egorovli]

+1, same here:

 ERROR  Failed to compile with 1 errors                                                                 20:05:16
 error  in ./styles/main.scss

Module build failed: ValidationError: Style Loader Invalid Options
options['importLoaders'] should NOT have additional properties

 @ ./pages/index.jsx 19:0-29
 @ multi ./pages/index.jsx

./styles/main.scss:

html,
body {
  background-color: papayawhip;
}

./pages/index.jsx:

import React, { Component, Fragment } from 'react'
import Link from 'next/link'
import '../styles/main.scss'

class Landing extends Component {
  render () {
    return (
      <Fragment>
        <p>hi there</p>
        <Link href='/test'>come here</Link>
      </Fragment>
    )
  }
}

export default Landing

[fadiquader]

I solved by installing the dependencies below

"dependencies": {
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"find-up": "^2.1.0",
"ignore-loader": "^0.1.2",
"postcss-loader": "^2.0.10",
"style-loader": "^0.19.1"
},
"devDependencies": {
"webpack": "^3.10.0"
}

[httpete-ire]

same issue here

Module build failed: ValidationError: Style Loader Invalid Options

options['importLoaders'] should NOT have additional properties


 @ ./pages/components/alert.js 10:0-37
 @ multi ./pages/components/alert.js

---

./pages/index.scss:

body {
  background: red;
}

---

./pages/index.jsx:

import styles from './index.scss';

export default () => (
  <div>Hello world</div>
);

---

next.config.js:

const withSass = require('@zeit/next-sass');
module.exports = withSass({
  webpack(config, options) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: [/\.css$/, /\.(scss|sass)$/],
      loader: 'file-loader',
      query: {
        name: 'assets/icons/[name].[ext]',
      },
    });

    return config;
  },
});

[timneutkens]

Fixed in v0.1.0

[dryleaf]

Along with the css configurations mentioned here, What if I want to export also the following settings in next.config.js:

module.exports = {
  useFileSystemPublicRoutes: false,
  poweredByHeader: false
}

How can this be achieved?