I upgraded Jest to 24.1, and babel via npx babel-upgrade --write. My unit tests that use async functions are failing with:
ReferenceError: regeneratorRuntime is not defined . I have googled around the error, and there are some older information dealing with beta 7 versions or beta 6 of babel. How do I fix the error?
For reference my package.json and babel.rc files are located here
I ended up fixing this by adding to my babel.rc file:
["#babel/plugin-transform-runtime", { "corejs": 2 }]
and then adding them as devDependencies:
"#babel/plugin-transform-runtime": "^7.3.4",
"#babel/runtime-corejs2": "^7.3.4",
Related
new to webpack configurations. I'm getting this error in my app and it doesn't compile. According to countless suggestions from SO, I've tried the setting (or variations of it) in my package.json:
"browser": {
"fs": false,
"net": false
}
And in webpack.config:
node: { fs: 'empty',
net: 'empty' }
It compiles but all it does is it has the file go blank on localhost.
Webpack version: 4.46.0
Node: 16.14.0
Windows 11
Any help greatly appreciated.
Webpack will let you bundle up modules of browser-compatible code into a production bundle for sending to the browser.
The fs and net modules are not browser-compatible code. They depend on APIs which are provided by Node.js and which are not provided by browsers.
Thus attempts to bundle them error, and if you tell webpage to treat them as empty then the generated bundle won't include them.
Make sure you are not importing the following from express or even json or something else
import { response } from 'express'
For anyone who is using React (happened to me in react). I have even read with NextJs this works but haven't tested it.
Man I did everything like config-overrides and node modules webpack config file updates and also changed react-scripts version 5 to 4 but nothing worked. But as soon as I removed response. It worked.
That one line only made me go into 7 hours of debugging mode.
But always enjoy it :)
It took me while to figure it out and I found out that it may be due to incompatible Node-gyp and Node-sass packages.My app is running fine now.
Again, the errors:
"Module not found: Error Can't resolve "fs" in..."
"Module not found: Error Can't resolve "net" in..."
Try this in the following order :
Delete package.lock.json
Update/install these packages to make them compatible with each other.
These versions worked for Node 16.14.0:
"node-sass": "^6.0.0"
"node-gyp": "^7.1.0" (in my case - npm install -g node-gyp#7.1.0)
"sass-loader": "^10.0.0"
I have a huge project, which I was will simplify for the issue, with 2 workspaces.
The main packages looks like
workspaces: [ 'workspace-A', 'workspace-B' ]
My workspace-A has a dependency to external package (here, jest), in a needed version
name: "workspace-A",
dependencies: {
"jest": "<27.0.0"
}
My workspace-B has a dependency to the same package, but doesn't care about its version.
name: "workspace-B"
dependencies: {
"jest": "*"
}
After a yarn install (with yarn v3), I was expecting yarn to automatically install jest with a 26.x.x version in my main node_modules.
Instead, the node_modules of the main project contains jest 26.x.x, and the node_modules of the workspace-B contains jest 27.x.x. It's OK for my, even if I find this weird, but the thing is the workspace-A now uses jest 27.x.x!
I succeeded make it work by adding a resolution field in the main package file, but it's not ideal, as this package doesn't need jest.
"resolutions": {
"jest": "^26.6.3",
}
My 2 questions are
Why is yarn installing 2 versions of jest, is there a way to prevent this?
Is there a configuration somewhere I should put to specify to the workspace-A to not use something from workspace-B?
Thanks for reading
Please could yo help with the next error, I tried to create my tests in VUE3 with Jest but I have the next error, I'm using laravel 8 with webpack mix
Any idea?
enter image description here
On the project, I used Vue3, Vite, Typescript and testing tool Jest. I found only 1 solution to fix this. I have the same issue and spent few hours finding the correct answer. You can try to change the version of Jest from ^27 to ^26 in package.json.
"jest": "^26.6.3"
If you use Typescript too, you should change the version of the ts-jest plugin.
"ts-jest": "^26.5.6"
I have monorepo with lerna. in my project I have nodejs and angular.
Angular uses "typescript": "~3.5.3".
Nodejs have those packages to work with sequelize:
"#types/node": "^12.12.16",
"#types/validator": "^12.0.1",
"reflect-metadata": "^0.1.13",
"sequelize": "^5.21.2",
"sequelize-typescript": "^1.1.0"
The problem is I got error:
ERROR in [at-loader] ..\..\node_modules\sequelize\types\lib\transaction.d.ts:33:14
TS1086: An accessor cannot be declared in an ambient context.
According to stackoverflow answer I need to upgrade to 3.7.3. When I upgrade it works fine in nodejs sequelize side.
But when I change the typescript to 3.7.3 then angular doesn't work:
ERROR in The Angular Compiler requires TypeScript >=3.4.0 and <3.6.0 but 3.7.3 was found instead.
What can I do to fix this?
I can fix this error for you, but you should separate your projects because it's difficult to maintain a front-end and back-end monorepo. This won't be your last conflict of dependencies.
Angular 8.x is stuck on TypeScript 3.5, but everything I've read online says it will compile okay with the latest TypeScript 3.7, and Angular 9 is reportedly going to target 3.7 as well because of Ivy.
You have to disable enforcing of the TypeScript version by the Angular compiler:
tsconfig.json:
{
// ...
"angularCompilerOptions": {
// ...
"disableTypeScriptVersionCheck": true
}
}
That will get the project to compile, but you'll get a run-time error because Angular 8 doesn't define a default importer. We can fix this by adding one to the polyfills
polyfills.ts:
// #ts-ignore
window.__importDefault = function(mod) {
return mod && mod.__esModule ? mod : { default: mod };
};
Later when you upgrade to Angular 9. The above can be undone and it should compile with TypeScript 3.7
I'm getting an error repeatedly when trying to build a new webpack project using vue-cli. I'm following along with the docs on the latest build (3.0.0-beta.11), also tried with an earlier version, which wasn't beta.
When I run yarn serve it attempts to start the dev server and build the project but fails here:
error in ./src/App.vue?vue&type=template&id=7ba5bd90
Module build failed: Error: No parser and no file path given, couldn't infer a parser.
at normalize (/Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:7051:13)
at formatWithCursor (/Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:10370:12)
at /Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:31115:15
at Object.format (/Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:31134:12)
at actuallyCompile (/Users/cory/Code/chickadee/my-project/node_modules/#vue/component-compiler-utils/dist/compileTemplate.js:93:29)
at compileTemplate (/Users/cory/Code/chickadee/my-project/node_modules/#vue/component-compiler-utils/dist/compileTemplate.js:26:16)
at Object.module.exports (/Users/cory/Code/chickadee/my-project/node_modules/vue-loader/lib/loaders/templateLoader.js:42:20)
# ./src/App.vue?vue&type=template&id=7ba5bd90 1:0-194 1:0-194
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js
About my setup
Mac OS
I'm running node v8.5.0
packages are installed with yarn
The Things I've Attempted
Different versions of vue-cli to generate a new project. The projects generate and install modules.
Tried removing the prettier module, but the error still seems to come up.
Tried reinstalling all modules.
What else might I try to get past this error?
Removing the current node_modules folder from the project, adding "prettier": "^1.12.1" to package.json and running npm install solved the issue.
Another option is to run npm install prettier#1.12.1 without removeing the node_modules folder before
Update:
For some users, verion 1.12.1 did not work
#Kivin proposed another solution that can be found here: vue webpack template missing parser
Known issue and it will be fixed in the next version of vue-cli
In prettier 1.13.0, default parser was removed with a minor version(used to be babylon)
Issue: https://github.com/vuejs/component-compiler-utils/issues/14
Issue at prettier repo: https://github.com/prettier/prettier/issues/4567
Sorry, we committed the age-old semver sin- we knew this was a breaking change, but because it would only affect a subset of our users, we didn't bump the major version, because we didn't want to create friction for our users to upgrade.
To get the old behavior, add parser: "babylon". You may also want to lock prettier to a specific version in your package.json.
Running npm install prettier#1.12.1 solved it for me. Thanks lsxliron.
Right now, I tried all the options..downloading and updgrading prettier...but none workied. Until I studied what happened carefully.
Apparently, the prettier team removed the default parser which was babylon and in so doing...broke the internet.
Just kidding.
Issue repo
The simplest solution, according to them would be to simply add the parser back.
This has been picked up by the Vue team and its expected to be shipped with the latest fix release.
If you are using Vue Loader/Yarn, dont even bother to try all the suggestions...I tried them all.
What fixed it for me was...go to
node_modules\vue-loader\lib\template-compiler ...open index.js and look for
// prettify render fn
if (!isProduction) {
code = prettier.format(code, { semi: false})
}
and change the lines to:
// prettify render fn
if (!isProduction) {
code = prettier.format(code, { semi: false, parser: 'babylon' })
}
Thats it!
Then once the issue got fixed, everything will just be rolled back and you will still be fine.
Try this...it will save you countless minutes of searches....
As already pointed out by the various resonses, you may need to rollback the version of the prettier package.
in your package.json file, you may need to force npm to use a version (i.e. remove the hat ^)
mine looks something like this
"devDependencies": {
"prettier": "1.12.1",
"typescript": "^2.6.1",
"vue": "^2.5.16",
"vue-styleguidist": "^1.4.4",
"vue-webpack-loaders": "^1.0.6",
"webpack": "^3.1.0"