We Keep Coding

Problem with initialization prop custom type in Vue

I use custom prop types in Vue components, like:
import {Employee} from '#models/Employee'
...
props: {
employee: {
required: true,
type: Employee,
},
},
Overall it works as expected, and custom props are there for a while. But suddenly, I ran into Reference Error:
Uncaught ReferenceError: Cannot access 'Employee' before initialization
Line that causes error:
// EXPORTS
__webpack_require__.d(__webpack_exports__, "a", function() { return /* binding */ Employee_Employee; });
It's weird because it worked before, and props with other custom types are working. That may be related to the update of some npm packages (or node itself?). I need help finding the anchor point.
Update: other classes also stopped working, like: type: UserAvatar etc.
Employee.js
Employee class looks something like that.
const fields = [...]
export class Employee extends Model {
constructor(data = {}) {
super(fields, data)
...
}
}

Custom cypress commands is not assignable to parameter of type 'keyof Chainable<any>

In a .ts file I create a test to try and access a custom created command from command.js, createInbox function is underlined with red with the following message : Property 'createInbox' does not exist on type 'cy & EventEmitter
it.only('dsdsds', () => {
cy.createInbox().then((inbox) => {
console.log(inbox);
// { id: '...', emailAddress: '...' }
});
})
My command.js file look like this
const { MailSlurp } = require("mailslurp-client");
const mailslurp = new MailSlurp(Cypress.env("mailSlurpApiKey"));
Cypress.Commands.add("createInbox", () => {
return mailslurp.createInbox();
});
Cypress.Commands.add("waitForLatestEmail", (inboxId) => {
return mailslurp.waitForLatestEmail(inboxId);
});
I understand that I have to rename command.js to ts, however when I do that all custom commands is underlined with red with the following error :
Argument of type '"waitForLatestEmail"' is not assignable to parameter of type 'keyof Chainable
How could I fix this?

Solved by adding custom chainable interface to support folder
declare namespace Cypress {
interface Chainable {
createInbox(): Chainable<any>;
waitForLatestEmail(inboxId: number): Chainable<any>;
}
}

I had this problem aswell!
My solution:
I had my *.d.ts files located inside the cypress/support folder, right next to the *.ts files with all the custom commands. Moving those outside(!) the "support"-folder and into another one called "definitionFiles" (for example) worked beautifully!

Using Javascript Variables in scss

It's going to be awhile that I'm trying to find a solution to use javascript variables has scss value.
Let me explain my issue.
I use VueJs/Vuetify and I've got two entry point for my theme.
The first one is a json file like that :
module.exports = {
primary: { base: '#4d7cff', dark: '#2756d8', light: '#96b0fb' },
secondary: { base: '#00bda5', dark: '#209284', light: '#cef1ec' },
content: { base: '#37467a', dark: '#242c47', light: '#c3cbe6' },
danger: { base: '#e43858', dark: '#d22545', light: '#E36d83' },
success: { base: '#00c28d', dark: '#199c79', light: '#0bebae' },
accent: '#f5f8fa',
gradient: 'linear-gradient(45deg, #00bda5, #4d7cff)'
}
This file is required and use by vuetify two create custom color values and works perfectly.
The second one is a simple scss file :
// Theme colors
$color-primary-base: #4d7cff;
$color-primary-dark: #2756d8;
$color-primary-light: #96b0fb;
$color-secondary-base: #4d7cff;
$color-secondary-dark: #209284;
$color-secondary-light: #cef1ec;
$color-content-base: #37467a;
$color-content-dark: #242c47;
$color-content-light: #c3cbe6;
$color-danger-base: #e43858;
$color-danger-dark: #d22545;
$color-danger-light: #ff8097;
$color-success-base: #00c28d;
$color-success-dark: #199c79;
$color-success-light: #14e1a9;
$color-accent: #f5f8fa;
My goal would be to connect the json file with the scss variables to have one entry point for the entire app.
Why do this ?
Vuetify offers a scss variable overload system to modify the style of the components.
the idea would be to control this overload from the javascript file
In addition to that, due to vuetify limits, there are certains points where I must to control the color in a responsive context (for example a white header on desktop and blue on mobile) and therefore am obliged to use scss variables.
I've find this article on medium who at first sight seems to answers my problem.
But when I try to test it I've got the following error :
in ./src/assets/styles/vuetify.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'options'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (C:\Users\33770\Documents\Calimed\novalys-front\node_modules\schema-utils\dist\validate.js:96:11)
at Object.loader (C:\Users\33770\Documents\Calimed\novalys-front\node_modules\sass-loader\dist\index.js:36:28)
Vuetify.scss
#import './novalys/map.scss';
#import '~vuetify/src/styles/main.sass';
vue.config.js
const sass = require('node-sass')
const sassUtils = require('node-sass-utils')(sass)
const sassVars = require(__dirname + '/src/theme/index.js')
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `#import "#/assets/styles/novalys/map.scss";`,
options: {
functions: {
'get($keys)': function(keys) {
keys = keys.getValue().split('.')
let result = sassVars
let i
for (i = 0; i < keys.length; i++) {
result = result[keys[i]]
}
result = sassUtils.castToSass(result)
return result
}
}
}
}
}
},
transpileDependencies: ['vuetify']
}
Can someone here would help me to find a possible solution ?
I've heard about an inverse solution by exporting a scss variable like that
:export {
some-variable: 'some-value';
}
But my idea is to have the entry point in json not a scss file.
Thank you in advance !

