I am using i18n - aurelia's wrapper of i18next with the following configuration:
instance.i18next.use(Backend);
return instance.setup({
backend: {
loadPath: 'assets/locales/{{lng}}/{{ns}}.json',
},
detectFromHeaders: false,
lng: 'bg',
fallbackLng: 'bg',
ns: ['app', 'dp', 'management'],
defaultNS: 'app',
fallbackNS:'app',
attributes: ['t', 'i18n'],
useCookie: false,
getAsync: false,
debug: false
});
I have a component that switches to a different language via the setLocale(language) function. It works fine for the translations, however, when I switch between the languages for some reason i18next adds the translation.json to my namespaces although I don't use it and it makes an xhr call to get it and I get a 404 error for translation.json - a namespace I don't even want in the first place. Is there an option to remove it altogether from the namespaces?
Thanks in advance
The issue is not part of Aurelia-I18N but one of i18next itself. The only workaround I found so far is to set the fallbackLng to false.
{
backend: {
loadPath: './locales/{{lng}}/{{ns}}.json',
},
lng : 'de',
ns: ['foo'],
defaultNS: "foo",
attributes : ['t','i18n'],
fallbackLng : false, <----- SET THIS TO FALSE TO AVOID A SEARCH FOR translation NS
debug : false
}
This is a known issue that can be tracked here: https://github.com/aurelia/i18n/issues/47
Related
I have script "lint:prettier": "prettier --check --ignore-unknown \"**/*.*\"",. Then I run it, I get successful result but in github actions I getting erorrs
Github action lint-action workflow:
- name: Run linters
run: npm run lint:prettier
.prettierrc.js:
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 2,
endOfLine: 'auto',
};
.eslintrc.js:
module.exports = {
parser: '#typescript-eslint/parser', // Specifies the ESLint parser
extends: [
'plugin:react/recommended', // Uses the recommended rules from #eslint-plugin-react
'plugin:#typescript-eslint/recommended', // Uses the recommended rules from the #typescript-eslint/eslint-plugin
'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
],
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
ecmaFeatures: {
jsx: true, // Allows for the parsing of JSX
},
},
rules: {
'react/prop-types': [2, { ignore: ['children'] }],
},
settings: {
react: {
version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
},
},
};
How can I fix it?
I am trying to transpile my ES6 code via Babel, I am using the next/babel preset along with preset-env and I'm using the browsers: defaults target.
The NextJS preset comes with #babel/plugin-proposal-object-rest-spread in its plugins array, I'm wondering why I am getting an error when testing on edge that says Expected identifier, string or number, and when looking in the compiled JS for the error, I see it happens when {...t} occurs.
Here is my babel.config.js:
module.exports = {
presets: [
[
'next/babel',
{
'#babel/preset-env': {
targets: {
browsers: 'defaults'
},
useBuiltIns: 'usage'
}
}
]
],
plugins: [
'#babel/plugin-proposal-optional-chaining',
'#babel/plugin-proposal-nullish-coalescing-operator',
['styled-components', { ssr: true, displayName: true, preprocess: false }],
[
'module-resolver',
{
root: ['.', './src']
}
]
],
env: {
development: {
compact: false
}
}
};
Any help on this would be greatly appreciated!
In the end my problem was related to a package that was not being transpiled by babel. My solution was to use NextJS' next-transpile-modules plugin to get babel to transpile the package code into something that would work on the browsers I need.
Here's an example of my NextJS webpack config with the package I need transpiled specified:
const withTM = require('next-transpile-modules');
module.exports = withTM({
transpileModules: ['swipe-listener']
});
SCRIPT1028: Expected identifier, string or number error can occur in 2 situations.
(1) This error get trigger if you are using trailing comma after your last property in a JavaScript object.
Example:
var message = {
title: 'Login Unsuccessful',
};
(2) This error get trigger if you are using a JavaScript reserved word as a property name.
Example:
var message = {
class: 'error'
};
solution is to pass the class property value as a string. You will need to use bracket notation, however, to call the property in your script.
Reference:
ERROR : SCRIPT1028: Expected identifier, string or number
I am using ESLint to lint my JavaScript. I am also using Knockout.js and Google Maps. The problem I ran into is ESLint doesn't recognize the google and ko variables.
My first attempt was to specify environments but I realized (after reading the documentation and crashing eslint) that the list provided by the documentation is exclusive.
Then I tried specifying globals but no luck there as well.
So my question is, how can I make it so ESLint recognizes my Google Maps library and Knockout.js?
Defining globals in .eslintrc.js should work. The following is an example that supports jQuery $, Google (google, custom site search in our case), and Knockout.js (ko).
module.exports = {
root: true,
extends: [
'eslint:recommended'
],
env: {
"browser": true,
"commonjs": true,
"jquery": true
},
globals: {
"google": true,
"ko": true
}
};
The test case in fiddle is working with autoLoad: true but with autoLoad: false (line 86) the load() function called at line 161 in the TreePanel beforerender event does not load the data...
For (non tree) panels I allways have set autoLoad to false and load the store on render of the GridPanel and it works perfectly. I do it like this to prevent loading all the stores at the beginning (and to set filters sometimes).
The beforeload event of the store is preventing double-load.
Where is my fault for this TreeStore ? I am looking for a solution for a long time without any result...
There has been similar issue in Ext JS 4 explained here ExtJS 4. Hidden treepanel with autoload false .
What I did in your fiddle is that I just added the following
autoLoad: false,
root:{
//expanded: true, // optional
children: []
}
to line 91 in your store configuration. Everything worked magically.
I think I've solved your problem.
Use the root property for your TreeStore.
/*
* Store
*/
Ext.define('Chronos.store.Clockings', {
extend : 'Ext.data.TreeStore',
requires: [
//'Chronos.store.Session'
],
model : 'Chronos.model.Presence',
autoLoad : false, //true, // false,
//autoSync : true, // DEBUG
sortOnLoad : false,
pageSize : 0,
remoteFilter: true,
root: {
id: 'id',
expanded: true
},
listeners: {
load: function(treestore, records, success) {
console.log(Date(), 'clockings loaded: ', success, treestore);
},
beforeload: function (treestore) {
if(treestore.isLoading()) return false;
}
}
});
Hope this is what you are looking for!
i am using ES6 js files that are then compiled by gulp (browserify/babel), example of a ES6 file is:
I have a normal App.js that is used to set up the main window etc.. Then the html pages will use a main.min.js file that is basically made up with all my ES6 classes compiled into one file:
loader.es6 file
import Main from './pages/Main.es6'
new Main()
Main.es6 file
import Vue from 'vue';
export default class Main extends Vue{
constructor() {...}
.....
}
When compiled and run this all works fine and all is good... But as i thought if i want to implement the 'IPC', 'Remote' modules, i am having issues with compiling as they cannot find those modules, either through the require() or import.. methods within my classes.
so doing the following fails:
import Remote from 'remote'
import Main from './pages/Main.es6'
new Main()
or
var Remote = require('remote')
import Main from './pages/Main.es6'
new Main()
Is this possible to do or achieve, or nope needs more thought and going back to normal js please.
Any ideas / advice would be great thanks
EDIT: add the error details
An example file in question Main.es6
see the added var var Remote = require('remote')at the top this causes the following error.
even using import Remote from 'remote'
{ [Error: Cannot find module 'remote' from '/Volumes/DAVIES/ElectronApps/electron-vuejs-starter/resources/js/pages']
stream:
{ _readableState:
{ highWaterMark: 16,
buffer: [],
length: 0,
pipes: [Object],
pipesCount: 1,
flowing: true,
ended: false,
endEmitted: false,
reading: true,
sync: false,
needReadable: true,
emittedReadable: false,
readableListening: false,
objectMode: true,
defaultEncoding: 'utf8',
ranOut: false,
awaitDrain: 0,
readingMore: false,
decoder: null,
encoding: null,
resumeScheduled: false },
readable: true,
domain: null,
_events:
{ end: [Object],
error: [Object],
data: [Function: ondata],
_mutate: [Object] },
_maxListeners: undefined,
_writableState:
{ highWaterMark: 16,
objectMode: true,
needDrain: false,
ending: true,
ended: true,
finished: true,
decodeStrings: true,
defaultEncoding: 'utf8',
length: 0,
writing: false,
corked: 0,
sync: false,
bufferProcessing: false,
onwrite: [Function],
writecb: null,
writelen: 0,
buffer: [],
pendingcb: 0,
prefinished: true,
errorEmitted: false },
writable: true,
allowHalfOpen: true,
_options: { objectMode: true },
_wrapOptions: { objectMode: true },
_streams: [ [Object] ],
length: 1,
label: 'deps' } }
In my case, I'm using browserify with babelify, if I tried:
var remote = require('remote')
I would got error:
Error: Cannot find module 'remote' from xxx
But if I tried
var remote = window.require('remote')
It works.
import remote from 'remote' doesn't work, seems like browserify can't find those native modules not defined in package.json.
Well been playing and I have managed to get this to work in a way:
Basically i set the remote and ipc modules within the html page, then pass in those, into my class for that page.
main.html
<script>
var remote = require('remote');
var ipc = require('ipc');
new Main(ipc);
</script>
Main.js - Class File
export default class Main extends Vue{
constructor(ipc) {
....
ipc.send('listener here','message here');
.....
The files can be viewed within this Branch:
Honestly, the easiest way to solve this is to not minify your binaries or use browserify. Electron already has require in the global scope - all you need to do is run your files through Babel to ES6 => ES5 compile them (electron-compile makes this trivially easy too). Your import statement will get translated to a require, which Electron will automatically handle out of the box.
In general, a lot of optimization strategies that you're used to on the web like minification or concatenation are unnecessary or don't make sense in Electron, you can mostly just not do them!