search

parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.5k stars 2.27k forks source link

How to config less options #907

Closed vdfor closed 6 years ago

vdfor commented 6 years ago

When using less3, how to enable inline javaScript?

davidnagli commented 6 years ago

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

chenshuai2144 commented 6 years ago

lessrc no working

davidnagli commented 6 years ago

@chenshuai2144 Please open a separate issue

@vdfor We don’t support inline JavaScript yet

chenshuai2144 commented 6 years ago

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

BeliefRC commented 6 years ago

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

schtr4jh commented 6 years ago

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

y-takey commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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

DeMoorJasper commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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

PierrickGT commented 6 years ago

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 commented 6 years ago

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

lxwbr commented 6 years ago

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

DeMoorJasper commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

Solution for webpack example:


    loader: 'less-loader',
        options: {
            javascriptEnabled: true
        }
urwork commented 5 years ago

seems .lessrc take no effect

msereniti commented 5 years ago

Why issue is closed? The problem still exists

djamaile commented 5 years ago

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

entrptaher commented 5 years ago

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

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 commented 5 years ago

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 image

after

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

Print screen image

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

y-takey commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Same here. It works!

imanish003 commented 5 years ago

Solution for webpack example:


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

This solution worked for me

chengsokdara commented 5 years ago

@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 commented 4 years ago

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 https://github.com/parcel-bundler/parcel/issues/907#issuecomment-494668029.

@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 commented 4 years ago

I tried the setup in https://github.com/parcel-bundler/parcel/issues/907#issuecomment-511130343 and it seemed to build successfully.

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

ghost commented 4 years ago

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

konsumer commented 4 years ago

@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 commented 4 years ago

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:

Screen Shot 2020-04-18 at 09 31 04

Works as expected!

lemondreamtobe commented 4 years ago

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

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 commented 4 years ago

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 commented 3 years ago

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

vollantre commented 3 years ago

same

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

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

Same here, please can anyone help

joshua-hashimoto commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

Guess, Antd and Parcel are simply not compatible.