I am trying to use Karma with Coffeescript. The following preprocessor line is there in karma config file:
preprocessors: {
'**/*.coffee': 'coffee'
}
But I am getting the error -
Can not load "coffee", it is not registered!
Perhaps you are missing some plugin?
karma-coffee-preprocessor is available as devDependencies in package.json. Has anyone faced this issue? Thanks.
I figured out the solution. It is because of not installing karma-cli. I though installing karma globally is enough. But after installing karma-cli everything is fine.
Related
My ultimate goal is to get e2e and unit code coverage for my Vue 3 app using Cypress in my CI/CD pipelines.
However, when using the following configuration in my babel.config.js I get a flood of repeated error messages that read don't know how to turn this value into a node at transformFile.next (<anonymous>) for each Vue file in my app that uses <script setup>.
babel.config.js
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset',
],
plugins: [
['babel-plugin-istanbul', {
extension: ['.js', '.vue']
}]
],
};
package.json
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.15",
"#vue/cli-plugin-eslint": "~4.5.15",
"#vue/cli-service": "~4.5.15",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"babel-plugin-istanbul": "^6.1.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
App.vue
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
My concern is that the plugin doesn't know how to handle Vue 3's script setup syntax.
Sadly, the only how-to guides I can find online are for Vue 2 or React apps.
https://docs.cypress.io/guides/tooling/code-coverage#Using-NYC
https://vuejsdevelopers.com/2020/07/20/code-coverage-vue-cypress/
So my question is: what can I do to get my app to transpile while using babel-plugin-istanbul and script setup?
Steps to Reproduce:
Create a new Vue 3 app with vue-cli-service
Install babel-plugin-istanbul in your dev dependencies
Configure your babel.config.js as shown above
Convert your App.vue to use <script setup>
Run npm run serve
Expected behavior:
The app transpiles with no errors
Actual behavior:
Transpilation failure with don't know how to turn this value into a node errors for App.vue.
The resolve is to use istanbul in the babel config (as given in Cypress docs).
The cause isn't apparent, without <script setup> the full name babel-plugin-istanbul works ok.
plugins: [
['istanbul', {
extension: ['.js', '.vue']
}]
],
I am solving same problem and I can point out two things:
The problem is in babel.config.js file especially with .vue extension, when you remove it works, but for me it instrument all files.
I have a feeling another problem is with CLI versions plugins. I don't have problem to run the cypress code coverage plugin with older packages.
If add extension:['.vue'] in bable.config.js configuration, getting below error.
src/pages/somefile.vue?vue&type=script&setup=true&lang=js
Module build failed (from ./node_modules/#vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js):
Error: src/pages/somefile.vue: don't know how to turn this value into a node
I ran into this as well. It turned out to be a bug in the istanbul-lib-instrument package, which was fixed in this PR: https://github.com/istanbuljs/istanbuljs/pull/662
If you upgrade your installed copy of istanbul-lib-instrument to 5.2.1 (i.e., npm update istanbul-lib-instrument) the issue should go away.
Current Behavior
I am building my angular project on circleci and it just keeps failing with the following message:
An unhandled exception occurred: Cannot find module
'#babel/compat-data/corejs3-shipped-proposals'
Require stack:
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/preset-env/lib/polyfills/corejs3/usage-plugin.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/preset-env/lib/index.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/core/lib/config/files/plugins.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/core/lib/config/files/index.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/core/lib/index.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/src/utils/process-bundle.js
/home/circleci/eleven-app/frontend/node_modules/jest-worker/build/workers/processChild.js
I am using
{
"#babel/plugin-proposal-numeric-separator": "^7.8.3",
"core-js": "3.2.1",
"tslib": "^1.11.1",
"#babel/compat-data": "~7.8.0",
"#babel/runtime-corejs3": "^7.9.2",
"ts-node": "7.0.0",
"tslint": "5.11.0",
"typescript": "3.5.3",
}
resolutions: {
"#babel/preset-env": "^7.8.7"
}
here is npx nls why #babel/preset-env output:
eleven-app-frontend > #angular-devkit/build-angular > #babel/preset-env#7.8.7
eleven-app-frontend > #nrwl/angular > #nrwl/cypress > #cypress/webpack-preprocessor > #babel/preset-env#7.9.5
eleven-app-frontend > #nrwl/cypress > #cypress/webpack-preprocessor > #babel/preset-env#7.9.5
Thank you for reading.
Had the same issue today, so I'm assuming there's something weird with the latest version.
My package.json had the following:
"#babel/compat-data": "~7.9.0"
I removed the ~ to force 7.9.0 instead of allowing newer ones and it did the trick for me.
There's probably a newer version that works but since you opened an issue for them (https://github.com/babel/babel/issues/11427) I'll just wait for more details.
I've the same issue when using TravisCI & Vue with Jest and Babel. My test suit has been failing. Adding "#babel/compat-data": "7.9.0" to devDependencies in my package.json file solved my problems.
These 3 options we came up with so far:
Adapt dependency of babel/preset-env to v7.9.0: "#babel/preset-env": "=7.9.0"
In case you use a NodeJS Docker Image, fix the version to something below 13.13, i.e.: node:13.12.0-alpine
Adding or upgrading "#babel/compat-data": "7.9.0" to devDependencies
The solutions are temporarily and should be removed as soon as there is an actual fix of the node images or the babel/preset-env library.
Linked Github issues:
babel - https://github.com/babel/babel/issues/11427
nodejs - https://github.com/nodejs/node/issues/32852#issuecomment-613652057
I had the same issue today in Github Actions build for a Vue FE project. It builds fine locally. I'm going to try the solution above and I'll report back...
Update: After looking through the package-lock file, my solution was to explicitly add "#babel/compat-data" to the prod dependencies. Previously it was only a dependency for some dev dependencies. So my package.json now looks like:
"dependencies": {
"#babel/compat-data": "^7.8.6",
...
Same issue.
Solved it by following above advices + removing node_modules (see this github thread):
Added explicitly #babel/compat-data": "7.9.0" to devDependencies
Upgraded node (13.3 to 14.0 in my case)
Had to remove my node_modules folder and re run yarn (or npm)
If you're using yarn, try to remove the yarn.lock file in your project. And then reinstall by run yarn install; you'll get a new yarn.lock file, which is fine.
It worked for me in my Next.js project.
Problem
I'm setting up eslint with eslint-config-standard.
I'm also using babel plugin that #babel/plugin-proposal-class-properties.
I tried lint my javascript files by "eslint index.js" command, and I got error that "[eslint]: Parsing error: Unexpected token =".
So i installed babel-eslint, and I updated the file ".eslintrc" like this:
{
"extends": ["standard"],
"parser": "babel-eslint",
"rules": {
"eol-last": 0
}
}
The above configuration is solved error that "[eslint]: Parsing error: Unexpected token =", but i got new problem that eslint-config-standard configuration wasn't work anymore.
Question
I want to use eslint-config-standard with experimental javascript code.
But i don't know how to use those together and whether is it possible.
How to use those together?
p.s. Sorry for my bad English :(
Yes it is possible. You just need to install a wrapper for Babel's parser used for ESLint and plugin.
https://github.com/babel/babel-eslint
https://github.com/babel/eslint-plugin-babel
$ npm install eslint babel-eslint eslint-plugin-babel --save-dev
# or
$ yarn add eslint babel-eslint eslint-plugin-babel -D
And then, inside your .eslintrc you need to add
"parser": "babel-eslint",
"plugins": ["babel"],
Also, if it doesn't work on the first try, you may need to restart your code editor. Good luck! :)
I'm trying to use 'react-responsive' but I am getting the error message - Unknown plugin "add-module-exports
It looks like this relates to the fact that node_modules needs to be excluded but due to a bug in babel v6 (fixed in v7) adding "ignore": "node_modules" to the .babelrc file doesn't work.
https://github.com/contra/react-responsive/issues/131
It seems like parcel-bundler uses babel v6 so my question is , how can I ignore node_modules and get parcel to bundle without throwing an error?
I was facing a similar issue recently with parcel, installing babel-plugin-add-module-exports seemed to fix the issue
My project was working perfectly fine.. But after doing a git push, I'm suddenly getting an error when I run gulp:
{ [Error: ModuleParseError: Module parse failed:
/Users/xyz/project/node_modules/iconv-lite/encodings/tables/gb18030-ranges.json
Line 1: Unexpected token :
You may need an appropriate loader to handle this file type.
| {"uChars":[128,16 ....
Why is this happening? I have uninstalled and reinstalled this module iconv-lite, but it doesn't seem to help.
I received this same exact error. You'll want to install a JSON loader module. I'm using json-loader in this example.
npm install json-loader --save
Then, you need to add this loader to your webpack.config.js
module: {
loaders: [
{ test: /\.json$/, loader: "json-loader"}
]
}
I had this dependency by an indirect dependency on node-fetch and fixed the issue by adding the following to my webpack.config.js:
externals: {
'node-fetch': 'fetch'
}
Deleting the file solved the issue.