Next-plugins: Problem using external UI components library with LESS

[wcalderipe]

Hello,

We're having some problems using next-less with UI components from an external library. The scenario is that we have an external library to share UI components among multiples projects, and these components use separate LESS files. However, the configuration below can't load those external LESS files in the server as we're used to with our webpack build setup.

Is it possible to load external UI components that are importing LESS files with next.js and next-less?

If you need more information let me know!

Dependecies

  "dependencies": {
    "@zeit/next-less": "^0.1.2",
    "express": "^4.14.1",
    "next": "^5.1.0",
  }

.babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "modules": "commonjs"
        }
      }
    ]
  ],
  "plugins": [[
    "module-resolver",
    { "root": [ "src" ] }
  ]]
}

next.config.js

const withLess = require('@zeit/next-less');
const { url } = require('./app.config');

module.exports = withLess({
  distDir: '../dist',
  assetPrefix: url.static,
  useFileSystemPublicRoutes: false,
  cssModules: false,
  cssLoaderOptions: {
    importLoaders: 1,
  },
  webpack: (config) => {
    const output = {
      ...config.output,
      publicPath: url.static,
    };
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
      loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]',
    });
    return { ...config, output };
  },
});

Error message and stack trace

/Users/wcalder/workspace/react-template/node_modules/booking-flow-components/lib/components/card/card.less:1
(function (exports, require, module, __filename, __dirname) { @import "../../styles.less";
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Module._extensions..js (module.js:654:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/wcalder/workspace/react-template/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/wcalder/workspace/react-template/node_modules/booking-flow-components/lib/components/card/card.js:11:1)
    at Module._compile (module.js:643:30)
    at Module._extensions..js (module.js:654:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/wcalder/workspace/react-template/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
Error: "MyDocument.getInitialProps()" should resolve to an object. But found "undefined" instead.
    at _callee$ (/Users/wcalder/workspace/react-template/node_modules/next/dist/lib/utils.js:56:19)
    at tryCatch (/Users/wcalder/workspace/react-template/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/wcalder/workspace/react-template/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/wcalder/workspace/react-template/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/Users/wcalder/workspace/react-template/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/wcalder/workspace/react-template/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13
    at <anonymous>

External Card component and styles

// @flow

import React from 'react'

import './card.less'

const Card = ({ id, className = '', children }: Props) => (
  <section id={id} className={`card first-shadow ${className}`}>
    { children }
  </section>
)

type Props = {
  id?: string,
  className: string,
  children: React.Element<any>
}

export default Card

@import "../../styles.less";

.card {
  padding: 14px;
  background: white;
  display: block;
  margin-top: 20px;

  @media (min-width: @screen-md-min) {
    margin-left: 14px;
    margin-right: 14px;
  }
}

[piuccio]

I'm having the same problem trying to import antd it seems like the plugin doesn't support @import statements.

 ERROR  Failed to compile with 1 errors                                                                                              4:46:33 PM

 error  in ./node_modules/antd/dist/antd.less

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "../lib/style/index.less";
| @import "../lib/style/components.less";

 @ ./styles/global.js 1:0-29
 @ ./pages/_app.js
 @ multi ./pages/_app.js

[piuccio]

Actually turns out I forgot to change my next.config.js

const withLess = require('@zeit/next-less');
module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
  },
});

I got it working with the code above

[lavir]

@piuccio Can you share the .babelrc and package.json files? I still have exactly the same problem with antd.

[lavir]

I found working example https://github.com/zeit/next.js/tree/master/examples/with-ant-design-less