How to config less options #907

vdfor · 2018-02-28T01:21:00Z

When using less3, how to enable inline javaScript?

davidnagli · 2018-02-28T03:23:39Z

Just moved the description from the seperate comment into the issue body...

chenshuai2144 · 2018-03-06T07:07:54Z

lessrc no working

davidnagli · 2018-03-08T03:32:33Z

@chenshuai2144 Please open a separate issue

@vdfor We don’t support inline JavaScript yet

chenshuai2144 · 2018-03-08T06:05:04Z

I think it should be able to turn on this function in lessrc

BeliefRC · 2018-03-16T03:11:13Z

less3.0.1 no working,but less2.7.3 is working

schtr4jh · 2018-05-05T13:05:15Z

Encountered same problem, all you have to do is add --js flag to lessc command: lessc --js foo.less > bar.css

y-takey · 2018-05-23T08:24:37Z

@schtr4jh Thank you very much :) you saved me!
By the way, Is there way that add --js option on parcel automatically? I want to avoid execution lessc command manualy.

schtr4jh · 2018-05-23T08:40:01Z

@y-takey I landed here because of some other issue, unrelated to parcel. As far as I know this is something that's changed in some of latest versions of lessc compiler. Maybe you can downgrade lessc if it's installed globally? Or prepare pr that fixes it. :P

y-takey · 2018-05-23T08:45:46Z

@schtr4jh Thanks for the quick response! I'll try to downgrade lessc.

DeMoorJasper · 2018-05-23T08:47:11Z

What about adding:

{
  "inlineJavaScript": true
}

to .lessrc?

According to the less docs this should re-enable the deprecated inlining feature.
As this is deprecated I don't think this should be the default on parcel

y-takey · 2018-05-24T01:45:04Z

@DeMoorJasper Thanks for the advice! (and sorry for the delay) I've tried it, but i can't work well :(

As this is deprecated I don't think this should be the default on parcel

yes, I agree too.

viztor · 2018-07-06T12:06:47Z

Is this fixed? I've been trying to use Antd's babel-plugin-import with Parcel, but doesn't seems to be helpful

PierrickGT · 2018-07-10T12:40:11Z

I've managed to make it work using almost the same config than the one in the example available here : https://github.com/ant-design/parcel-antd

I've setup HMR so in my case, I needed to have the following .babelrc config to make the project work.

{
    "presets": [
      "react",
      "env"
    ],
    "plugins": [
        "react-hot-loader/babel",
        "transform-class-properties",
        ["import", {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": true
        }]
    ]
}

viztor · 2018-07-15T20:01:55Z

The problem is primarily with Less v3. I downgraded it and it worked. but it still requires fixing as we won't be able to stay v2.7 forever

parcel-bundler/parcel#907 This fixes the examples...

lxwbr · 2018-08-20T21:39:58Z

Having the same problem, have to stay on 2.7.3 for now. Hopefully this will be fixed soon.

DeMoorJasper · 2018-08-20T23:10:24Z

As this is a deprecated feature of less, I don't think parcel should fix this.

If anyone could open a decent issue with an example repo and such someone might have a look at it. Gonna close this for now.

I don't even think less even supports this at all anymore, the inlineJavascript flag seems to have been removed from the config

fourcolors · 2019-01-13T20:37:34Z

It would be nice if there was a flag that enabled this since there are still a ton of libs out there that have inline js. Antd for instance "should" upgrade but I'm having to downgrade to use their lib. It might be too soon to completely ditch it but it's an edge case that should be supported.

moodseller · 2019-02-22T11:40:31Z

Solution for webpack example:


	loader: 'less-loader',
		options: {
			javascriptEnabled: true
		}

urwork · 2019-03-14T18:12:11Z

seems .lessrc take no effect

msereniti · 2019-03-23T07:03:57Z

Why issue is closed? The problem still exists

djamaile · 2019-05-12T15:29:39Z

v3 still does not work in 2019. Is using version 2.7.1 really the only work around?

entrptaher · 2019-05-22T06:19:30Z

Apperently the LessAsset does not read the .lessrc file at all. I have zero clues at this moment.

However the fix was just one line one file.

I extracted the code and published as a npm module till they somehow fix it in future. Steps to follow:

yarn add -D parcel-plugin-less-js-enabled

Before:

➜  experiment-parcel-antd git:(master) ✗ yarn start
yarn run v1.13.0
$ parcel src/index.html
Server running at http://localhost:1234 
🚨  node_modules/antd/lib/form/style/index.less: Inline JavaScript is not enabled. Is it set in your options?

Now:

➜  experiment-parcel-antd git:(master) ✗ yarn start
yarn run v1.13.0
$ parcel src/index.html
Server running at http://localhost:1234 
✨  Built in 343ms.

gabrielnoal · 2019-05-22T23:05:33Z

I have fixed this problem just changing "style":true at .babelrc antd import for "style": "css".

before

.babelrc

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    ["import", { "libraryName": "antd", "style": true }],
  ]
}

