search

SolidZORO / next-plugin-antd-less

🎩 Use Antd (Less) with Next.js v12, Zero Dependency on other Next-Plugins.
MIT License
345 stars 48 forks source link

Inline JavaScript is not enabled #17

Closed Changsik00 closed 3 years ago

Changsik00 commented 3 years ago

HI

next-plugin-antd-less occurred in my environment

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled

package.json 

"dependencies": {
    "@apollo/client": "^3.3.3",
    "antd": "^4.9.4",
    "deepmerge": "^4.2.2",
    "graphql": "^15.4.0",
    "next": "10.0.3",
    "react": "17.0.1",
    "react-dom": "17.0.1"
    "next-plugin-antd-less": "^0.1.4",
  },
SolidZORO commented 3 years ago

Sorry, I can't reproduce your problem, can you put the code into this project https://github.com/SolidZORO/mkn and try?

azgorov commented 3 years ago

I got the same error when I tried to add plugin in nx default next.js project. @SolidZORO Just out of curiosity - Did you ttry to use plugin in NX monorepo? Maybe it is not possible at all...

SolidZORO commented 3 years ago

I know NX, but I feel that he is too complicated, do not want to try again, you can think of another way to put.

SolidZORO commented 3 years ago

Your problem, which I encountered a long time ago, is that javascriptEnabled is not enabled, or that you are using the plugin in the wrong way?

Mar-he commented 3 years ago

Just stumbled upon this, as I am suffering from the same error message. I wanted to reproduce this cloning https://github.com/SolidZORO/mkn and working up from there, but this project currently does not build:

error - ./src/styles/global.less ((webpack)/css-loader/cjs.js??ref--5-oneOf-3-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-3-2!(webpack)/resolve-url-loader??ref--5-oneOf-3-3!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-3-4!./src/styles/global.less) TypeError: this.getOptions is not a function

There might be something wrong

SolidZORO commented 3 years ago

@Servellia I just tested mkn's clone and it works. Can you show your package.json and node version?

Mar-he commented 3 years ago

the package.json should be identical to yours:

{
  "name": "mkn",
  "description": "make React project with Next.js and typescript",
  "version": "0.1.1",
  "license": "MIT",
  "author": "Jason Feng <solidzoro@live.com>",
  "private": true,
  "scripts": {
    "-------------------------------- LINT ----": "----",
    "lint": "tsc --noEmit && eslint src/**/*.ts{,x}",
    "fix": "yarn run lint-js --fix",
    "tsc-check": "tsc -v && tsc --noEmit",
    "format": "prettier --write src/**/*.ts{,x}",
    "-------------------------------- TOOL ----": "----",
    "versionup": "standard-version -r patch",
    "versionup:minor": "standard-version -r minor",
    "versionup:major": "standard-version -r major",
    "versionup:init": "standard-version --first-release",
    "-------------------------------- DEV  ----": "----",
    "dev": "next dev",
    "-------------------------------- PROD ----": "----",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "antd": "^4.11.2",
    "autoprefixer": "^10.2.4",
    "axios": "^0.21.0",
    "classnames": "^2.2.6",
    "css-loader": "^5.0.1",
    "less": "^4.1.1",
    "next": "10.0.6",
    "next-plugin-antd-less": "^0.2.0",
    "normalize.css": "^8.0.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-helmet-async": "^1.0.7",
    "react-icons": "^4.1.0",
    "react-use": "^17.1.0"
  },
  "devDependencies": {
    "@commitlint/config-conventional": "^11.0.0",
    "@types/classnames": "^2.2.11",
    "@types/eslint": "^7.2.6",
    "@types/eslint-plugin-prettier": "^3.1.0",
    "@types/node": "^14.14.22",
    "@types/prettier": "^2.1.6",
    "@types/react": "^17.0.0",
    "@typescript-eslint/eslint-plugin": "^4.14.2",
    "@typescript-eslint/parser": "^4.14.2",
    "babel-plugin-import": "^1.13.3",
    "babel-plugin-module-resolver": "^4.0.0",
    "commitlint": "^11.0.0",
    "eslint": "^7.19.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-airbnb-typescript": "^12.0.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^4.3.8",
    "less-vars-to-js": "^1.3.0",
    "lint-staged": "^10.5.3",
    "prettier": "^2.2.1",
    "pretty-quick": "^3.1.0",
    "typescript": "^4.1.2"
  }
}
node --version
v12.18.4

Win10 2004

SolidZORO commented 3 years ago

@Servellia

I can't reproduce this problem, on my macOS mkn the project is working and can be deployed to vercel normally, maybe your environment or dependency version is not right, clean up the global installation of npm in try?

khalibloo commented 3 years ago

I also just ran into this in a new nextjs app. Oddly enough, logging my webpack config from within nextjs config shows that javascriptEnabled is set to true. @SolidZORO looking through your mkn repo, I can't find where you imported antd.less in the project. Can you shed some light on that also?

SolidZORO commented 3 years ago

@khalibloo use Windows?

khalibloo commented 3 years ago

Yes. Windows 10 x64

SolidZORO commented 3 years ago

@khalibloo

I tested on a new windows computer by going to nodejs.org and downloading the latest version 14, then downloading mkn and installing it, and both dev and prod worked fine.

So I don't know what's wrong with you.

Can you provide more information about the error?

image

khalibloo commented 3 years ago

sorry I wasn't clear previously. I'm running the mkn project just fine. But with a new nextjs app, I get the same javascript not enabled error. I was trying to understand how your mkn project was able to use antd styles without importing it. I was hoping that might give me a clue into the "javascript not enabled" error.

SolidZORO commented 3 years ago

@khalibloo missing this?

https://github.com/SolidZORO/mkn/blob/573038fd6f3fcd149cc742129d7190e15d1f6ad1/babel.config.js#L8
khalibloo commented 3 years ago

Nope, I already added that. So that's what babel is there for.

SolidZORO commented 3 years ago

@khalibloo @Servellia

Check to see if this is the problem. https://github.com/SolidZORO/next-plugin-antd-less/issues/20#issuecomment-774698410

khalibloo commented 3 years ago

Yes! That turned out to be the root cause. next-plugin-antd-less@0.2.2 uses less-loader@8.0.0. Downgrading to 0.2.0 which uses less-loader@7.3.0 fixed the issue for me. I noticed in your mkn project, you used 0.2.0 as well. Thanks for that hint. I can finally proceed.

khalibloo commented 3 years ago

For verification, I installed 0.2.2 on the mkn project and it also broke, though with a different but related error.

SolidZORO commented 3 years ago

next-plugin-antd-less@^0.3.0 fixed.