Cannot import less or styl in TypeScript files (Cannot find module 'less')
See original GitHub issue🐛 bug report
I am trying to import a less or styl file, but although the documentation says they are supported out of the box, the plugin throws an error:
https://github.com/aminya/solid-simple-table/tree/less
@parcel/transformer-less: Cannot find module 'less' from 'C:solid-tablesrc'
Error: Cannot find module 'less' from 'C:\\solid-table\src'
at C:\\solid-table\node_modules\resolve\lib\async.js:116:35
at processDirs (C:\\solid-table\node_modules\resolve\lib\async.js:269:39)
at isdir (C:\\solid-table\node_modules\resolve\lib\async.js:276:32)
at isDirectory (C:\\solid-table\node_modules\@parcel\utils\lib\resolve.js:92:9)
Also the printing of the paths seems to be broken for Windows ('C:solid-tablesrc').
🎛 Configuration (.babelrc, package.json, cli command)
babel
{
"presets": ["babel-preset-solid", "@babel/preset-typescript", "@parcel/babel-preset-env"],
"plugins": ["@parcel/babel-plugin-transform-runtime"]
}
package.json:
"main": "dist/SimpleTable.js",
"module": "dist/SimpleTable.module.js",
"scripts": {
"dev": "cross-env NODE_ENV=development parcel watch src/SimpleTable.tsx",
"build": "cross-env NODE_ENV=production parcel build src/SimpleTable.tsx"
}
"targets": {
"main": {
"context": "browser",
"engines": {
"browsers": "> 0.25%"
},
"includeNodeModules": true,
"isLibrary": true
},
"module": {
"context": "browser",
"engines": {
"browsers": "Chrome 76"
},
"includeNodeModules": false,
"isLibrary": true
}
}
🤔 Expected Behavior
Transform and import less file
😯 Current Behavior
Throws an error
💁 Possible Solution
npm install --save-dev less
🔦 Context
💻 Code Sample
https://github.com/aminya/solid-simple-table/tree/less
🌍 Your Environment
| Software | Version(s) |
|---|---|
| Parcel | ^2.0.0-nightly.490 |
| Node | 15.5.0 |
| npm/Yarn | 6.14.8 |
| Operating System | Win 10 |
Issue Analytics
- State:
- Created 3 years ago
- Comments:15 (14 by maintainers)
Top Results From Across the Web
typescript can't find module less
Just create a new declaration file ( externals.d.ts ) with declare module '*.less' . Edit If you are using css-modules, you can define...
Read more >style-loader
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >error: cannot find module 'css-minimizer-webpack-plugin'
Make sure that the styles.less file imports the other less files in order to get the complete css file, or import all less...
Read more >less-loader
less -loader applies a Less plugin that passes all queries to the webpack resolver if less could not resolve @import . Thus you...
Read more >How to use CSS Modules with TypeScript and webpack
You can bypass TypeScript import magic by using require instead of import : const s = require('./Button.css');. It's processed by webpack as usual...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

IMO auto install is a convenience for fast development iteration. It is not something that should be relied on for production builds, where consistency of versions is more important. When using auto install in development, the installed package should already be added to a yarn.lock or package-lock.json depending on your package manager. Then, when doing production builds, you will get a consistent version. I’m not sure I see the need for auto install in production, and either way I don’t think it’s a good idea.
But
parcel build= production mode.We should probably change the message if autoinstall is disabled to rather be “it’s needed, please install this yourself because autoinstall is disabled”.