Print screen

after

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    ["import", { "libraryName": "antd", "style": "css" }],
  ]
}

Print screen

PS: I dont't know if this fix will break something later, but it works for now 👍

y-takey · 2019-06-20T07:34:52Z

I got works correctly!

my environment:

parcel-bundler: 1.12.3
less: 3.9.0
less-loader: 5.0.0
(antd: 3.19.5)

<project root>/.lessrc

{
  "javascriptEnabled": true
}

NOT "inlineJavaScript"

<project root>/src/index.less

@import "~antd/dist/antd.less";

@primary-color: #4caf50;

wangyongf · 2019-07-13T15:25:27Z

I got works correctly!

my environment:
parcel-bundler: 1.12.3
less: 3.9.0
less-loader: 5.0.0
(antd: 3.19.5)
<project root>/.lessrc
{
  "javascriptEnabled": true
}
NOT "inlineJavaScript"

<project root>/src/index.less
@import "~antd/dist/antd.less";

@primary-color: #4caf50;

It workded for me too, thanks~

ivanfilhoz · 2019-07-27T14:25:15Z

Same here. It works!

imanish003 · 2019-09-08T10:54:48Z

Solution for webpack example:


	loader: 'less-loader',
		options: {
			javascriptEnabled: true
		}

This solution worked for me

chengsokdara · 2019-11-12T06:02:21Z

@y-takey your solutions doesn't work for me.

I tried below setup and it works for me. But I don't know if this is correct way, because I want to use the options style: true and libraryDirectory: "es" in .babelrc

package.json

"devDependencies": {
  "@babel/core": "^7.7.2",
  "babel-plugin-import": "^1.12.2",
  "less": "^3.10.3",
  "parcel-bundler": "^1.12.4"
},
"dependencies": {
  "antd": "^3.25.1",
  "react": "^16.11.0",
  "react-dom": "^16.11.0"
}

.babelrc

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd"
      },
      "antd"
    ]
  ]
}

.lessrc

{
  "javascriptEnabled": true
}

public/index.less

@import "../node_modules/antd/dist/antd.less";
@primary-color: purple;

entrptaher · 2019-11-18T10:05:12Z

I came back from the future for another project, and parcel-bundler is still not fixed. The only thing works with parcel is the one plugin I created above #907 (comment).

@davidnagli @DeMoorJasper, maybe we should re-open this issue and fix this asap. Because lots of new people are starting to use ant-design with parcel and getting a roadblock with less mostly because parcel does not read the less configuration.

It's a parcel issue. I vote to re-open this.

mischnic · 2019-11-22T22:21:35Z

I tried the setup in #907 (comment) and it seemed to build successfully.

Could someone post an updated example and what the expected behaviour is?

ghost · 2020-01-06T15:46:03Z

Has anyone found a solution I still can't use less ^3?

konsumer · 2020-03-21T22:52:51Z

