I've created a fresh project with Meteor and I'm trying to integrate Semantic UI, I've walked through the steps here
https://semantic-ui.com/introduction/integrations.html
but I'm getting this problem after installing the sematicui and postcss packages :
While processing files with less (for target web.browser):
client/lib/semantic-ui/definitions/globals/site.import.less:29: variable
#googleProtocol is undefined
error: variable #googleProtocol is undefined
The Meteor version is 1.10.2, the packages.json looks like this;
{
"name": "test",
"private": true,
"scripts": {
"start": "meteor run",
"test": "meteor test --once --driver-package meteortesting:mocha"
},
"dependencies": {
"#babel/runtime": "^7.8.3",
"jquery": "^3.4.1",
"meteor-node-stubs": "^1.0.0"
},
"devDependencies": {
"autoprefixer": "^6.3.1",
"postcss": "^6.0.22",
"postcss-load-config": "^1.2.0"
},
"postcss": {
"plugins": {
"autoprefixer": {
"browsers": [
"last 2 versions"
]
}
}
}
}
I had this problem and it was painful. Apparently the problem is the version of less and some incompatibility with juliancwirko:postcss package and meteor (2.0 in my case). The solution I found was the following:
meteor npm install --save-dev postcss#6.0.22 postcss-load-config#1.2.0
npm install less#2.7.3 --save-dev
After these considerations, it finally worked.
Same error here, for me this worked:
meteor install semantic:ui
meteor install less#2.8.0
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 just created a new project using
npx create-next-app#latest --ts
And when I run
npm run lint
I got the error:
next lint
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
error - ESLint must be installed: yarn add --dev eslint
But eslint already installed!
What could be?
Steps to reproduce:
npx create-next-app#latest --ts
cd app
npm install
npm run lint
My package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"lint:css": "stylelint '**/*.{css,tsx}'",
"format": "prettier '**/*' --write --ignore-unknown",
"prepare": "husky install"
},
"dependencies": {
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"#stylelint/postcss-css-in-js": "^0.37.2",
"#types/react": "17.0.31",
"eslint": "^8.0.1",
"eslint-config-next": "11.1.2",
"husky": "^7.0.4",
"postcss-syntax": "^0.36.2",
"prettier": "^2.4.1",
"pretty-quick": "^3.1.1",
"stylelint": "^14.0.0",
"stylelint-config-standard": "^23.0.0",
"stylelint-config-styled-components": "^0.1.1",
"typescript": "4.4.4"
}
}
This issue is related to eslint 8.0.1. Downgrade to 7.32.0.
You'll find more info in this open bug: https://github.com/vercel/next.js/issues/29961#issuecomment-945823476
This was a known issue and has been fixed now.
You can upgrade nextjs v12. source
If you still get the issue, try looking for the .eslintrc file to see if it already exists. If it does, delete it and re-run npm run lint. Doing so fixed my problem.
I've been trying to deploy my NextJS onto Vercel, but keep getting the following error:
19:07:34.256
> Build error occurred
19:07:34.257
Error: Failed to load config "next/babel" to extend from.
19:07:34.258
Referenced from: /vercel/path0/.eslintrc
19:07:34.258
type: 'Error',
19:07:34.258
messageTemplate: 'extend-config-missing',
19:07:34.258
messageData: { configName: 'next/babel', importerName: '/vercel/path0/.eslintrc' }
19:07:34.258
}
19:07:34.277
Error: Command "npm run build" exited with 1
Below is my .babelrc file:
{
"presets": ["next/babel"],
"plugins": []
}
My .eslintrc file:
{
"extends": ["next/babel"]
}
And my package-json file:
{
"name": "google-docs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#material-tailwind/react": "0.3.4",
"#next-auth/firebase-adapter": "^0.1.2",
"draft-js": "^0.11.7",
"firebase": "^8.9.1",
"next": "11.0.1",
"next-auth": "^3.27.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "^1.14.7",
"react-firebase-hooks": "^3.0.4"
},
"devDependencies": {
"autoprefixer": "^10.3.1",
"eslint": "7.32.0",
"eslint-config-next": "11.0.1",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.7"
}
}
Also, building the project locally is also not working because of the same error. How do I solve this issue? Thank you in advance.
For those who are wondering, the solution that I used is first to remove the "next/babel" from the extends array, as julio has suggested.
Then, I install babel-eslint:
npm i babel-eslint --save-dev
I then changed the entire .eslintrc file to this:
{
"parser": "babel-eslint"
}
And the build was successful! Credit goes julio and the answers from this thread:
Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint)
I´m currently working on a website using vue/cli 4.5.13 and firebase.
After trying to get a simple authentification site working, my npm run build fails with this message:
ERROR Failed to compile with 1 error
Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined
You may use special comments to disable some warnings. Use //
eslint-disable-next-line to ignore the next line. Use /*
eslint-disable */ to ignore all warnings in a file. ERROR Build
failed with errors.
I know this problem was asked here frequently but all the given solutions didn´t work for me.
So far i tried: npm install typescript#latest, npm uninstall #vue/component-compiler-utils,
npm install --dev #vue/component-compiler-utils#3.1.2, npm update vue-template-compiler and npm audit fix (--force).
my package.json looks like this:
"name": "my-website",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vue/component-compiler-utils": "^3.1.2",
"core-js": "^3.6.5",
"typescript": "^4.3.2",
"vue": "^3.0.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "^3.1.1",
"#vue/cli-service": "^3.5.3",
"#vue/compiler-sfc": "^3.0.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Try to delete node modules directory and then run
npm install
getting this message when using firebase-functions-test
npm WARN firebase-functions-test#0.1.3 requires a peer of
firebase-admin#^5.12.0 but none is installed
what changes I need to make in the package.json file to resolve this message
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"main": "build/index.js",
"scripts": {...},
"dependencies": {
"firebase": "^5.4.2",
"firebase-admin": "~6.0.0",
"firebase-functions": "^2.0.5",
},
"devDependencies": {
"firebase-functions-test": "^0.1.3",
"prettier": "^1.13.7",
"tslint": "~5.8.0",
"tslint-config-prettier": "^1.15.0",
"typescript": "~2.8.3",
}
}
if I change the "firebase-admin": "~6.0.0" to "firebase-admin": "^5.12.2
I get this one
npm WARN firebase-functions#2.0.5 requires a peer of
firebase-admin#~6.0.0 but none is installed. You must install peer
dependencies yourself.
What is the correct way to handle these warnings
following #DougStevenson recommendation, ignoring this error
It's probably OK to just ignore the warnings. I suspect that admin SDK
API didn't change so much in 6.0.0 that it would break
firebase-functions-test.