_errors.ConfigValidationError when less in styles

[oluckyman]

This issue is a:

Bug report

Which versions of Node.js, npm and nwb are you using (if using it globally)?

➜  react-component-template git:(master) ✗ ./node_modules/.bin/nwb -v
v0.17.1
➜  react-component-template git:(master) ✗ node -v
v8.1.2
➜  react-component-template git:(master) ✗ npm -v
5.0.3

Which modules are installed in your project?

npm ls --depth=0
MYCOMPONENT@0.0.1 /Users/oluckyman/Projects/methodexists/react-component-template
├── antd@2.11.1
├── babel-plugin-import@1.2.1
├── babel-plugin-module-resolver@2.7.1
├── UNMET PEER DEPENDENCY dva@1.x
├── eslint-config@1.0.0 
├── husky@0.14.0
├── lint-staged@4.0.0
├── nwb@0.17.1
├── nwb-less@0.6.0
├── react@15.6.1
└── react-dom@15.6.1

nwb.config.js:

var path = require('path');

module.exports = {
  type: 'react-component',
  npm: {
    esModules: true,
    umd: false,
  },
  babel: {
    cherryPick: ['lodash'],
    plugins: [
      ['import', { libraryName: 'antd', style: true }],
      ['module-resolver', {
        root: ['./src'],
        alias: {
          '~': './src',
        },
      }],
    ],
  },
  webpack: {
    // Custom stylesheet rule configuration
    styles: {
      // The 'css' property is used to configure rules for vanilla CSS files
      css: [
        // Create a rule which uses CSS modules for CSS imported from src/
        {
          include: path.resolve('src'),
          // Configuration options for css-loader
          css: {
            modules: true,
            localIdentName: '[local]__[hash:base64:5]',
          },
        },
        // Create a catch-all rule for all other CSS stylesheets
        {
          exclude: path.resolve('src'),
        },
      ],
      less: [],
    },
  },
};

npm run build works without errors but npm start crashes:

/Users/oluckyman/Projects/react-component-template/node_modules/nwb/lib/getUserConfig.js:529
    throw new _errors.ConfigValidationError(report);
    ^
[object Object]

if I remove less: [], it works well.

[insin]

This is a bug with not passing along details of your installed nwb-* plugins when creating config for the dev server.

If you just want default handling for any imported .less stylesheets you can leave the less property out completely.

[insin]

Fixed in v0.17.2

[oluckyman]

@insin Thanks!
I want the same behavior as in css: global for node_modules and modules for local files.
I’ve updated the nwb version and make that config:

  webpack: {
    styles: {
      css: [
        {
          include: [path.resolve('src'), path.resolve('demo')],
          css: {
            modules: true,
            localIdentName: '[local]__[hash:base64:5]',
          },
        },
        {
          exclude: [path.resolve('src'), path.resolve('demo')],
        },
      ],
      less: [
        {
          include: [path.resolve('src'), path.resolve('demo')],
          less: {
            modules: true,
            localIdentName: '[local]__[hash:base64:5]',
          },
        }, {
          exclude: [path.resolve('src'), path.resolve('demo')],
        },
      ],
    },
  },

It throws no error anymore, but seems it does not work.

import styles from './styles.less'
console.log(styles) // {}

[insin]

CSS Modules are still handled by css-loader for .less stylesheets, so try changing that inner less: {modules: true... to css: {modules: true...

[oluckyman]

It works! thanks a lot!