@entrptaher 's solution above, while totally a hack, works awesome for me. This is what I do in a lot of projects, now. I think the asset-loader should probably read the .lessrc, and also maybe just have a default that enables javascriptEnabled. I have this come up with rsuite, ant, and a few others, and it seems to be a reasonable default.

pojntfx · 2020-04-18T07:31:36Z

So, #4475 fixes the issue! This allows for Antd etc. to be used:

package.json:

{
  "name": "parcel-ant",
  "devDependencies": {
    "@parcel/transformer-less": "^2.0.0-alpha.3",
    "less": "^3.11.1",
    "parcel": "2.0.0-nightly.225"
  },
  "dependencies": {
    "antd": "^4.1.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "scripts": {
    "start": "parcel index.html"
  }
}

.lessrc:

{
  "javascriptEnabled": true
}

index.less:

@import "antd/dist/antd.less";
@primary-color: purple;

App.js

import React from "react"
import { DatePicker } from "antd"
import "./index.less"

export default (props) => <DatePicker {...props} />

This is the result:

Works as expected!

lemondreamtobe · 2020-06-10T06:43:59Z

Apperently the LessAsset does not read the .lessrc file at all. I have zero clues at this moment.

However the fix was just one line one file.

I extracted the code and published as a npm module till they somehow fix it in future. Steps to follow:
yarn add -D parcel-plugin-less-js-enabled
Before:
➜  experiment-parcel-antd git:(master) ✗ yarn start
yarn run v1.13.0
$ parcel src/index.html
Server running at http://localhost:1234 
🚨  node_modules/antd/lib/form/style/index.less: Inline JavaScript is not enabled. Is it set in your options?
Now:
➜  experiment-parcel-antd git:(master) ✗ yarn start
yarn run v1.13.0
$ parcel src/index.html
Server running at http://localhost:1234 
✨  Built in 343ms.

it really works for me ! big thanks!

fayismahmood · 2020-07-09T09:03:58Z

I got works correctly!

my environment:
parcel-bundler: 1.12.3
less: 3.9.0
less-loader: 5.0.0
(antd: 3.19.5)
<project root>/.lessrc
{
  "javascriptEnabled": true
}
NOT "inlineJavaScript"

<project root>/src/index.less
@import "~antd/dist/antd.less";

@primary-color: #4caf50;

Thanks alot

avalanche1 · 2021-02-27T00:56:30Z

Still getting this error for Parcel 2.
Proposed solution doesn't work.

vollantre · 2021-05-10T23:40:21Z

same

Still getting this error for Parcel 2.
Proposed solution doesn't work.

Same here, please can anyone help

joshua-hashimoto · 2021-08-29T05:00:56Z

I still have the same problem too.
In my case it was working just fine like 4 days ago, but after I installed antd icon package it just started throwing errors. samething after uninstalling the package

xiemeilong · 2021-12-09T01:43:03Z

This issue is still exist in the latest parcel. I workaround by hard code to the @parcel/transformer-less. The .lessrc file is not readed all the time.

