The bounty expires in 3 days. Answers to this question are eligible for a +50 reputation bounty.
SnazzyPencil is looking for a more detailed answer to this question.
I am getting this error message :ScriptExternalLoadError: Loading script failed.
(missing: http://localhost:3005/remoteEntry.js).
when trying to load a remote app from the container app in development.
I have this optimization (when I put them in comment everything works) :
optimization:{
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: module => (module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/) || [])[1]
}
}
},
Because the runtime.js was be split into a separate chunk, but your remoteEntry.js need it. So you can comment the runtimeChunk: 'single', or you can see this solution: concat-runtime
Related
when I try to build a gatsby app on netlify, I'm having this error that is generated by a 3rd party module called react-water-wave.
This is the error
I've already implemented a null loader on gatsby-node.js:
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html" || stage === "develop-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /react-water-wave/,
use: loaders.null(),
},
],
},
})
}
}
This is how is coded the gatsby-plugin-emotion on gatsby-config.js
plugins: [
{resolve: `gatsby-plugin-emotion`,
options: {
// Accepts the following options, all of which are defined by `#emotion/babel-plugin` plugin.
// The values for each key in this example are the defaults the plugin uses.
sourceMap: true,
autoLabel: "always",
labelFormat: `[local]`,
cssPropOptimization: true,
}
}]
react-water-wave seems to be discontinued, the last commit is from 3 years ago and it has been reported with some incompatibilities during SSR and React version as it is inferred from https://github.com/homerchen19/react-water-wave/issues/14 and https://github.com/homerchen19/react-water-wave/issues/27.
It seems to don't work with React versions greater than 17.
That said, try playing (downgrading) with React-core versions (which can potentially lead to other errors) or try finding another alternative.
This is very picky of me, I know, but I have a large Angular application where many files are covered at 100% or pretty darn close to it, and I want to exclude those results, so I can just deal with the ones I need to and don't have all the extra noise.
I don't want to exclude files by name because if they change they may go below the OK threshold.
My karma.conf.js (I'm aware I may not need some of the plugins, this is a shared file by the team):
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('#angular-devkit/build-angular/plugins/karma')
],
reporters: ['progress', 'coverage'],
coverageReporter: {
reporters: [
{type: 'text'},
{type: 'text-summary'},
]
},
browsers: ['ChromeHeadless'],
preprocessors: {'**/*.ts': ['coverage']},
restartOnFileChange: true,
});
};
and I'm gonna try to attach a screenshot here of my sample output in the type: 'text' coverageReporter:
I've tried searching SO and karma / karma-coverage documentation, but I only can find excluding files/paths specifically by name, or updating thresholds, but the latter seems to be only for determining what colors show up. Thank you~
EDIT: And since I only have one file per directory, would also be useful to not duplicate the numbers by printing them for the directory AND the one file under it. Thinking I may just have to dig into the weeds and create a pull request or something.
For this you can generate coverage reports in HTML format. There you will get option to sort files based on code-coverage.
To enable such reports you will have to do update coverageReporter property in your karma configurations -
coverageReporter: {
includeAllSources: true,
dir: 'coverage/',
reporters: [
{type: 'text'},
{type: 'text-summary'},
{type: 'html', subdir: 'html/'}
]
},
Reports will be generated within coverage/html folder.
I upgraded to the newest Chart.JS version 3.0.2. and I'm trying to get a time series chart to render. Here is my config:
{
type: 'line',
data: {
datasets: [{
data: dataForChart
}]
},
options: {
scales: {
x: {
type: 'time'
}
}
}
}
I have imported the module like this:
import ChartJS from 'chart.js/auto';
The error I'm getting is:
Error: This method is not implemented: either no adapter can be found or an incomplete integration was provided.
Any tips on what I could be making wrong?
Here is a code sandbox with that problem: https://codesandbox.io/s/throbbing-cdn-j6q2u?file=/src/App.js
You need to install and import an adapter, in your case it's moment adapter for time series
npm install moment chartjs-adapter-moment --save
then import it in your component:
import 'chartjs-adapter-moment';
for more info about adapters, check this
This answer comes a bit late but for everyone who stumbles here: You need a date adapter. Find a full list here
Once you installed i.e. date-fns via npm install date-fns chartjs-adapter-date-fns --save in your root directory you have to do two things to make it work in your React project:
Add this at the top of your file import 'chartjs-adapter-date-fns'; and import { enUS } from 'date-fns/locale';
Inside your options:
options = {
...
scales: {
x: {
type: 'time',
// add this:
adapters: {
date: {
locale: enUS,
},
},
}
},
...
}
You need an adaptor as stated above. Look here: https://github.com/chartjs/chartjs-adapter-date-fns#cdn
One option is to add the following cdn links:
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
As stated in your error and the documentation you need an adapter to convert the dates to date objects, see documentation: https://www.chartjs.org/docs/latest/axes/cartesian/time.html#date-adapters
I think you should put list in x like below code.
scales: {
x: [{
type: 'time'
}]
}
I'm trying to split my build files in my webpack.config.js file, but my vendors file isn't being created at all. The remaining node_modules, which aren't react or moment files end up in the main.js. An example of a file that goes in main.js is ./node_modules/es-abstract. I put in my regex and filename in a regex checker, and it passes the test. I'm not sure what's going on; any help would be greatly appreciated it.
splitChunks: {
cacheGroups: {
moment: {
test: /[\\/]node_modules[\\/]((moment).*)[\\/]/,
name: 'moment',
chunks: 'all'
},
react: {
test: /[\\/]node_modules[\\/]((react).*)[\\/]/,
name: 'react',
chunks: 'all'
},
vendors: {
test: /[\\/]node_modules[\\/]((?!(moment|react)).*)[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
According to David Gilbertson, SplitChunks default settings only allows for three chunks. To solve this, these settings will need to be added to split chunks: maxInitialRequests: Infinity,
minSize: 0,
Despite using the Dojo build system, my app is still including a large number of javascript files which I would have hoped to be covered by the build.
Here's my build profile:
var profile = (function(){
return {
basePath: "./",
releaseDir: "release",
action: "release",
selectorEngine: "acme",
cssOptimize: "comments.keepLines",
packages:[{
name: "dojo",
location: "dojo"
},{
name: "dijit",
location: "dijit"
},{
name: "dojox",
location: "dojox"
},{
name: "my",
location: "my"
}],
layers: {
"my/admin": {
include: ['dojo/ready', 'dojo/dom', 'dojo/query', 'dojo/request/xhr', 'my/Form', 'my/Tree/Radio']
}
}
};
})();
The app is still including the following JS files on each request: my/Form.js (even though this is listed in the profile), dojo/fx/Toggler.js, dijit/_base.js, dijit/WidgetSet.js, dijit/_base/focus.js, dijit/_base/place.js, dijit/place.js, dijit/_base/popup.js, dijit/popup.js, dijit/BackgroundIframe.js, dijit/_base/scroll.js, dijit/_base/sniff.js, dijit/_base/typematic.js, dijit/typematic.js, dijit/_base/wai.js, dijit/_base/window.js.
my/Tree/Radio extends dijit/Tree, so I'm assuming a lot of the files above are dijit base files that are being loaded automatically by dijit.Tree. But surely the build tool should resolve dependencies like this and include them in the 'built' file?
I am using Dojo 1.8.3.
In dojo/fx, it dynamically looks up the Toggler with the comment
use indirection so modules not rolled into a build
Not sure why, but if you add dojo/fx/Toggler to the include of your build script, it should not make the additional xhr requests.
EDIT: Apparently dijit/Widget does something similar with dijit/_base, so you will want to add that to the includes as well.
http://trac.dojotoolkit.org/ticket/14262