Create-react-app: Less build fails

[benoj]

Hi,

I have an ejected CRA app where I am trying to integrate semantic-ui-less. Here is my webpack.dev.config https://gist.github.com/benoj/908f20a64066ca8606733c36206bccdd
(not much changed)

However, when I require the less files I am getting the following issue:

Module build failed:

module.exports = __webpack_public_path__ + "static/media/accordion.8c4c433e.less";
             ^
Unrecognised input
      in /Users/benflowers/Projects/candidate/candidate-ui-cra/node_modules/semantic-ui-less/definitions/modules/accordion.less (line 1, column 15)

Is there anything specific with CRA configuration which could be causing this?

I have asked on StackOverflow and Webpack Gitter but not getting any response

Cheers,

Ben

[gaearon]

Sorry, we don't provide support for ejected setups. There's a million ways to configure webpack and we can only help with the setup we support out of the box. Maybe you could bring this up with semantic-ui-less?

[benoj]

Yep - no worries though as much... sadly they are not so responsive :/

[gaearon]

Maybe it only works if you enable a "normal" less loader too?

[NDev8]

I hope the comment is not too late but think it has to do with the standard file-loader rule in the oneOf: [...] rule of your webpack.config.* file.
It was the same problem as you described.

I have changed the exclude statement of the standard file-loader:

          {
            // Exclude `js` files to keep "css" loader working as it injects
            // its runtime that would otherwise processed through "file" loader.
            // Also exclude `html` and `json` extensions so they get processed
            // by webpacks internal loaders.
            exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
            loader: require.resolve('file-loader'),
            options: {
              name: 'static/media/[name].[hash:8].[ext]',
            },
          },

from this:

exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],

to this:

exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.(less|config|variables|overrides)$/],

This excludes all .less, .config, .variables and .overrides files from the file-loader.
I think it's not the best solution but it worked for me and produced no other errors.

[zipzapp]

Just wanted to say that I also ran into this and this solves it for me. The accordion.8c4c433e.less part is a clue b/c that's how the file-loader outputs files. Big Help. Thank you!

[grinich]

Is there any way to override this property without ejecting?

[grinich]

So after reading through all the code and starting to grok how this stuff all works...

It turns out you can use the same react-app-rewired config-overrides.js file to modify the loader. This is the same way that the re-writing modules do it. Something like this should do the trick, and without ejecting. 🎉

const { getLoader, loaderNameMatches } = require('react-app-rewired')
const rewireLess = require('react-app-rewire-less')

module.exports = function override(config, env) {
  config = rewireLess(config, env)

  const extensionsToExclude = /\.(less|config|variables|overrides)$/;

  const fileLoader = getLoader(
    config.module.rules,
    rule => loaderNameMatches(rule, 'file-loader')
  );
  fileLoader.exclude.push(extensionsToExclude)

  return config
}