unit testing a component, I have to import a mixin ( vue-howler)
import VueHowler from "vue-howler";
I am getting a warning on the import regarding the implicit any ...
[ts]
Could not find a declaration file for module 'vue-howler'. '/Users/yves/Developments/WIP/VUE.JS-cli-3/3-chocha-home-content/chocha/node_modules/vue-howler/dist/vue-howler.common.js' implicitly has an 'any' type.
Try `npm install #types/vue-howler` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-howler';`
How I can solve this warning ? there is no #types/vue-howler ) ?
here is the related package.json eslint block
package.json
....
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/prettier"
],
"rules": {
"no-console": 0
},
"parserOptions": {
"parser": "babel-eslint"
}
},
....
thanks for feedback
It looks like you're using typescript. If no typings exist for that particular package, you'll need to create your own definition file:
Name it vue-howlder.d.ts. The contents should be:
declare module `vue-howler`
Make sure your tsconfig file can find this in wherever your typings directory is.
Related
I have a Gruntfile.js like this.
module.exports = function(grunt) {
require('time-grunt')(grunt);
require('load-grunt-config')(grunt, {
jitGrunt: {
staticMappings: {
scsslint: 'grunt-scss-lint'
}
}
});
grunt.loadNpmTasks('grunt-run');
grunt.registerTask('default', ['eslint', 'jest', 'scsslint', 'svgstore'])
};
And when I run the grunt it says.
grunt
No "eslint" targets found.
eslint is already installed and I even created the configuration file using
./node_modules/.bin/eslint --init
And this is the content of .eslintrc.js.
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 13
},
"rules": {
}
};
Any opinions?
Depending on how you downloaded the codebase for the theme, it may be missing the "grunt" folder. If your project is missing this folder, try adding the one from Cornerstone: https://github.com/bigcommerce/cornerstone/tree/master/grunt
Per the BigCommerce documentation around eslint errors -- If bundling your theme triggers multiple lint errors related to the bundle.js file, your theme is missing the .eslintignore file.
You can retrieve this file from the Cornerstone repo. Once you add this in, re-run the bundle command.
I want to use rollup to make two builds of my library, an UMD version as well as a never ESM version
Earlier my configuration when using the non official plugin rollup-plugin-typescript2 looked like this:
import typescript from 'rollup-plugin-typescript2'
import pkg from '../package.json'
export default {
input: 'src/index.ts',
output: [
{
file: pkg.main,
format: 'umd',
name: pkg.name,
sourcemap: true
},
{
file: pkg.module,
format: 'esm',
sourcemap: true
},
],
plugins: [
typescript({
tsconfig: "src/tsconfig.json",
useTsconfigDeclarationDir: true
}),
],
}
And in my package json I have:
(...)
"scripts": {
"build": "rollup -c ./scripts/dist.js",
},
"main": "dist/index.js",
"module": "dist/index.esm.js",
"files": [
"dist"
],
(...)
And in my tsconfig.json I have:
(...)
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist",
"declaration": true,
"declarationDir": "./dist/#types/chrisweb-utilities",
(...)
The resulat was "created dist/index.js, dist/index.esm.js in 2.6s" ... all good
The files that got created where the following:
/dist
|-#types
|-index.d.ts
|-index.js
|-index.esm.js
|-index.esm.js.map
|-index.js.map
Today I tried to use the official plugin #rollup/plugin-typescript instead (because I use that one in other projects where I only do a single ESM build and it works without a problem and I wanted to use the same plugins through out all of my projects)
I had a first error because of the configuration propery only rollup-plugin-typescript2 understands:
"(!) Plugin typescript: #rollup/plugin-typescript TS5023: Unknown compiler option 'useTsconfigDeclarationDir'."
So I removed it, which fixed that problem ...
But I got another error: "[!] (plugin typescript) Error: #rollup/plugin-typescript: 'dir' must be used when 'outDir' is specified."
So I added dir to my configuration, which then looked like this:
import typescript from '#rollup/plugin-typescript';
import pkg from '../package.json'
export default {
input: 'src/index.ts',
output: [
{
file: pkg.main,
format: 'umd',
name: pkg.name,
sourcemap: true,
dir: "dist",
},
{
file: pkg.module,
format: 'esm',
sourcemap: true,
dir: "dist",
},
],
plugins: [
typescript({
tsconfig: "tsconfig.json",
}),
],
}
Nope, next error shows up: "[!] Error: You must set either "output.file" for a single-file build or "output.dir" when generating multiple chunks."
Actually I don't even want to generate chunks, I'm fine with a single file, but I remove dir I'm back to the previous error. So next thing I tried was to keep "dir" and instead remove "file"
This worked, or at least I got a success message: "created dist, dist in 2.6s" but the problem now is that instead of having two builds I just have a single one "dist/index.js", the first build for UMD gets owerwritten by the second one for ESM.
I thought ok one last try, lets output the UMD version in a subfolder of /dist and the ESM version in another one, so I changed my config to this:
(...)
output: [
{
format: 'umd',
name: pkg.name,
sourcemap: true,
dir: "dist/umd",
},
{
format: 'esm',
sourcemap: true,
dir: "dist/esm",
},
],
(...)
This failed too :( this time with this error: "[!] (plugin typescript) Error: #rollup/plugin-typescript: 'outDir' must be located inside 'dir'." So my outDir is "./dist" which yes is not in dir: "dist/umd" anymore, I only have one outDir in tsconfig, so it can't be in each rollup output.dir, or do I miss something here?
Oh and I actually also tried something else, remember that earlier error where rollup told me that "'dir' must be used when 'outDir' is specified", so I removed outDir from tsconfig.json and hey another rollup error (at this point I think I got all possible rollup errors ;) ) which was the following: "[!] (plugin typescript) Error: #rollup/plugin-typescript: 'dir' must be used when 'declarationDir' is specified."
So I also commented out "declarationDir" in the tsconfig ... no more error, but this is not really the solution as now I don't have typescript type definition files getting generated.
I went back and forth and tried all combinations for hours, but no luck so far...
So I'm stuck and was wondering if someone can help me out? Maybe you had this or a similar problem? Either I'm missing something or this a bug in which case I will open a ticket in a few days.
I have an application created using the create-react-app.
I need to disable one rule from the default CRA Lint rules:
"react-hooks/exhaustive-deps": 0
After checking all of the resources about the topic and I'm still failing to disable that rule. I made an .env file with EXTEND_ESLINT=true
and I've included the following in my .eslintrc in the root directory
{
"eslintConfig": {
"extends": ["react-app"],
"overrides": [
{
"rules": {
"react-hooks/exhaustive-deps": 0
}
}
]
}
}
EDIT based on the comments suggestions:
Aditionally, moving the .eslintrc conents to package.json is not working either.
Package.json
"eslintConfig": {
"extends": [
"react-app",
"shared-config"
],
"rules": {
"react-hooks/exhaustive-deps": 0
}
},
Am i missing something ? Please advice if possible :)
I realize this question has been asked several times but all of the solutions I've come across don't seem to work for me. I'm running into the following error while trying to run Jest tests for a Vue app.
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://facebook.github.io/jest/docs/en/configuration.html
Details:
/node_modules/vue-awesome/icons/expand.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Icon from '../components/Icon.vue'
^^^^^^
SyntaxError: Unexpected token import
> 17 | import 'vue-awesome/icons/expand'
.babelrc:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"env": {
"test": {
"presets": [
["env", { "targets": { "node": "current" }}]
]
}
}
}
jest config in package.json:
"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
],
"moduleDirectories": [
"node_modules",
"src"
]
}
It looks like the initial import in the script for the Vue component being mounted for the test is working but the import within the module itself (import Icon from '../components/Icon.vue) is not recognized.
boiler plate repo to re-creates the issue: github.com/DonaldPeat/stackoverflow-jest-question
How can I resolve this?
You just need to make sure that vue-awesome will be transformed by jest, so add
following to your jest config:
transformIgnorePatterns: ["/node_modules/(?!vue-awesome)"],
which means: "Ignore everything in node_modules except for vue-awesome.
Also here is exhausive list of other issues that might cause this error: https://github.com/facebook/jest/issues/2081
If you are encountering this problem after updating to a newer Jest version, try clearing Jest's internal cache:
jest --clearCache
Adding this in the package.json works for me (replace <package_name> with causing package name)
"jest": {
"transformIgnorePatterns": ["node_modules/(?!<package_name>)/"]
}
We had the same issue with another library. The root cause was that we had a circular dependency in code. But the error text did not refer to it at all. just like in this post: "Jest encountered an unexpected token..."
In my case I needed testEnvironment: "node" in jest.config.js file. The error came out when I started tests against Vue Router.
// jest.config.js
module.exports = {
preset: "#vue/cli-plugin-unit-jest/presets/typescript",
transform: {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"jest-transform-stub",
},
moduleNameMapper: {
"^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"jest-transform-stub",
},
testEnvironment: "node", // It fixes my issue
};
When I try to use $ReadOnlyArray, eslint shows error that "$ReadOnlyArray is not defined (no-undef)". I might have a wrong configuration but I don't know where to start.
Here are some env info:
react-native: 0.51.0
flow: 0.57
eslint: 4.9.0,
eslint-plugin-flow: 6.23.0
You will need to install Flow type linting rules as follows:
npm install eslint-plugin-flowtype --save-dev
and your .eslintrc file should look something like this:
{
"parser": "babel-eslint",
"env": {
},
"plugins": [
"flowtype"
],
"extends": [
"eslint:recommended",
"plugin:flowtype/recommended"
],
"rules": {
}
}