I'm using Renovate bot on my personal blog project. There are many dependencies in both package.json files (see one of them here). Renovate updates some of the dependencies, like Next.js, but is missing many others. When I run yarn upgrade-interactive today (Jan 30th 2023) I get the following (see screenshot):
Why has renovate not picked up on this? It has been quite some time since many of these packages were updated, while other packages with recent releases have been updated, so renovate obviously has done some scanning. I couldn't find anything in the documentation about this, so I though I'd ask here.
This is my renovate.json:
{
"extends": ["config:base"],
"packageRules": [
{
"matchUpdateTypes": ["minor", "patch", "pin", "digest"],
"automerge": true
},
{
"matchDepTypes": ["devDependencies"],
"automerge": true
}
],
"platformAutomerge": true
}
Also see renovate dashboard.
Hope everything is clear. Thanks in advance.
I have looked at the FAQ and searched Stack overflow.
Related
I know there are a lot of answers like this, this or this out there and some people may flag my question as duplicate, but believe me I am struggling with this because neither of them is working for me now. Those were working before but looks like the solution is depreciated or expired.
I have no idea about eslint whatsoever, the only thing I like about eslint is that it underlines the unimported/undeclared variables with red line, that's why I installed eslint extension in my VS Code editor.
Also, I am not opening the code directory directly in my VS Code, I have other projects too in the same workspace, e.g. I have a structure like this:
| -- some_folder
| | -- project_1
| | -- project_2
| ...files relating to both projects...
Starting a fresh Next.js project should not be coming up with any errors, don't know what am I doing wrong.
This is my .eslintrc.json:
{
"extends": "next"
}
And this is the .babelrc:
{
"presets": ["next/babel"],
"plugins": []
}
To tell exactly what type of solutions I already tried:
Adding next/babel in the .eslintrc.json
installing babel-eslint but nothing helped!
instead of this in eslintrc.json
{
"extends": "next"
}
use this
{
"next/babel","next/core-web-vitals",
}
I think this will fix the issue.
I am currently looking for a way to track time (in ms/sec) spent on Next.js building steps and write this information into json file. So in the end I would like to have something like
{
"js": 10000,
"css": 5000,
...
}
I could not find any tools available for solving this task.
There is also a /.next/trace file created during "next build" and containing some data like
[{"traceId":"0350c99bb05551a7","parentId":"2071643884994g71","name":"build-module-json","id":"89936a6d306d4411","timestamp":13930168804,"duration":6869574, ...}]
but Im not sure if its data could be useful as there is no detail information on this file in docs.
Thanks for any help in advance
found a solution speed-measure-webpack-plugin
When I'm trying to build the Next.Js app then the below error is coming with a successful build. This error is showing when I deploy the app in Vercel.
error - ESLint: Failed to load config "next/babel" to extend from. Referenced from: /vercel/path0/.eslintrc.json
This is my .eslintrc.json
{
"extends": ["next/babel","next/core-web-vitals"]
}
I've also added .babelrc
{
"presets": ["next/babel"],
"plugins": []
}
I also found a solution when I change the eslintrc.json file like below:
{
"extends": ["next","next/core-web-vitals"]
}
then no error is showing while building the app. But there is another problem showing when I use the above solution and the problem is:
Parsing error: Cannot find module 'next/babel'
This is shown in all the imports with red marks.
I tried to search the solution but did not found any solution for this.
I think, this might have to do with this weird hackfix that is being touted in a bunch of places that tells you to place next/babel in your eslint config file for some reason (e.g. here).
It probably was a hackfix for an old bug in older next.js versions. But as of (at least) summer 2022, it makes little sense to do so, considering that next/babel is a babel preset, not an eslint preset. Instead, in recent next.js versions, just reset your .eslintrc.json:
{
"extends": [
"next"
]
}
With this setup, things don't error out, as of next#12.2.*.
You also might want to take a look next's eslint customization options. For example, some people might be confused why eslint is seemingly not working.
In that case, consider this solution and the next.js docs on eslint.
If you have this problem, but you did not copy+paste your .eslintrc.json from the interwebz, then you might need to describe your situation in more detail.
my problem has been solved by this code. just copy and paste it into the eslintrc.json file.
{
"extends": ["next/babel","next/core-web-vitals"]
}
Or just replace "next" and "next/core-web-vitals" to
"plugin:#next/next/recommended"
https://nextjs.org/docs/basic-features/eslint
I had this issue when working with TurboRepo. The solution for me was to add next as a devDependency in the root of the monorepo.
Same Turborepo issue using pnpm. This solved it for me: https://github.com/vercel/next.js/issues/40687#issuecomment-1275184829
Essentially add this to your settings.json
// .vscode/settings.json
{
"eslint.workingDirectories": [
{ "pattern": "apps/*/" },
{ "pattern": "packages/*/" }
]
}
I am using PHP Intelephense(version 1.3.7) which is the latest version and my VS Code is up to date
There was no problem before but a few days ago, it keeps on highlighted all my wordpress function name
I tried to downgrade my PHP Intelephense but the situation still exist..
Any help will be appreciate
You have to add "wordpress" to the intelephense.stubs array setting in your VS Code settings file. This array should probably also have many other stubs listed as well. For example: ("wordpress" is at the bottom)
// VS Code settings.json
{
// ... other settings here ...
"intelephense.files.maxSize": 3000000,
"intelephense.stubs": [
"apache",
"bcmath",
"bz2",
"calendar",
"com_dotnet",
"Core",
"ctype",
"curl",
"date",
"dba",
"dom",
"enchant",
"exif",
"FFI",
"fileinfo",
"filter",
"fpm",
"ftp",
"gd",
"gettext",
"gmp",
"hash",
"iconv",
"imap",
"intl",
"json",
"ldap",
"libxml",
"mbstring",
"meta",
"mysqli",
"oci8",
"odbc",
"openssl",
"pcntl",
"pcre",
"PDO",
"pdo_ibm",
"pdo_mysql",
"pdo_pgsql",
"pdo_sqlite",
"pgsql",
"Phar",
"posix",
"pspell",
"readline",
"Reflection",
"session",
"shmop",
"SimpleXML",
"snmp",
"soap",
"sockets",
"sodium",
"SPL",
"sqlite3",
"standard",
"superglobals",
"sysvmsg",
"sysvsem",
"sysvshm",
"tidy",
"tokenizer",
"xml",
"xmlreader",
"xmlrpc",
"xmlwriter",
"xsl",
"Zend OPcache",
"zip",
"zlib",
"wordpress"
]
}
You can also take a look at these github issues:
Include wordpress stubs that can be enabled in intelephense.stubs #833
[DOC]: Better way to get WordPress intellisense #2
The quick fix for this is simply to add WordPress to the Intelephense: Stubs list.
1: Press (Ctrl+Shift+X) to the extensions bar on the left and search for PHP Intelephense.
2: Click the settings icon of the extension and choose Extension Settings.
3: Scroll down to the bottom to see the list of Stubs.
4: Click on Add Item and choose wordpress from the list.
If the changes are not affected, try to close and reopen Vscode.
This will solve the issue with built-in WordPress Functions, However, it will not recognize any functions from installed plugins.
Maybe I'm missing something, but I never have this problem, and I think the reason is just that I open my whole WordPress site directory in VS Code at once.
Are you opening only your theme directory?
If so it makes sense that these functions are missing since they aren't in the project.
Open the whole site and this should go away. You'll also get all your theme and plugin functions imported correctly.
Adam allalou and drwatsoncode
are right and they work but just a reminder, to be sure that the changes are effected, don't forget to close and open your VsCode editor again.
you just need to add WordPress item to the Intelephense: Stubs from the extension setting.
WARNING in chunk AccessRights~Groups~Navigator [mini-css-extract-plugin]
Conflicting order between:
css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/Icon/_circle/Icon_circle.scss
css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/Counter/Counter.scss
css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/NavigatorToolbar/NavigatorToolbar.scss
what does this mean and how to fix it? Thank you in advance!
"assets-webpack-plugin": "3.9.5",
"autoprefixer": "9.1.0",
"css-loader": "1.0.0",
"file-loader": "1.1.11",
"image-webpack-loader": "4.3.1",
"mini-css-extract-plugin": "0.4.2",
"postcss-advanced-variables": "2.3.3",
"postcss-clearfix": "2.0.1",
"postcss-conditionals": "2.1.0",
"postcss-extend": "1.0.5",
"postcss-functions": "3.0.0",
"postcss-hexrgba": "1.0.1",
"postcss-import": "12.0.0",
"postcss-loader": "2.1.6",
"postcss-media-minmax": "3.0.0",
"postcss-nested": "3.0.0",
"postcss-sassy-mixins": "2.1.0",
"postcss-simple-vars": "4.1.0",
"postcss-size": "2.0.0",
"postcss-urlrewrite": "0.2.2",
"source-map-loader": "0.2.3",
"string-replace-loader": "2.1.1",
"style-loader": "0.22.0",
"url-loader": "1.0.1",
"webpack": "4.16.5",
"webpack-cli": "3.1.0",
"webpack-dev-server": "3.1.5",
It can easily become an annoying bug! I can see it being reported in every framework -- e.g. in issue #5372 in create-react-app, issue #250 in the mini-css-extract-plugin itself, etc.
I spent 6 hours debugging it (including putting console.log in the source code of mini-css-extract-plugin where it omits the Warning) and here are my findings.
What is this plugin?
The mini-css-extract-plugin of webpack is a CSS-bundler. It is there to gather CSS pieces and put them into .css chunks for you. Just like what the whole Webpack build is doing for .js files.
Why is it happening to me?
You are running into it because all of these conditions apply to you:
You have Vue SFC or CSS-in-JS, that results in your CSS content being in different files (which are called modules).
Your webpack configurations are set to do some sort of code-splitting optimizations, (e.g. via split-chunks-plugin) which puts your modules into chunks for lazy-loading in client-side (e.g. 1000 files, into 10 chunks, that are only downloaded by the user when the user needs them.) So, this plugin goes over how webpack has bundled your modules and tries to create its own CSS bundles out of them.
There is an "Order Conflict" in your imports!
What is "Order Conflict" now?
It's "order" + "conflict." Let's review them.
Part 1) Order
This plugin is trying to run a topological sorting algorithm (this part of the source code) to find out in which order it should put the CSS rules in its output bundles so that it doesn't cause any problem.
The problem is, unlike JavaScript that you clearly export your objects from a file/module (in no order, as they are named), in CSS it will just get appended (like an array of strings) and so the order of the imports can actually matter!
Let's say you have two modules:
// module a.js
<div>hi, I am A!</div>
// ... in CSS section of the same file:
div { color: red; }
// module b.js
<div>hi, I am B!</div>
// ... in CSS section of the same file:
div { color: blue; }
And then you have a page that includes both of them them.
// page S (for Straight)
import a from "a.js"
import b from "b.js"
So far, so good! The CSS output can be
div { color: red; }
div { color: blue; }
which means all the <div>s should have blue font color.
However, if instead of that page S, we had a page had was importing them in reverse order, it would be:
// page R (for Reverse)
import b from "b.js"
import a from "a.js"
and the output would be equal to
div { color: blue; }
div { color: red; }
which means all the <div>s should have red font color.
This is why the order of imports matters.
Part 2) Conflict
Now, what should be the output CSS if you have both page S and page R?
Note that, unlike this silly example of applying a wild rule on all <div> elements, you might actually have some sort of scoped CSS or a CSS naming convention like BEM in place that would prevent such thing to become an issue. But, this plugin doesn't go over actually parsing and understanding the content of the CSS. It just complains that "Hey dude! I don't know whether a should come before b, or b should come before a!"
Solutions
You basically have two solutions, just like any other problem! Either solve it or kill the problem it.
Solution 1: Fix it
The error message is very hard to read and sometimes it doesn't even output the proper details of modules. (for me it's like , , , , , , as for some reason my ChunkGroups don't have a .name property; so zero information.) And it can be extremely messy if you have more than ~20 files.
Anyways, if you have got time this approach is the best you can try.
Notes:
You can also import PageS in PageR (or the other way around, whatever) to explicitly tell the plugin to pick this order and stop nagging! It might be easier than going over all the places that include one or another and move the lines up and down.
IMPORTANT NOTE 1: IF YOU THINK SORTING YOUR IMPORT LINES ALPHABETICALLY CAN HELP, SEE THIS EXAMPLE and THIS COMMENT (that even a Visual Code plugin cannot help)!
IMPORTANT NOTE 2: The Order Conflict is NOT NECESSARILY IN THE SAME FILE. It can be anywhere among the ancestors of the two or more files! So, can be a huge pain to find out.
IMPORTANT NOTE 3: IT'S NOT GOING TO BE FUTURE-PROOF! So, even if you move a few import lines up and down, tomorrow it might happen to another developer in your team.
So, TL;DR, if you found yourself spending more than two hours on this, try solution #2 below.
Solution 2: Kill it
If it's not actually causing a problem in production and your final output, you can suppress this error via passing an ignoreOrder flag to the options object of the plugin in your Webpack config.
Notes:
If you are using a third-party build-wrapper on top of WebPack (like Quasar's that I am using), you can use webpack chain modify arguments technique to feed this flag into the existing configuration.
It's a good last resort! Good luck. :)
CSS cares for rule order.
Q: What does the warning mean?
A: There are some order conflicts while packaging your CSS modules.
Q: What is the cause?
A: The plugin (mini-css-extract-plugin) tries to generate a CSS file but your codebase has multiple possible orderings for your modules. From the warning you showed, it seems you have used Icon before Counter in one location and Counter before Icon in another location. The plugin needs to generate a single CSS file from these and can't decide which module's CSS should be placed first. CSS cares for rule order so this can lead to issue when CSS changes without reason.
So not defining a clear order can lead to fragile builds, that's why it displays a warning here.
Q: How to fix?
A: Sort your imports to create a consistent order. If you cannot sort for some reason, for example, you have libraries in your project beyond your control or when the order of these styles doesn't matter, you can ignore the warning by making changes as suggested in other answers.
mini-css-extract-plugin version 0.8.0 included a new option ignoreOrder. You can check https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings
new MiniCssExtractPlugin({
ignoreOrder: true,
}),
Please see issue reported on Github.
const webpackConfig = {
stats: {
// warn => /Conflicting order between:/gm.test(warn)
warningsFilter: warn => warn.indexOf('Conflicting order between:') > -1 // if true will ignore
}
}
There is now an NPM package named #webkrafters/ordercss which tackles this issue at the root.
Full disclosure: I initially created it to solve this very problem in one of my apps but decided to expand it and share it with everyone.
If this package helps anyone, please share it with others.
Thanks and good luck!
NB: setting MiniCssExtractPlugin ignoreOrder property would suppress the warnings but may not resolve the underlying issues especially for those using modular css. This could result in unpredictability of the rendered view.