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
Related
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.
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.
You can import intents for watson conversation in CSV format, but there doesn't appear to be a way to export them (and really, I'm looking for the exact format that is needed to import them, but I would also like to know how to export).
There is no direct way to export. The best way to do it is to go to your project menu, and export as JSON.
After that, if you check in the JSON file, you will find the questions and intents. You can also get access to your entities this way as well (easier way to import entities).
example:
"intents":[{
"intent":"conditions",
"created":"2016-08-17T12:52:08.806Z",
"examples":[{
"text":"Are the winds dangerous?",
"created":"2016-08-17T12:52:08.859Z"
},
{
"text":"Are we expecting sunny conditions?",
"created":"2016-08-17T12:52:08.859Z"
},
{
"text":"How much rain will fall today?",
"created":"2016-08-17T12:52:08.859Z"
},
{
"text":"How much snow are we expecting?",
"created":"2016-08-17T12:52:08.859Z"
},
...
Oh of course I find the answer in the official documentation seconds after posting this question:
https://www.ibm.com/watson/developercloud/doc/conversation/intent_ovw.shtml
Essentially, it's a big list of:
example, intent-name
...
exampleN, intent-nameN
There is a subtlety here; the JSON download does provide all of the configuration details and can be edited programmatically, but when you upload the edited JSON to use changes, it creates a new workspace with the same name as the one you downloaded from. I'm too new to know if there's a way around this or if it even matters, but just thought I'd share. :)
I want to embed one my specific chart in dahsboard of kibana. For that I need inject my JS into Kibana source. I have followed by instructions https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md to provide test environment, but I have obtained an error after "./kibana --dev"
let _ = require('lodash');
^^^
node.js:201
throw e; // process.nextTick error, or 'error' event on first tick
^
SyntaxError: Unexpected strict mode reserved word
at Module._compile (module.js:429:25)
at Object..js (module.js:459:10)
at Module.load (module.js:348:32)
at Function._load (module.js:308:12)
at Array.0 (module.js:479:10)
at EventEmitter._tickCallback (node.js:192:41)
Can anybody help me with start environment, or advice. Probably, I am moving by wrong way...my general goal (inject my JS code into Kibana) can be reached by another approach.
Thanks
I have reached my general goal, and if it is right - I place here my approach. (also, as an answer for above question)
When I was seeking ways how to implement what I want (my own custom metrics in dashboard....only as training and for personal "sport interest" sake) - I had chosen next way.
First of all - you need pay attention on index.js, not small one but huge file (more than 5MB), it predominantly contains angularJS terms.
My steps was:
I put into HTML empty container for my metrics
<div class="metric_container"></div>.
HTML defines in index.js as
define('text!plugins/dashboard/index.html',[],function () { return '<div dashboard-app class="app-container dashboard-container">\n .....
you can try to search ctrl+F it over the index.js
I found variable with JSON data for charts (esResp)
I found watcher on changing it $scope.$watch('esResp', prereq(function (resp, pre Resp) {....
Put in the body of watcher my_function () call.
finished my_function() call, that contains completing HTML metric sample with renewed figures (from esResp JSON) and putting it into
metric_container
so, I can develop my own metrics, charts, and it will be renew, but ONLY based on information provided in charts.
So, If you need smth - you need firstly create appropriate chart because of data set for you own calculations and further visualization.
Something So.
I am sure, probably there is best way, but my was.
I have created a number of visualizations for Kibana 4.4.1, and once you have the right baseline, it is no big deal.
I encourage you to take a look at any of my sources, in order to know what has to be done (http://github.com/JuanCarniglia).
There are some basic files you need to have, and you have them, you just put them on the src/plugins directory, and restart kibana. If everything is fine, you get a new visualization on the list.
If you encounter any problems or need a more detailed description, send me a message or post it here and I'll try to explain with more detail.
For the life of me I can't make durandaljs work with Areas. I'm developing an application with multiple mini SPAs, but I'm not sure how to set up durandaljs to work with it. I wasn't able to find anything online that can drive me in the right direction. The only similar question I found was this one, which is very vague.
My goal is to separate each SPA within it's own folder like so:
App
--areas
----area1
------viewmodels
------views
----area2
------viewmodels
------views
The router doesn't seem to have the concept of areas and no matter how I map the routes I get 404s when I call router.activate('page1'); after mapping with router.mapRoute('page1'); durandal is trying to get /App/viewmodels/page1.js.
Changing it to:
router.mapRoute('areas/area1/viewmodels/page1');
router.activate('areas/area1/viewmodels/page1');
results in another 404 fetching App/viewmodels/areas/area1/viewmodels/page1.js
I've also tried many other combinations which I no longer remember and can't seem to get it to work.
Can someone please post a working example of how to setup durandaljs with the router plugin and multiple mini SPAs (areas)? A link to an article document would also suffice.
You can use viewLocator.useConvention - maybe something like this:
viewLocator.useConvention(
"areas/area1/viewmodels",
"areas/area1/views",
"areas/area1/templates"
);
One good thing to realize is that useConvention() works in conjunction with any existing require.config paths setting. In other words, if you set the require.config so that "viewModels" and "views" are mapped to the right folders, then all is well.
For example, the code snippet above is functionally equivalent to:
window.require.config({
paths: {
"viewModels": "areas/area1/viewmodels",
"views": "areas/area1/views",
"templates": "areas/area1/templates"
}
viewLocator.useConvention("viewmodels", "views", "templates");
I a similar structure implemented in my application. I think that you have to put this piece of code, to do the viewLocator works properly.
viewLocator.useConvention(); //You can do that in you main.js
You can see more information here: http://durandaljs.com/documentation/View-Locator/
Also I recommed you to look the code of viewLocator.js, especially, the code of useConventionMethod.
Other possibility is to override the method convertModuleIdToViewId, to make it works as you want. But I think that using useConvention methos is enought.