For some reason Aurelia requires lng as an option when configuring i18N but the tradition I18N options do not. The problem is, when I try to configure it the use language detection, the lng option is overriding the detected language. How can you use language detection?
plugin(PLATFORM.moduleName('aurelia-i18n'),
(instance) => {
let aliases = ['t', 'i18n'];
TCustomAttribute.configureAliases(aliases);
instance.i18next
.use(LngDetector)
.use(XHR);
return instance.setup({
lng:'en',
attributes: aliases,
backend: {
loadPath: './locales/{{lng}}/{{ns}}.json',
},
detection : {
order: ['querystring', 'navigator', 'cookie', 'localStorage', 'htmlTag'],
},
debug: false,
fallbackLng: 'en'
});
This should be fixed with one of the more recent versions of the plugin
Related
i define the process.config in vite.config.js such as this
define: {
'process.env': {
publishDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
version: pkg.version,
title: pkg.title
}
},
in dev mode ,it works,
but in prod mode, the process.config is unfound.
Because you are not doing things as vite documentation suggests:
Type: Record<string, string>
For example, process.env.FOO and __APP_VERSION__ are good fits. But process or global should not be put into this option.
it's implemented as straightforward text replacements without any syntax analysis
The map should be a string to string, not string to object. So you can write:
define: {
'process.env.publishDate': JSON.stringify(dayjs().format('YYYY-MM-DD HH:mm:ss'))
},
I am kicking off a new project with a new Serverless TypeScript monorepo! Used the aws-nodejs-typescript template, which gave a serverless.ts config file. After some weeks, I am now getting the nice warning below from Serverless on command line:
Serverless: Deprecation warning: Starting with next major version, API Gateway naming will be changed from “{stage}-{service}” to “{service}-{stage}”.
Set “provider.apiGateway.shouldStartNameWithService” to “true” to adapt to the new behavior now.
More Info: https://www.serverless.com/framework/docs/deprecations/#AWS_API_GATEWAY_NAME_STARTING_WITH_SERVICE
Ok! Looks great, and I like the new naming. And since it’s a new project, better to apply the new naming now, before we release anything. However, it looks like the TypeScript definitions are rather strict, and do not seem to allow for the new variable yet:
Loading failed with: TSError: ⨯ Unable to compile TypeScript:
serverless.ts(44,7): error TS2322: Type ‘{ minimumCompressionSize: number; shouldStartNameWithService: true; }’ is not assignable to type ‘ApiGateway’.
Object literal may only specify known properties, and ‘shouldStartNameWithService’ does not exist in type ‘ApiGateway’.
awsProvider.d.ts(51, 9): The expected type comes from property ‘apiGateway’ which is declared here on type ‘Provider’
Is there a way to set the new property without reverting everything to YAML, which would be somewhat painful at this point?
Update 1
Many thanks to #NexGen for the pointer! Here is a minimal serverless.ts (emphasis on the TS!) showing the solution.
import type { Serverless, ApiGateway } from 'serverless/aws';
const serverlessConfiguration: Serverless = {
service: {
name: 'foo',
},
frameworkVersion: '2',
custom: {
webpack: {
webpackConfig: './webpack.config.js',
packager: 'yarn',
includeModules: true,
},
alerts: {
stages: ['stage', 'prod'],
definitions: {
functionErrors: { treatMissingData: 'notBreaching' },
},
alarms: ['functionErrors'],
},
},
package: {
individually: true,
},
plugins: [
'serverless-webpack',
'serverless-jest-plugin',
'serverless-plugin-aws-alerts',
],
provider: {
name: 'aws',
runtime: 'nodejs12.x',
region: 'us-west-2',
stage: "${opt:stage, 'dev'}",
apiGateway: {
minimumCompressionSize: 1024,
shouldStartNameWithService: true,
} as ApiGateway,
environment: {
AWS_NODEJS_CONNECTION_REUSE_ENABLED: '1',
},
},
};
module.exports = serverlessConfiguration;
It is really simple to apply this change, all what you need to do is to add this to your serverless.yml file.
provider:
apiGateway:
shouldStartNameWithService: true
provider: {
name: 'aws',
runtime: 'nodejs12.x',
apiGateway: {
shouldStartNameWithService: true
} as ApiGateway,
stage: 'dev'
}
I want to integrate responsive-loader into my Nuxt.js project which runs in SPA mode. (Optional I want to add Vuetify Progressive Image support also).
It will be a static hosting with Netlify.
Versions:
"nuxt": "^2.3.4"
"responsive-loader": "^1.2.0"
"sharp": "^0.21.1"
I found some solutions how to do it (https://stackoverflow.com/a/51982357/8804871) but this is not working for me.
When I run npm run build
I get an error message: "TypeError: Cannot set property 'exclude' of undefined"
My build section looks the following:
build: {
transpile: [/^vuetify/],
plugins: [
new VuetifyLoaderPlugin()
],
extractCSS: true,
/*
** Run ESLint on save
*/
extend(config, { isDev, isClient, isServer }) {
// Default block
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
if (isServer) {
config.externals = [
nodeExternals({
whitelist: [/^vuetify/]
})
]
}
// Default block end
// here I tell webpack not to include jpgs and pngs
// as base64 as an inline image
config.module.rules.find(
rule => rule.loader === "url-loader"
).exclude = /\.(jpe?g|png)$/;
/*
** Configure responsive-loader
*/
config.module.rules.push({
test: /\.(jpe?g|png)$/i,
loader: "responsive-loader",
options: {
min: 350,
max: 2800,
steps: 7,
placeholder: false,
quality: 60,
adapter: require("responsive-loader/sharp")
}
});
}
}
The error is probably found in this section:
config.module.rules.find(
rule => rule.loader === "url-loader"
).exclude = /\.(jpe?g|png)$/;
Like said I get this error message: "TypeError: Cannot set property 'exclude' of undefined".
I run this project along with vuetify. I also would like to enable the Progressive image support together with responsive loader. Does anybody know how to setup both rules together?
https://github.com/vuetifyjs/vuetify-loader#progressive-images
The easiest way to integrate responsive-loader into a Nuxt.js project is to use this module: https://www.npmjs.com/package/nuxt-responsive-loader
Disclaimer: I created the module
The problem with your config that it relies on rule.loader property but rule can be defined in use or oneOf config sections as well.
Another one problem is that nuxt internal config has several rules with url-loader(for images, videos, fonts ...).
In your case the rule, you tried to find, has use section and url-loader is defined there, that's why your find function found nothing and threw this error:
{
"test": /\.(png|jpe?g|gif|svg|webp)$/,
"use": [{
"loader": "url-loader",
"options": {
"limit": 1000,
"name": "img/[hash:7].[ext]"
}
}]
}
About responsive-loader, you should remove extensions you want to process with responsive-loader from url-loader rule to avoid unexpected behavior and conflicts, here is extend function working example:
extend(config, ctx) {
let imgTest = '/\\.(png|jpe?g|gif|svg|webp)$/';
// find by reg ex string to not rely on rule structure
let urlRule = config.module.rules.find(r => r.test.toString() === imgTest);
// you can use also "oneOf" section and define both loaders there.
// removed images from url-loader test
urlRule.test = /\.(svg|webp)$/;
config.module.rules.push({
test: /\.(png|jpe?g|gif)$/,
loader: "responsive-loader",
options: {
// place generated images to the same place as url-loader
name: "img/[hash:7]-[width].[ext]",
min: 350,
max: 2800,
steps: 7,
placeholder: false,
quality: 60,
adapter: require("responsive-loader/sharp")
}
})
}
Yes, it looks dirty, but I think it's only way for now to change some loader.
What about vuetify - I think both loaders will conflict with each other and probably the solution is to use single loader that will work with your images.
Hope it helps.
Update for Nuxt >= 2.4.0:
They modified the rules array please update the following line:
let imgTest = '/\\.(png|jpe?g|gif|svg|webp)$/i';
Then the code should work normally again.
I'm having trouble with setting up dojo. Anything defined in the dojo config seems to correctly load using the localhost:8080/Scripts/foo.js path. However if I then try to load a module without this, say:
require(['foo'], function (_foo) { });
Then the client fails the request, with the attempted path being localhost:8080/foo.js. Obviously wrong.
What do I need to change?
// Configuration for the dojo AMD module loader
dojoConfig = {
baseUrl: "/Scripts",
packages: [{
name: 'esri',
location: 'esri'
}, {
name: 'dojo',
location: 'dojo/dojo'
}, {
name: 'dojox',
location: 'dojo/dojox'
}, {
name: 'dijit',
location: 'dojo/dijit'
}, {
name: 'jquery',
location: '.',
main: 'jquery-2.0.2'
},
Thanks.
Either of these will solve your problem:
Set dojoConfig.tlmSiblingOfDojo = false.
Define 'foo' as a package with an explicit location.
Have a look at this link : http://dojotoolkit.org/documentation/tutorials/1.6/dojo_config/
Maybe the change from packages to modulePaths would help you.
Otherwise i would define the packages on the ordinary way :
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
regards
I'm trying to get ESRI maps working with Durandal and came across this link in the Durandal docs DurandalEsri
This seems to work but now Durandal is having problems finding some of my .js files. If I leave the following dojoConfig out my scripts are found but then the maps won't work.
`var dojoConfig = {
baseUrl: './',
async: true,
tlmSiblingOfDojo: true,
parseOnLoad: false,
aliases: [['text', 'dojo/text']],
packages: [
{ name: 'esri', location: '//serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri' },
{ name: 'dojo', location: '//serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dojo' },
{ name: 'dojox', location: '//serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dojox' },
{ name: 'dijit', location: '//serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit' },
{ name: 'durandal', location: 'App/durandal' },
{ name: 'views', location: 'App/views' },
{ name: 'viewmodels', location: 'App/viewmodels' },
{ name: 'lib', location: 'App/lib' }
]
};`
My app structure looks like this:
App
durandal
lib
services
viewmodels
views
So in my shell.js file if I try to pass in 'lib/config' I get a 404 because it tried to find the config file at localhost/lib/config.js instead of localhost/dashboard/app/lib/config.js
If I pass 'dashboard/app/lib/config' to shell.js the file will be found, but it doesn't seem like I should have to specify the entire path, since 'durandal/system' and anything else under the 'durandal' folder get found correctly.
Any ideas???
I encountered a similar problem using AMD module loading with Esri. I solved it using a configuration similar to yours but with the following baseurl:
baseUrl: location.pathname.replace(/\/[^/]+$/, '') + '/path/to/app/main'
As described in Jeffrey Grajkowski's answer to my question here: https://stackoverflow.com/a/15390919/1014822
So for my scenario of Durandal + Esri + Dojo, I had to leave out the require.js file that is included with Durandal and use the dojo AMD loader. Unfortunately I have no idea what future problems this might cause.
More info can be found here