diff --git a/node_modules/@parcel/transformer-less/lib/loadConfig.js b/node_modules/@parcel/transformer-less/lib/loadConfig.js
index eb1f93e..f6f20f7 100644
--- a/node_modules/@parcel/transformer-less/lib/loadConfig.js
+++ b/node_modules/@parcel/transformer-less/lib/loadConfig.js
@@ -36,6 +36,7 @@ async function load({
 
   configContents.rewriteUrls = 'all';
   configContents.plugins = configContents.plugins || []; // This should enforce the config to be reloaded on every run as it's JS
+  configContents.javascriptEnabled = true;
 
   let isDynamic = configFile && _path().default.extname(configFile.filePath) === '.js';

avalanche1 · 2021-12-09T12:21:24Z

Guess, Antd and Parcel are simply not compatible.

parcel-bundler deleted a comment from vdfor Feb 28, 2018

davidnagli added the ❔ Question label Feb 28, 2018

chenshuai2144 mentioned this issue Apr 17, 2018

Less Inline Javascript is not enabled #1195

Closed

DeMoorJasper added 🐛 Bug and removed ❔ Question labels Jul 24, 2018

scharf added a commit to moxb/moxb that referenced this issue Aug 9, 2018

Downgrade less to 2.7.3 because parcel cannot handle version 3.x

b46756d

parcel-bundler/parcel#907 This fixes the examples...

DeMoorJasper closed this as completed Aug 20, 2018

This was referenced Apr 18, 2020

Ignore: url(#...) (behavior property) #3887

Merged

Ignore url(#...) (behavior property) in Less assets #4475

Merged

PAquaticus mentioned this issue Mar 7, 2022

@parcel/transformer-less: Inline JavaScript is not enabled. Is it set in your options? #7806

Closed

This was referenced Jun 29, 2022

RFC | less set javascriptEnabled true PlasmoHQ/plasmo#32

Closed

RFC | support antd theme PlasmoHQ/plasmo#65

Closed

ColdSauce mentioned this issue Jun 30, 2022

feat: support less PlasmoHQ/examples#9

Merged

crazyair mentioned this issue Aug 21, 2022

[RFC] webpack-like tilde resolves in less PlasmoHQ/plasmo#143

Closed

2 tasks

How to config less options #907

How to config less options #907

Comments

vdfor commented Feb 28, 2018 • edited by DeMoorJasper Loading

davidnagli commented Feb 28, 2018

chenshuai2144 commented Mar 6, 2018

davidnagli commented Mar 8, 2018

chenshuai2144 commented Mar 8, 2018

BeliefRC commented Mar 16, 2018

schtr4jh commented May 5, 2018 • edited Loading

y-takey commented May 23, 2018

schtr4jh commented May 23, 2018

y-takey commented May 23, 2018

DeMoorJasper commented May 23, 2018 • edited Loading

y-takey commented May 24, 2018 • edited Loading

viztor commented Jul 6, 2018

PierrickGT commented Jul 10, 2018

viztor commented Jul 15, 2018

lxwbr commented Aug 20, 2018

DeMoorJasper commented Aug 20, 2018 • edited Loading

fourcolors commented Jan 13, 2019

moodseller commented Feb 22, 2019 • edited Loading

urwork commented Mar 14, 2019

msereniti commented Mar 23, 2019

djamaile commented May 12, 2019

entrptaher commented May 22, 2019 • edited Loading

gabrielnoal commented May 22, 2019 • edited Loading

before

after

PS: I dont't know if this fix will break something later, but it works for now 👍

y-takey commented Jun 20, 2019

wangyongf commented Jul 13, 2019

ivanfilhoz commented Jul 27, 2019

imanish003 commented Sep 8, 2019 • edited Loading

chengsokdara commented Nov 12, 2019 • edited Loading

entrptaher commented Nov 18, 2019

mischnic commented Nov 22, 2019

ghost commented Jan 6, 2020

konsumer commented Mar 21, 2020

pojntfx commented Apr 18, 2020

lemondreamtobe commented Jun 10, 2020

fayismahmood commented Jul 9, 2020

avalanche1 commented Feb 27, 2021

vollantre commented May 10, 2021

joshua-hashimoto commented Aug 29, 2021

xiemeilong commented Dec 9, 2021

avalanche1 commented Dec 9, 2021

vdfor commented Feb 28, 2018 •

edited by DeMoorJasper

Loading

schtr4jh commented May 5, 2018 •

edited

Loading

DeMoorJasper commented May 23, 2018 •

edited

Loading

y-takey commented May 24, 2018 •

edited

Loading

DeMoorJasper commented Aug 20, 2018 •

edited

Loading

moodseller commented Feb 22, 2019 •

edited

Loading

entrptaher commented May 22, 2019 •

edited

Loading

gabrielnoal commented May 22, 2019 •

edited

Loading

imanish003 commented Sep 8, 2019 •

edited

Loading

chengsokdara commented Nov 12, 2019 •

edited

Loading