TypeScript Resolve right Namspace failed

I've the problem that I'am using some external libs which has nearly equal namespaces like:
declare module Test.Internal.Blubb {
interface IAnzeige {
Option: Internal.AnzeigeOptionen.IAnzeigeOptionen;
}
}
declare module Internal.AnzeigeOptionen {
interface IAnzeigeOptionen {
AnzeigeX: number;
AnzeigeY: number;
}
}
and this code will not compile because it's showing the error:
Test.Internal has no exported member AnzeigeOptionen
the row:
Option: Internal.AnzeigeOptionen.IAnzeigeOptionen;
shows this error.
Is there a way to bypass this Problem?
I'm using TypeScript 1.4 and VS 2013 Update 4

The problem with the code is that when the compiler sees line Internal.AnzeigeOptionen, it tries to resolve Internal as Test.Internal due to namespace collision.
You can re-import the Internal module with another name outside your Test.Internal declaration.
import m = Internal;
declare module Test.Internal.Blubb {
interface IAnzeige {
Option: m.AnzeigeOptionen.IAnzeigeOptionen;
}
}
declare module Internal.AnzeigeOptionen {
interface IAnzeigeOptionen {
AnzeigeX: number;
AnzeigeY: number;
}
}

when trying to use PartLoader getting error "arguments.callee.base.call is not a function"

im trying to develop an standalone application with qooxdoo. i want to load each part
of GUI with PartLoader. i just want to load big group boxes when the user select the related menu item from the menu. but when i run the code (execute the part loading related function)
i got the error "arguments.callee.base.call is not a function". im using Firefox 3.6 on windows xp.
this is the my part loading code in Application.js:
qx.io.PartLoader.require(["part1"], function()
{
if (!this.__groupbox1)
{
this.__groupbox1 = new appname.Classname();
container.add(this.__groupbox1, {left:20, top:40});
}
}, this);
this is the Class code to be loaded:
qx.Class.define("appname.Classname",
{
extend : new qx.ui.groupbox.GroupBox,
construct : function()
{
this.base(arguments);
this._addContent();
},
members:
{
_addContent : function()
{
some_ui_parts;
this.add(some_ui.parts);
some_more_ui_parts;
this.add(some_more_ui_parts);
}
}
});
and this is the part of the config.jason related to PartLoader:
"jobs":
{
"common":
{
"packages" :
{
"parts" :
{
"boot" :
{
"include" : [ "${QXTHEME}", "appname.Application" ]
},
"part1" :
{
"include" : [ "appname.Classname" ]
}
}
}
}
}
note: i just replaced real appname & Classname with appname.Classname short.
i searched for this error but i could not find anything related.

You have to change the lines
qx.Class.define("appname.Classname",
{
extend : new qx.ui.groupbox.GroupBox,
to
qx.Class.define("appname.Classname",
{
extend : qx.ui.groupbox.GroupBox,
When you define a new class and extend it the "new" operator is not necessary. More infos about can be found at the Classes documentation at the qooxdoo wiki.