I want to use the css/sass built-in feature in Next.js while I want to use ant design that use less. when I yarn dev
everything is work good but when I run yarn build
it has this error:
./node_modules/antd/lib/style/index.less
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
My project tree looks something like this :
src/
pages/
_app.tsx
index.tsx
styles/
index.scss
.bablerc
next.config.js
.bablerc:
{
"presets": ["next/babel"],
"plugins": [
[
"inline-react-svg",
{
"svgo": false
}
],
["import", { "libraryName": "antd", "style": true }]
]
}
next.config.js:
const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true"
});
const withPWA = require("next-pwa");
const withAntdLess = require("next-plugin-antd-less");
const settings = {
publicRuntimeConfig: {
BASE_URL: process.env.BASE_URL
}
};
module.exports =
process.env.NODE_ENV === "development"
? withBundleAnalyzer(settings)
: withBundleAnalyzer(
withPWA(
withAntdLess({
lessLoaderOptions: {
javascriptEnabled: true
}
})
)
);
tsconfig.json:
{
"compilerOptions": {
"baseUrl": "./src",
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"typeRoots": [
"./node_modules/@types",
"./@types"
],
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"./@types"
],
"exclude": [
"node_modules"
]
}
_app.tsx is something like this :
import React from "react";
import "styles/index.scss";
import "antd/dist/antd.css";
function MyApp(props) {
...
}
export default MyApp;
package.json:
"scripts": {
"lint": "eslint ./src --ext .js,jsx,.tsx,.ts --fix",
"type:gen": "dtsgen -o ./src/shared/api.d.ts ./BidopinAPI.v1.yaml",
"dev": "yarn type:gen && next -p 7000",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@ant-design/icons": "^4.3.0",
"@next/bundle-analyzer": "^10.1.3",
"@types/leaflet": "^1.7.0",
"@types/redux": "^3.6.0",
"antd": "4.15.0",
"antd-jalali": "^0.9.4",
"axios": "^0.19.2",
"babel-plugin-import": "^1.7.0",
"babel-plugin-inline-react-svg": "^1.1.2",
"babel-plugin-lodash": "^3.3.4",
"less": "^4.1.1",
"less-loader": "^5.0.0",
"lodash": "^4.17.19",
"next": "^10.0.4",
"next-plugin-antd-less": "^0.3.0",
"next-pwa": "^5.0.6",
"null-loader": "2.0.0",
"rc-picker": "^2.5.2",
"rc-util": "^5.6.6",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"sass": "^1.32.8"
},
"devDependencies": {
"@types/lodash": "^4.14.158",
"@types/node": "^13.13.2",
"@types/react": "^16.9.34",
"@typescript-eslint/eslint-plugin": "^3.6.1",
"dtsgenerator": "^3.3.0",
"eslint": "^7.7.0",
"eslint-config-airbnb-typescript": "^9.0.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.0.8",
"typescript": "^3.8.3"
}
Is there any solution? Appreciate any feedback :)