has anyone had a similar problem and maybe someone knows how to solve it
I use React + VitePWA and and I need to configure the workbox settings, so that any files with the extension.csv should use NetworkFirst strategy how can i understand is that url pattern problem or not
for example my url - https://testing.s3.eu-central-1.amazonaws.com/data.csv?x-id=GetObject
but i still get this from disk cache
globPatterns: ['**/*.{js,css,html}', '**/*.{svg,png,jpg,gif}'],
runtimeCaching: [
{
urlPattern: /data\/(.*?)/,
handler: 'NetworkFirst',
options: {
cacheName: 'interface-cache',
},
},
],
},
Related
I'm trying to set up plotly.js in nuxt but whatever I do I get this cryptic error
self is not defined
I tried to install plotly.js and plotly.js-dist same error shows.
I would prefer to make custom build so I tried like this in nuxt plugins:
// here we use custom partial bundle
import plotly from 'plotly.js/lib/core';
import barpolar from 'plotly.js/lib/barpolar';
export default function (_, inject) {
plotly.register([barpolar]);
inject('plotly', plotly);
}
but whenever I register nuxt plugin site crashes with aforementioned error.
Even not going down custom bundle route, and using dist lib still fails just the same.
I also tried not to employ nuxt plugins system but to import manually and to set up, same things happen.
I also added ify-loader as recommended here: https://github.com/plotly/plotly-webpack
and this is my nuxt.config.js in regards to webpack plugin:
build: {
extend(config, { isClient }) {
console.log('config :>> ', config);
config.module.rules.push({
test: /\.js$/,
use: [
'ify-loader',
'transform-loader?plotly.js/tasks/compress_attributes.js',
],
});
},
},
still no luck.
I presume this is problem with webpack 5 and plotly.js not working well together in default setup but I have no idea how to solve this.
Help appreciated.
The reason why this wasn't working is that plotly tried to access document, and in SSR that would obviously fail.
So to fix this I just had to assign plugin in client only mode like this:
plugins: [
// other plugins
{ src: '~/plugins/plotly', mode: 'client' },
],
and it worked.
when I build my Gatsby website using datas fetched with "gatsby-source-wordpress-experimental" plugin, then I can see during build that the plugin fetch tags:
"success gatsby-source-wordpress Tag - 91.763s - fetched 502"
There's many tags and it costs a lot of time, but I don't need it / use it in my project.
I setup a Gatsby configuration in gatsby-config.js file like so to avoid fetching tags:
{
resolve: "gatsby-source-wordpress-experimental",
options: {
url: "https://my.website.io/graphql",
type: {
Post: {
limit: 100,
},
},
excludedRoutes: ["**/tags", "**/taxonomies", "**/users"], // <= see here excluded routes
includedRoutes: ["**/products"],
},
},
But it still fetch tags. I think that I did that according to the docs but what I am doing wrong ?
Thanks !
According to the documentation you can pass an array to exclude the field names like:
{
resolve: `gatsby-source-wordpress-experimental`,
options: {
excludeFieldNames: [`tag1`, `tag2`],
},
},
Besides, excludedRoutes is a configuration only allowed in gatsby source-wordpress, not in the experimental version.
I am converting a grunt + requireJS build process to webpack. We have something like this:
require.config({
shim:{
'popover': {
deps: ['tooltip']
},
'tooltip': {
deps: ['jquery']
}
}
})
Where we are specifically saying that tooltip depends on jquery so load jquery first. Popover depends on tooltip so load tooltip beforehand.
How do I translate this configuration into webpack 4 ? I've searched through the web trying to see if there are anything similar enough. Webpack's shimming doesn't do inter-library dependency. I don't see anything in the documentation too ...which surprised me much.
I have find articles (https://gist.github.com/xjamundx/b1c800e9282e16a6a18e)
that suggest of use import-loader to achieve such effect. So my config is like this:
module:{
strictExportPresence:true,
rules:[
{ parser: { requireEnsure: false } },
{ oneOf:[...bunch of stuffs for different file types] },
{ test : /tooltip/, loader: 'imports-loader?$=jquery' },
{ test : /popover/, loader: 'imports-loader?tooltip' }
]
also have the appropriate aliases in config set up.
the error I am getting it the browser is Constructor undefined on line
"Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype ..."
so tooltip library isn't being loaded before popover is.
I also don't see any new code added by webpack, which I think this could be my first problem since imports-loader supposedly add the specified library into popover module right ?
I am exactly seeing what's wrong with my approach anymore and exhausted a lot of resources online. I am sure someone had to deal with this type of problem before, please shade some light for me. Thanks!
You should provide tooltip and popover in resolve.alias section:
resolve: {
alias: {
"jquery": "lib/jquery-x.x.x",
"tooltip": "lib/tooltip-x.x.x",
"popover": "lib/popover-x.x.x"
}
}
Otherwise webpack won't be able to resolve modules to shim by imports-loader. Also, please note that you misspelled imports-loader in your configuration.
As per swagger documentation,
Swagger-UI accepts configuration parameters in four locations.
From lowest to highest precedence:
The swagger-config.yaml in the project root directory, if it exists, is baked into the application
configuration object passed as an argument to Swagger-UI (SwaggerUI({ ... }))
configuration document fetched from a specified configUrl
configuration items passed as key/value pairs in the URL query string
I have tried to put swagger-config.yaml in root pat of application but its not working.
I have followed swagger Installation steps and its working correct.
but steps for swagger custom config is not working. I have kept files as below,
swagger-ui
|--swagger-config.yaml
|--index.html
swagger-config.yaml
url: "https://petstore.swagger.io/v2/swagger.json"
dom_id: "#swagger-ui"
validatorUrl: "https://online.swagger.io/validator"
oauth2RedirectUrl: "http://localhost:3200/oauth2-redirect.html"
index.html
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
//url: "https://petstore.swagger.io/v2/swagger.json",
//dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
Any idea if I am missing anything ?
As mentioned in this Github's issue thread now only .json files are accepted for conf. Probably too late but it can help looking for the answer at November 2021.
I also have this issue. From the document, it seems we don't need to config anything in index.html if use swagger-config.xml, actually, it doesn't work from my side, I have not find the reason.
But if use configUrl instead, it works.
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
//url: "https://petstore.swagger.io/v2/swagger.json",
//dom_id: '#swagger-ui',
configUrl: "../swagger-config.yaml",
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
And it can be configured to support the array.
---
urls:
- url: "https://petstore.swagger.io/v2/swagger.json"
name: "url1"
- url: "https://petstore.swagger.io/v2/swagger.json"
name: "url2"
I'm at the beginning of building my project and I get some errors that couldn't realize why they are being occured.
You can see contents of my app.profile.js file below. I execute
"build profile=../../app.profile.js -r" this line from command prompt and I get no error after the process is done. My problem is if I copy the release(built) version of these packages to the place where the unbuilt versions exist, I get too many javascript errors like "Error: multipleDefine". Even if I copy only dojo, dojox and dijit folders, same errors are keep occuring.
When I look the differences between built and unbuilt of two js files, (for example dojo/Deferred) the only difference I realize is this:
//built
define("dojo/Deferred", [
"./_base/lang",
"./promise/CancelError",
"./promise/Promise"
], function(
define([
"./_base/lang",
"./promise/CancelError",
"./promise/Promise"
], function(
So I'm a little bit stucked at the beginning. I want to try using layers to reduce http requests as soon as possible but I need some help about the situation I mentioned. Any help will be greatly appreciated, thanks.
app.profile.js:
var profile = {
basePath: "..",
layerOptimize: "shrinksafe.keepLines",
optimize: "shrinksafe",
releaseDir: "./release",
hasReport: true,
packages: [
{
name: "dojo",
location: "./dojo"
},
{
name: "dijit",
location: "./dijit"
},
{
name: "app",
location: "./app"
},
{
name: "dtk",
location: "./dtk"
},
{
name: "dojox",
location: "./dojox"
}
],
layers: {
"app/layers/core": {
include: [
"dojo/_base/declare",
"dtk/core/ILifeCycle",
"dtk/core/AppConfig",
"dtk/core/TopicContext",
"dtk/core/NavigationContext",
"dojo/require",
"dojo/_base/Deferred",
"dojo/DeferredList",
"dojo/_base/lang"
]
},
"app/layers/appcontext": {
include: [
"dtk/core/AppContext"
],
exclude: [
"app/layers/core"
]
}
}
};
The Dojo builder will add a module identifier to every module definition unless you tell it not to. This can produce the multipleDefine error.
From the builder documentation:
insertAbsMids (default = undefined)
[truthy] Causes the transform to ensure that every AMD define
application includes a module identifier argument.
[falsy] The
transform does nothing to the module identifier argument in define
applications. In particular, a falsy value doe not cause the
transform to remove a module identifier argument that exists in the
source code.
I was having exactly the same problem until I added insertAbsMids:false to my profile.
eg:
var profile = {
basePath: "./",
releaseDir: "release",
action: "release",
layerOptimize: "shrinksafe",
optimize: "shrinksafe",
cssOptimize: "comments",
mini: false,
insertAbsMids: false,
packages: [
{ name: "dijit", location :"dijit" },
{ name: "dojox", location :"dojox" },
{ name: "dojo", location :"dojo" }
]
}
If your problem is with the id that gets created in the AMD module define(id, [deps], factory)..
I was having a similar issue, I had to manually remove all the id's on the compressed files:
//built
define([
"./_base/lang",
"./promise/CancelError",
"./promise/Promise"
], function()
OR, I had to require the module using the id instead.
For example, I was requiring a module:
require(["app/Dialog"])
which was different than the id added.
require(["demo/app/Dialog"])
It was the only way I got it to work. Anyone else knows how to remove the id or reason why we should always have an id? Not sure if this is relavent to your question, but since you showed the differences.
This will build a layer, requiering all modules needed to create the dojox.image.Gallery besides the components mentioned in the discardLayer.
layers: [ {
name: "../dojox/discardLayer.js",
discard: true,
dependencies: [
"dojox.image.Gallery",
"dojox.image.SlideShow",
"dojox.image.ThumbnailPicker"
]
},{
name: "../drops/layer.js",
layerDependencies: [ "../dojox/discardLayer.js" ],
dependencies: [
"dojox.image.Gallery"
]
Try instead of exclude, use the layerDependencies key - i think the exlude looks for app/layers/core from withing your dojo_source tree and not in dojo_release tree.. So at time of build youre excluding an unknown component.
The above sample is something i've used to be able to override the 3 discarded components elsewhere, however it doesnt suit your needs.
You would need to Not set discard for your core layer and instead simply set it as a dependency (which will exclude all dependencies to the layers, which has allready been built).
Then, depending on which version of dojo youre using - you should call dojo.require("layers.core"); dojo.require("layers.appcontext") or require(["layers/core", "layers/appcontext"], function() { }); to assert that those layers are present.
Before using anything from their dependencies, pull in the requirement with another require call, e.g. dojo.require("dijit.form.Button"); new dijit.form.Button({ ... });. The layer will fill the components into a cached hash (dojo.cache) and to make sure theyre declared fully, pull in the requirement.