question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:closed
  • Created 3 years ago
  • Comments:15 (14 by maintainers)

github_iconTop GitHub Comments

3reactions
devongovettcommented, Dec 28, 2020

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.

2reactions
mischniccommented, Dec 26, 2020

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”.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found