I have a nuxt 3 app, where i want to set global styles via .less files.
nuxt.config.ts
css: [
"#/assets/less/main.less"
],
If i run yarn run dev everything works fine, but when i run
yarn run build (nuxt build) and yarn run preview(nuxt preview) the .less files are just not there. For some reason the build doesnt contain any of the styles from the .less files.
I tried to add the less-loader package (although as i know its not needed in nuxt3).
I guess the problem is around the difference of NODE_ENV production / develop,but im not sure how or what should i config to get the build involve the .less files.
here is my package.json
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"analyze": "nuxt analyze",
"cleanup": "nuxt cleanup"
},
"devDependencies": {
"#nuxtjs/eslint-config": "^11.0.0",
"#nuxtjs/eslint-config-typescript": "^11.0.0",
"#popperjs/core": "^2.11.6",
"bootstrap": "^5.2.2",
"dayjs": "^1.11.5",
"eslint": "^8.24.0",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"line-clamp": "^1.0.0",
"nuxt": "3.0.0-rc.10",
"vue": "^3.2.40"
},
"dependencies": {
"#microsoft/signalr": "^7.0.0",
"bootstrap-vue-3": "0.4.13",
"mitt": "^3.0.0",
"vue-disqus": "^5.1.0",
"vue-gtag": "^2.0.1",
"vue-next-masonry": "1.1.3",
"vue-tweet": "^2.0.2"
}
}
Related
Locally I can run npm run lint without issues on Windows. However, on my ubuntu gitlab runner I get followint error:
Failed to load plugin '#next/next' declared in '.eslintrc.json » eslint-config-next/core-web-vitals » /home/gitlab-runner/builds/iPXPkofu/0/isi/micat/front_end/node_modules/eslint-config-next/index.js': Unexpected token '.'
Referenced from: /home/gitlab-runner/builds/iPXPkofu/0/isi/micat/front_end/node_modules/eslint-config-next/index.js
The .eslintrc.json file is auto-generated and only contains:
{
"extends": "next/core-web-vitals"
}
I also tried with "extends": "next".
=> Is this a bug of next.js? If not, what can I do?
My package.json:
{
"name": "micat",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build && next export",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"bootstrap": "5.1.3",
"crossfilter2": "1.5.4",
"d3": "7.5.0",
"dc": "4.2.7",
"exceljs": "^4.3.0",
"next": "12.2.0",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"eslint": "8.18.0",
"eslint-config-next": "12.2.2",
"eslint-plugin-jest": "24.4.0",
"eslint-plugin-jsx-a11y": "6.6.0",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-react-hooks": "4.6.0",
"jest": "28.1.2",
"jest-cli": "27.2.0",
"jest-jasmine2": "27.2.0"
}
}
Accorrding to
https://github.com/vercel/next.js/discussions/38220
its due to different versions of nodejs
I installed nvm and updated nodejs from version 12.22 to to version 18.6.0 then deployed it for the other users (gitlab-runner)
n=$(which node);n=${n%/bin/node}; chmod -R 755 $n/bin/*; cp -r $n/{bin,lib,share} /usr/local
Also see
https://tecadmin.net/how-to-install-nvm-on-ubuntu-20-04/
https://dzone.com/articles/making-nodejs-available-to-all-users-with-nvm
I removed the node_modules folder with rm -r node_modules an reinstalled with npm install
=> npm run lint works now
I am currently working on a project where we agreed to use Ant Design library with NextJS and TypeScript
When I test locally using npm run dev everything looks alright, but on npm run build and npm run start the css looks a complete mess.
I tried overriding Ant Design default css using the !important property on various of different classes but I don't think that's a very good approach. Has anyone ever encountered such a problem before?
Here is the package.json file if that's relevant
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint src --ext js,ts,tsx",
"test": "jest --config ./configs/jest.config.js",
"prepare": "husky install"
},
"dependencies": {
"#ant-design/icons": "^4.7.0",
"antd": "^4.18.6",
"axios": "^0.25.0",
"next": "^12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#types/node": "17.0.12",
"#types/react": "17.0.38",
"babel-jest": "^27.4.6",
"concurrently": "^7.0.0",
"eslint": "8.7.0",
"eslint-config-next": "12.0.8",
"eslint-config-prettier": "^8.3.0",
"eslint-config-ts-react-important-stuff": "^3.0.0",
"eslint-plugin-prettier": "^4.0.0",
"husky": "^7.0.4",
"jest": "^27.4.7",
"jest-css-modules": "^2.1.0",
"pretty-quick": "^3.1.3",
"typescript": "^4.5.5"
}
}
Keystone fails to find dependencies while running yarn build inside a new Turborepo project.
Steps to reproduce
Install Turborepo in a new project npx create-turbo#latest
navigate to the apps folder or wherever you plan to install Keystone cd apps/
install keystone yarn create keystone-app
navigate back to the root directory cd ../
add .keystone/** to turbo.json Pipeline:
"build": {"dependsOn": [ "^build" ], "outputs": [ ".next/**", ".keystone/admin/.next/**" ]}}
build project from root directory cd ../ && yarn build
Observe error message from inside ./keystone
turbo.json
{
"pipeline": {
"build": {
"dependsOn": [
"^build"
],
"outputs": [
".next/**",
".keystone/admin/.next/**"
]
},
"dev": {
"cache": false
},
"clean": {
"cache": false
}
},
"globalDependencies": [
"tsconfig.json",
".prettierrc.json",
".eslintrc.json",
"Procfile"
]
}
package.json
{
"private": true,
"workspaces": [
"packages/*",
"apps/*"
],
"scripts": {
"build": "turbo run build",
"dev": "turbo run dev --no-cache --parallel --continue",
"lint": "turbo run lint",
"test": "turbo run test",
"clean": "turbo run clean && rm -rf node_modules",
"format": "prettier --write \"**/*.{ts,tsx,js,md}\""
},
"devDependencies": {
"prettier": "^2.5.1",
"turbo": "latest"
},
"packageManager": "yarn#1.22.18"
}
apps/keystoneCMS/package.json
{
"name": "logly-admin",
"version": "1.0.0",
"private": true,
"main": "keystone.ts",
"scripts": {
"dev": "keystone dev",
"start": "keystone start",
"build": "keystone build && keystone prisma migrate deploy",
"postinstall": "keystone postinstall"
},
"dependencies": {
"#emotion/css": "^11.7.1",
"#keystone-6/auth": "^1.0.1",
"#keystone-6/cloudinary": "^1.0.0",
"#keystone-6/core": "^1.1.0",
"#keystone-6/fields-document": "^1.0.1",
"#prisma/client": "^3.8.1",
"autoprefixer": "^10.4.2",
"dotenv": "^10.0.0",
"formik": "^2.2.9",
"postcss": "^8.4.7",
"tailwind": "^4.0.0",
"tailwindcss": "^3.0.23",
"typescript": "^4.5.4"
},
"engines": {
"node": "^14.15 || ^16.13"
}
}
Github issue for more context: https://github.com/keystonejs/keystone/issues/7518
Versions
Node: v16.13.1 (latest)
Keystone: v6 (latest)
Turborepo: 1.2.8 (latest)
I have been able to replicate this, and it looks to be an issue with the next version that npx create-turbo#latest installs and is pinned to. Running create-turbo installs next 12.0.8 and is pinned to that version. Keystone requires at least version 12.1.0.
When I changed my ./apps/web/package.json to:
"dependencies": {
"next": "^12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"ui": "*"
},
The error no longer occurred.
My package.json file is
{
"name": "learn-starter",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"export": "next export"
},
"dependencies": {
"#tailwindcss/typography": "^0.2.0",
"date-fns": "^2.16.1",
"geolib": "^3.3.1",
"google-map-react": "^2.1.3",
"graphql": "^15.3.0",
"graphql-request": "3.0.0",
"gray-matter": "^4.0.2",
"isomorphic-unfetch": "^3.0.0",
"libphonenumber-js": "^1.7.57",
"next": "9.3.5",
"next-seo": "^4.7.3",
"react": "16.13.1",
"react-animated-css": "^1.2.1",
"react-dom": "16.13.1",
"react-gtm-module": "^2.0.11",
"react-static-google-map": "^0.6.2",
"remark": "^12.0.1",
"remark-html": "^12.0.0",
"tailwindcss": "^1.7.6",
"use-position": "^0.0.7"
},
"devDependencies": {}
}
I am trying to use revaildate: 1 in getStaticProps but I am getting error saying
Error: The `revalidate` property is not yet available for general use.
To try the experimental implementation, please use `unstable_revalidate` instead.
As I can see in package.json file my nextjs version is 9.3.5
Can anyone help me what I should do to fix this.
Try using "unstable_revalidate" instead of "revalidate", because in nextjs version <9.5, "revalidate" keyword is not yet generalised.
I am developing an application by nuxtjs. I have installed the Admin SDK for Node.js to validate the user's token in the server side but when I import firebase-admin in the project I have the next issue. I have installed the modules child_process fs net tls but it didn' work.
WARNING Compiled with 4 warnings
20:30:20 warning in ./node_modules/grpc/src/grpc_extension.js
Critical dependency: the request of a dependency is an expression
warning in
./node_modules/grpc/node_modules/node-pre-gyp/lib/pre-binding.js
Critical dependency: the request of a dependency is an expression
warning in
./node_modules/grpc/node_modules/node-pre-gyp/lib/util/versioning.js
Critical dependency: the request of a dependency is an expression
warning in ./node_modules/hash-stream-validation/index.js
Module not found: Error: Can't resolve 'fast-crc32c' in
'C:\Users\ARSENIO\Desktop\Development\nuxt\project4\node_modules\hash-stream-
validation'
ERROR Failed to compile with 38 errors
20:30:20 These dependencies were not found:
child_process in ./node_modules/google-auth-library/build/src/auth/googleauth.js,
./node_modules/grpc/node_modules/detect-libc/lib/detect-libc.js
fs in ./node_modules/#google-cloud/storage/src/file.js, ./node_modules/#google-cloud/storage/src/bucket.js and 34 others
To install them, you can run: npm install --save child_process fs
The package.json file is:
{
"name": "project4",
"version": "1.0.0",
"description": "My gnarly Nuxt.js project",
"author": "Arsenio Aguirre",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"dependencies": {
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-beta",
"chart.js": "^2.7.2",
"child_process": "^1.0.2",
"cross-env": "^5.2.0",
"firebase": "^5.5.3",
"firebase-admin": "^6.0.0",
"flag-icon-css": "^2.9.0",
"font-awesome": "^4.7.0",
"fs": "0.0.1-security",
"js-cookie": "^2.2.0",
"net": "^1.0.2",
"node-sass": "^4.9.3",
"nuxt": "^2.0.0",
"sass-loader": "^6.0.7",
"simple-line-icons": "^2.4.1",
"tls": "0.0.1",
"vue-chartjs": "^3.4.0"
},
"devDependencies": {
"nodemon": "^1.11.0",
"babel-eslint": "^8.2.1",
"eslint": "^5.0.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-vue": "^4.0.0",
"eslint-config-prettier": "^3.1.0",
"eslint-plugin-prettier": "2.6.2",
"prettier": "1.14.3"
}
}