I am trying to add vue-cli to my already existing project (Vue 3 + TS + Webpack)
The problem is that when I try to build (vue-cli-service build) I have issues in the test files.
For example
error in tests/unit/components/someComponent.spec.ts:123:25
Property 'XXX' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, Record<string, any>, VNodeProps, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.
Is there a way so vue-cli doesn't try to validate the spec files or fix this?
Today I found the issue. In tsconfig.json I was including the files in /test/unit/**.ts. By removing it, it worked!
Related
I have a vue project which uses Vite in place of Webpack, and when I try to use import x from './src/assets/my/path/to/image.png' to resolve an image to compile-time URL, I am greeted by the following error message:
✘ [ERROR] No loader is configured for ".png" files: src/assets/my/path/to/image.png
The entire project is pretty close to the scaffold project given by npm init vue#latest (using vue3) so my vite.config.js is pretty basic:
export default defineConfig({
plugins: [vue(), VitePWA({})],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
build: {
manifest: true,
polyfillModulePreload: true,
}
});
What am I missing? How can I configure this? I can't find anything in Vite documentation about loaders.
I had a quite similar issue with my project that I couldn't really solve. The issue seemed that only initially loaded png files were added. Because I am new to Vite, my efforts with the vite.config.js were fruitless.
Instead, I found a different solution to import the assets (import img from '/path/to/img.png' ) in respective js files directly instead of vite.config.js. Since I used these assets for replacement images for toggling buttons, it was a quick fix. Maybe it helps you, too.
Update:
Changing: if(data.aliases?.[name2] !== void 0)
to: if(data.aliases != null && data.aliases[name2] !== void 0)
in the iconify .mjs file fixes the error, however this check occurs a lot of places, and is not viable. Any idea why I cant parse this type of null operator?
in ./node_modules/#iconify/vue/dist/iconify.mjs
Module parse failed: Unexpected token (99:21)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
My code:
<template>
<div>
<Icon icon="mdi-light:home" />
</div>
</template>
<script setup lang="ts">
import { Icon } from "#iconify/vue";
</script>
Iconify version:
"#iconify/vue": "^3.2.0"
using standard vue cli babel:
presets: ["#vue/cli-plugin-babel/preset"]
I have tried: in babel.config.js
module.exports = function override(config) {
config.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
});
return config;
}
same error
I tried to remove the .mjs file, forcing it to use regular .js file, this resulted in same error but with missing .js loader.
I have tried to use Iconify SVG framework but i get the same type of error where loader is missing for .js files.
Thanks for any feedback :)
Solution:
Downgrading to this version of Iconify "#iconify/vue": "^3.1.1" fixed the problem. This resulted however in a error regarding type declaration. This was fixed by changing VS code's typescript version to: Use workspace version
This is done by selecting a .ts file then pressing "shift+ctrl+p" and select the prompt of select typescript version.
Having the same error cloning from the repository and install dependencies for Vue 2 https://github.com/iconify/iconify
Solution:
Downgrading to this version of Iconify "#iconify/vue": "^3.1.1" fixed the problem. This resulted however in a error regarding type declaration. This was fixed by changing VS code's typescript version to: Use workspace version
This is done by selecting a .ts file then pressing "shift+ctrl+p" and select the prompt of select typescript version.
I'm having a problem trying to get code completion for Cypress while I'm using JS. I've tried following every bit of documentation I could found, but I don't find these comprehensive enough.
None of these worked for me, what finally gave me Intellisense was adding a tsconfig.json file to the Cypress folder, as per the Cypress docs:
{
"compilerOptions": {
"allowJs": true,
"baseUrl": "../node_modules",
"types": ["cypress"]
},
"include": ["**/*.*"]
}
I just added
"compilerOptions": {
"types": ["cypress"]
}
to the object in the tsconfig.json file that was in the root cypress directory. I then chose "Restart TS Server" from the Command Palette and that sorted things out for me.
This is because you installed Cypress via the .exe, which is not the recommended way of installing Cypress.
Cypress type definitions are only installed when you install cypress via npm
For VSCode to find the type definitions,
you should install cypress as a dev dependency to your project (preferred form of installation according to the docs):
npm i -D cypress
Hi I was able to set it on vs code by simple adding ///
I've written it previously with C from Cyberpress in lower case, after adding the C in upper case it solved my problem
How I get Cypress typings to work in vscode
I had problems getting Cypress intellisense to work too. My way to get intellisense is convoluted and probably wrong, but I didn't get it to work in any other way.
add a cypress.d.ts file in the root of my project with the following types syntax. This declare the cy type, so you get autocompletion for most Cypress stuff:
declare var Cypress: any;
interface CypressElement {
type(value: string, options?: any): CypressElement,
clear(options?: {force: boolean}): CypressElement,
click(options?: {force: boolean}): CypressElement,
should(...args: any): CypressElement,
selectValue(option: number, optionsClass: string):CypressElement,
fillInput(value: string):CypressElement,
eq(index: number): CypressElement,
contains(value: any): CypressElement,
within(...args: any): any,
trigger(...args: any): any;
first(): CypressElement;
}
declare var cy: {
get(select: any): CypressElement;
window(): Promise<any>;
visit(path: any): void;
request(options: any): Promise<any>;
wait(time: string | number): any;
server(): any;
route(...options: any): any;
log(...messages: string[]): any;
contains(selector: string, value: any): any;
stub(...args: any): any;
on(event: string, callback: any): any;
url(): CypressElement;
};
(Declare Cypress typings manually this way seems alien at best. However, trying to use the native ones generated a lot of problems)
Reference that file in the tsconf.json compiler options via:
"typeRoots": ["cypress.d.ts"],
This just enables intellisense to Cypress, even if the cypress code is written in javaScript, since vscode relies a lot in typescript for its intellisense engine.
Since you're not using typeScript I guess, you may need to add a very simple tsconfig file at the root (so your editor can read its configuration), something like:
{
"compilerOptions": {
"typeRoots": ["cypress.d.ts"],
"target": "es5",
"module": "commonjs",
"lib": [
"es6"
],
"declaration": true,
"removeComments": false,
"stripInternal": true,
// since 2.3
// "strict": true,
"alwaysStrict": true,
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true
},
"files": [
"./index.ts"
]
}
Maybe you can instruct your editor to load cypress.d.ts as typeRoots, I don't know.
After this, you should have intellisense for your cy variable and for the objets that comes from cy.get() (which above are called CypressElement in that types definition).
One big caveat about this, is that whenever you use a new Cypress feature, you need to manually add its type to cypress.d.ts to get the intellisense.
I use jasmine, karma and webpack to test my module. The webpack preprocesses my tests files before initiating tests.
In my tests I have the class Name{...} to be tested. I create new Name instance and then, in my tests I expect(myInstance.constructor.name).toBe("Name")
class Name{}
const myInstance = new Name();
describe("The object",function(){
it("should be the instance of Name class",function(){
expect(myInstance.constructor.name).toBe("Name"); // Expected 't' to be 'Name'.
})
});
But it returns failed tests. I figured out that my Name class is parsed by webpack to the t class in the bundled file and myInstance.constructor.name equals "t".
Can I prevent webpack to change the names of classes/constructors?
Have a build setup for development and production separately, whenever in development mode(which you can mention in the webpack config object), don't apply minification plugin(might be there in your webpack config).
Help links:
Bundling Modes
Minification pluin
You can use 'keep_classnames' option provided by the minification plugin to keep the class names intact.
Install Terser Plugin to customize Webpack optimization > minimizer options running:
npm i -D terser-webpack-plugin
...or in the case you use yarn:
yarn add -D terser-webpack-plugin
Then add this optimization option inside webpack.config.js:
module.exports = {
mode: ...,
resolve: ...,
target: ...,
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
keep_classnames: true,
},
}),
],
},
};
I am trying to get Wallaby to work with a TypeScript app, using Browserify and Wallabify. However, when I run Wallaby, it outputs No failing tests, 0 passing, and all test indicators are grey.
The file app/spec.setup.ts is responsible for loading node modules dependencies such as chai, sinon, and the app's main module. app/spec.util.ts provides some helpers, imported by individual spec files.
module.exports = function() {
var wallabify = require('wallabify');
var wallabyPostprocessor = wallabify({
entryPatterns: [
'app/spec.setup.ts',
'app/src/**/*.spec.ts'
]
}
);
return {
files: [
{pattern: 'app/spec.setup.ts', load: false, instrument: false},
{pattern: 'app/spec.util.ts', load: false, instrument: false},
{pattern: 'app/src/**/*.ts', load: false},
{pattern: 'app/src/**/*.spec.ts', ignore: true}
],
tests: [
{pattern: 'app/src/**/*.spec.ts', load: false}
],
testFramework: 'mocha',
postprocessor: wallabyPostprocessor,
bootstrap: function (w) {
// outputs test file names, with .ts extensions changed to .js
console.log(w.tests);
window.__moduleBundler.loadTests();
}
};
};
What's interesting is that I don't get any feedback from changing entryPatterns, even setting it to an empty array or invalid file names. The result is still the same. Only if I remove it entirely, I get errors such as Can't find variable: sinon.
I've also figured that the entryPatterns list may need the compiled file names, i.e. .js instead of .ts extension. However, when I do that, I get Postprocessor run failure: 'import' and 'export' may appear only with 'sourceType: module' on spec.setup.ts.
I don't know what is the correct way to configure Wallabify for TypeScript compilation, and I couldn't find any complete examples on the web, so I'd appreciate any hints.
P.S. with my current StackOverflow reputation I couldn't add two new tags: wallaby and wallabify. Could someone do me a favour and add the two tags please.
Because TypeScript compiler renames files to .js and applied before wallabify, you need to change your entry patterns like this to make it work:
entryPatterns: [
'app/spec.setup.js',
'app/src/**/*.spec.js'
]