webpack error in Cannot find module 'less'

Question

I'm trying to use less loader in webpack and the issues is - I've installed less loader locally, but when I try to compile everything using webpack command in bask, it prints out: "ERROR in Cannot find module 'less'". In my entry point I require some less file like

require("./less_components/style.less");

Here is my webpack.config file

module.exports = {

entry: "./entry.js",

output: {

    path: "./build",

    filename: "./bundle.js"

},

module: {

    loaders: [

        {test: /\.js$/, exlude: /node_modules/, loader: "babel-loader"},

        {test: /\.less$/, loader: "style!css!less"}

    ]
}
}

What's the matter and how I should fix it?

ERROR in Cannot find module 'less' @ ./less_components/style.less 4:14-167 it's the output I get. The less_components thing is the path to where my style file is located — Alex Buddy, Apr 21 '16 at 22:10

score 73 · Answer 1 · edited May 22 '17 at 19:34

73

This error happens because npm@3 does not resolve peerDependencies any more.

npm install less less-loader is the way to go.

edited May 22 '17 at 19:34

Martin Tournoij

26,737
24
105
146

answered Apr 03 '17 at 15:34

Dom Sun

831
1
6
5

2

I would add --save-dev as less is usually only required for development – Gabriel Hautclocq Oct 03 '19 at 06:59
Thank you guys this solution helps. – Amey Zulkanthiwar Jan 08 '20 at 15:13
who decided to not install required dependencies? – NDM Apr 08 '20 at 14:57

score 30 · Accepted Answer · edited Aug 19 '19 at 06:35

30

It sounds like you haven't installed the less-loader into your node_modules. Installing it would fix this.

npm install less-loader --save-dev

Edit: Also you will get this error when you haven't installed the css-loader and style-loader that you are chaining less-loader to.

Anyone who comes across this can plus on the issue I submitted for the bad message. "Error in Cannot find module 'less'" when missing loaders chained after less. Revise error message.

edited Aug 19 '19 at 06:35

Edgar

6,022
8
33
66

answered Apr 21 '16 at 22:03

Sean Larkin

6,290
1
28
43

I've it in my loaders – Alex Buddy Apr 21 '16 at 22:07
1

Can you wipe your node modules and try installing again? – Sean Larkin Apr 21 '16 at 22:10
1

Also try changing loader name to `less-loader` instead of `less`. That will help confirm its the loader it can't find because the error message will show `less-loader` instead. – Sean Larkin Apr 21 '16 at 22:14
I changed it to the less-loader, but the message I'm getting is still the same, with "less module", not "less-loader" – Alex Buddy Apr 21 '16 at 22:17
1

Can you check and make sure you also have the css-loader and style-loaders installed? https://github.com/webpack/less-loader/issues/45 – Sean Larkin Apr 21 '16 at 22:19
3

Thank you so much! The issue was - I didn't have the css-loader and also less, cuz without either of them, the console kept sending the error – Alex Buddy Apr 21 '16 at 22:37
36

I had the exact same error and tried `npm install less-loader style-loader css-loader --save-dev`. However, that didn't do it, but once I installed the module `less`, i.e. without the `-loader` suffix, the error went away! – Eirik Birkeland Aug 12 '16 at 00:26
Should be noted: If you are using the local web server provided by webpack for testing, the server may need to be restarted to completely resolve newly installed modules and their paths. – truefusion Apr 27 '18 at 20:46

score 17 · Answer 3 · answered Oct 17 '16 at 06:12

I had the same issue. ERROR in Cannot find module 'less'

├── UNMET PEER DEPENDENCY file-loader@*
├── UNMET PEER DEPENDENCY less@^2.3.1
├── webpack@1.13.2 
└── webpack-dev-server@1.16.2 
npm WARN EPEERINVALID less-loader@2.2.3 requires a peer of less@^2.3.1 
but none was installed.
npm WARN EPEERINVALID url-loader@0.5.7 requires a peer of file-loader@* 
but none was installed.

I tried as follows:

npm install --save-dev less
npm install --save-dev file-loader

Then it solved the issues.

Same here, previous answer didn't work but a simple `npm i less` fixed the issue. — dpnmn, Jan 18 '17 at 07:48

score 6 · Answer 4 · answered Jan 22 '17 at 19:34

6

I had the same issue with a .Net Core project. I resolved this by adding less to my package.json file as well as less-loader.

"less-loader": "2.2.3",
"less": "2.7.2"

answered Jan 22 '17 at 19:34

Zhorian

802
1
9
15

score 5 · Answer 5 · answered Aug 27 '18 at 17:11

5

In my case I already had less-loader, style-loader and css-loader still it was giving same error. When I installed less then it fixed. So make sure you install less also. npm install less --save-dev fixed my problem.

answered Aug 27 '18 at 17:11

Rupesh Kumar Tiwari

897
11
19

score 0 · Answer 6 · answered Feb 02 '17 at 20:31

@Zhorian yours works awesome, I cannot vote cuz of the low level and neither add comment on your answer! after doing npm install less --save-dev, it works, for the error:

Module build failed: Error: Cannot find module 'less'

and when you try to install:

npm install less-loader style-loader css-loader --save-dev

It will gave you:

├── css-loader@0.26.1
├── UNMET PEER DEPENDENCY less@^2.3.1
├── less-loader@2.2.3
└── style-loader@0.13.1

score 0 · Answer 7 · answered Aug 12 '19 at 13:15

the error message described the problem well: missing 'less' module.

npm install less --save-dev will solve it.

Most of the time you should have all of less/less-loader/css-loader/style-loader.

npm install style-loader css-loader less-loader less --save-dev

score 0 · Answer 8 · answered Mar 29 '20 at 10:33

I meet the error also when I have installed less and less-loader both. then I try uninstall them and install them again but not make sense.

Lastly, I find delete the last dist(already exit) can make 'npm run build' right. So, you can try delete the 'dist' dir if it already exits.

webpack error in Cannot find module 'less'

8 Answers8

Linked