I followed everything you recommended me to make the Babel 7 work with the Jest.
I installed the #babel/core and babel-core. Still It does not work.
{
"devDependencies": {
"#babel/cli": "^7.0.0-beta.51",
"#babel/core": "^7.0.0-beta.51",
"#babel/node": "^7.0.0-beta.51",
"#babel/plugin-transform-modules-commonjs": "^7.0.0-beta.51",
"#babel/preset-flow": "^7.0.0-beta.51",
"babel-core": "^7.0.0-beta.51",
"jest-cli": "^23.1.0"
}
}
After yarn jest
yarn run v1.9.0-20180612.1255
$ /Users/m/Desktop/k/node_modules/.bin/jest
FAIL packages/services/src/Client/__tests__/Client.js
- Test suite failed to run
Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "#babel/core" or "babel-core" to see what is calling Babel.
at throwVersionError (node_modules/#babel/helper-plugin-utils/lib/index.js:65:11)
at Object.assertVersion (node_modules/#babel/helper-plugin-utils/lib/index.js:13:11)
at _default (node_modules/#babel/plugin-transform-modules-commonjs/lib/index.js:51:7)
at node_modules/#babel/helper-plugin-utils/lib/index.js:19:12
at Array.map (<anonymous>)
Saw your question on the Jest GitHub issues -- I think it was you, but I solved it on my end by going through the create-react-app repo and seeing how they integrated Jest. Specifically, the packages/react-scripts/package.json file has what you need.
"#babel/core": "7.0.0-beta.46",
"#babel/runtime": "7.0.0-beta.46",
"autoprefixer": "8.5.0",
+ "babel-core": "7.0.0-bridge.0",
"babel-eslint": "8.2.3",
"babel-jest": "22.4.3",
Add the line with the +, or change what version you have and you should be good.
Even though the Jest page says it includes babel-jest I found that adding it to my project fixes the problem.
yarn add --dev babel-jest babel-core#^7.0.0-bridge.0 regenerator-runtime
https://jestjs.io/docs/zh-Hans/getting-started
Related
Hello Fellow StackOverflow community,
I'm a newbie in Next.js 13 development and I've just finished my Next.js 13 app with TypeScript and TailwindCSS. Locally it worked fine, but when trying to deploy to Vercel, with the selected Next.js deployment preset, Vercel is stuck in build stage after 6s with Error: No Next.js version could be detected in your project. Make sure `"next"` is installed in "dependencies" or "devDependencies". When I check the dependencies, next is correctly set to latest. I've tried to change latest to the actual numerical version, but nothing changed. I have no idea what to do at this point as I didn't even find any post/article concerning this specific problem. You can review the package.json file and Vercel build log down below.
package.json file:
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#next/font": "^13.0.3",
"encoding": "^0.1.13",
"ioredis": "^5.2.4",
"next": "latest", //<-- Here you can see the demanded next version.
"next-auth": "^4.17.0",
"pusher": "^5.1.1-beta",
"pusher-js": "^7.5.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-timeago": "^7.1.0",
"swr": "^1.3.0",
"uuid": "^9.0.0"
},
"devDependencies": {
"#types/node": "18.11.3",
"#types/react": "18.0.21",
"#types/react-dom": "18.0.6",
"#types/react-timeago": "^4.1.3",
"#types/uuid": "^8.3.4",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.1",
"typescript": "4.8.4"
}
}
build log from Vercel:
[09:32:02.407] Cloning github.com/AnorakDWise/chat-app (Branch: master, Commit: 5b3bd6d)
[09:32:02.412] The cli flag --force was set. Skipping build cache download.
[09:32:03.153] Cloning completed: 745.348ms
[09:32:03.534] Running "vercel build"
[09:32:03.988] Vercel CLI 28.5.5
[09:32:04.255] Your application is being built using `next build`. If you need to define a different build step, please create a `vercel-build` script in your `package.json` (e.g. `{ "scripts": { "vercel-build": "npm run prepare && next build" } }`).
[09:32:04.256] Installing dependencies...
[09:32:04.574] yarn install v1.22.17
[09:32:04.584] warning package.json: No license field
[09:32:04.589] info No lockfile found.
[09:32:04.592] warning No license field
[09:32:04.593] [1/4] Resolving packages...
[09:32:04.593] [2/4] Fetching packages...
[09:32:04.594] [3/4] Linking dependencies...
[09:32:04.598] [4/4] Building fresh packages...
[09:32:04.600] success Saved lockfile.
[09:32:04.602] Done in 0.03s.
[09:32:04.670] Error: No Next.js version could be detected in your project. Make sure `"next"` is installed in "dependencies" or "devDependencies"
I'd really appreciate any kind of help, Thank You.
I've solved the issue by hosting the app on a development server, skipping the whole process of building the app to production. Thanks for everyone's support and efforts! <3
this is question is basically a variant of dependencies vs. devDependencies, I am looking through some source code these days, most of monorepo project will have a eslint-config to do lint
what confuses me is that they all put the eslint-plugin into dependencies not devDependencies
for example, a eslint config package called eslint-config, here's package.json
"dependencies": {
"#typescript-eslint/eslint-plugin": "^5.15.0",
"#typescript-eslint/parser": "^5.15.0",
"eslint-config-standard": "17.0.0-1",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-html": "^6.2.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsonc": "^2.2.1",
"eslint-plugin-n": "^15.0.1",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-unicorn": "^41.0.1",
"eslint-plugin-vue": "^8.5.0",
"eslint-plugin-yml": "^0.14.0",
"jsonc-eslint-parser": "^2.1.0",
"yaml-eslint-parser": "^0.5.0"
},
"devDependencies": {
"eslint": "^8.11.0"
},
we of course use it by npm i eslint-config -D, so I wonder if the eslint config get removed after bundled(I think it's 100% get removed), but I want to know the behand philosophy
According to the npm and yarn documentation, in addition to another answer with a similar question, devDependencies do not impact the bundle size as they are utilized in development mode.
Two related GitHub issue comments discuss the reasoning behind your question, specifically dependencies included at runtime:
https://github.com/facebook/create-react-app/issues/3209#issuecomment-336602578
https://github.com/typescript-eslint/typescript-eslint/issues/770#issuecomment-516056543
I've had a Ruby on Rails project for several years set up with Semaphore CI. The Semaphore project is set to use Ruby 2.2.2 as it's language. Over time the project adopted npm with browserify and babelify, and we're using all the latest ES6 features. We added npm install as a setup step to our Semaphore build, and this was working fine.
Now we are starting to use Jest to test our javascripts, and this is working fine locally. But when I added npm test to our Semaphore test commands, npm test fails on semaphore CI with the following errors:
FAIL app/assets/javascripts/tests/selectors/conversations.test.js
● Test suite failed to run
SyntaxError: Unexpected token {
at _load_jsdom (node_modules/jest/node_modules/jest-cli/node_modules/jest-environment-jsdom/build/index.js:17:41)
FAIL app/assets/javascripts/tests/reducers/conversations.test.js
● Test suite failed to run
SyntaxError: Unexpected token {
at _load_jsdom (node_modules/jest/node_modules/jest-cli/node_modules/jest-environment-jsdom/build/index.js:17:41)
Test Suites: 2 failed, 2 total
Tests: 0 total
Snapshots: 0 total
Time: 0.65s
Ran all test suites.
npm ERR! Test failed. See above for more details.
This is some relavent information from the project's package.json:
"scripts": {
"test": "jest --debug --verbose"
},
"jest": {
"roots": [
"<rootDir>/app/assets/javascripts"
]
},
"dependencies": {
"babel-plugin-syntax-async-functions": "^6.3.13",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-regenerator": "^6.3.18",
"babel-polyfill": "^6.3.14",
"babel-preset-env": "^1.5.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babelify": "^7.2.0",
"browserify": "^14.0.0",
"browserify-incremental": "^3.1.0",
"es6-promise": "^3.0.2",
"fetch": "^0.3.6"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-jest": "^22.1.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"bootstrap": "^4.0.0-beta.3",
"browserify": "^14.4.0",
"browserify-incremental": "^3.1.1",
"jest": "^22.1.1"
}
This is the .babelrc file located in the project :
{
"presets": ["env", "es2015", "es2016", "es2017", "stage-0", "react"]
}
Locally, I am on node v7.10.0. I SSH'ed into my Semaphore CI session and discovered that node v4.8.4 is installed there. I tried installing node v4.8.4 on my local machine and with that version installed, I get the same test errors (posted above) locally as I did on CI. So this is a node version issue.
I added:
"engines": {
"node": ">= 7.1.0"
}
to my package.json file, but that did not affect the node version installed on Semaphore.
So if I already have Ruby 2.2.2 chosen as my language and version in the Semaphore Build Settings, how to I change my node version?
Thanks in advance for the help.
It looks like SemaphoreCI is not using the same version of NPM as you. But you can set that within the build settings like this :
nvm install v8.9.4
npm install
npm test
You can test it out in the SSH
Ervin from Semaphore here,
To change the current Node.js version in the environment, whilst Ruby 2.2 is selected, add nvm use 7.1 to your setup steps. This will switch to the desired Node.js version and everything should work as expected. There's also an example of this in the docs.
Get in touch on support if you run into any issues.
I'm trying to deploy a Node app to Heroku, but I'm having an issue successfully running browserify when the app is deployed.
When I'm running locally, I browserify my script with npm run bundle like so (from package.json):
"bundle": "./node_modules/browserify/bin/cmd.js build/main.js -o public/scripts/bundle.js
which browserifies the script in build/main.js and puts it into public/scripts/bundle.js.
For deploying to Heroku, I added
"postinstall": "npm run bundle"
However, when I deploy, I get the following error:
Error: ENOENT: no such file or directory, open 'public/scripts/bundle.js.tmp-browserify-59309133185877094263'
Well, that's correct, that file shouldn't exist... yet. When I run npm run bundle locally, I do see that file briefly pop into existence, but then it is quickly removed and I'm left with a nice updated bundle.js.
I read through Heroku's docs on this, but I'm miffed... can anyone clarify how to get through this?
For reference, here are the relevant parts of my package.json:
"scripts": {
"bundle": "./node_modules/browserify/bin/cmd.js build/main.js -o public/scripts/bundle.js",
"postinstall": "npm run bundle"
},
"dependencies": {
"body-parser": "^1.17.1",
"browserify": "^14.1.0",
"ejs": "^2.5.6",
"express": "^4.15.2",
"jquery": "^3.2.1",
"path": "^0.12.7",
"superagent": "^3.5.2"
},
"devDependencies": {},
"engines": {
"node": "6.8.1",
"npm": "4.0.5"
}
Solved! I had bundle.js included in my global gitinore configuration. Just had to take that out, good to go!
Tools: Node 5.4.0, Express 4.13.4, React 0.14.7, webpack 1.12.14
Problem:
Both Node and Babel have had major updates over the past couple months and
so I'm having trouble straightening out how to configure Node to parse Isomorphic components written in ES6 syntax.
Error:
Client-side rendering(bundled by webpack) is working, but during server-side rendering I get this issue
import MyComponent from './components/
^^^^^^
SyntaxError: Unexpected token import
Background - things I did:
1) Updated Babel
I figured that the newest versions of Node would natively been to parse ES6 syntax for importing, but since it didn't I figured updating babel to
6.x would do the trick.
So I updated babel-loader 6.2.4 and other modules that depend on it.
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
2) Created a .babelrc file
I didn't know exactly what this file was for but since many people used it and mentioned it I thought I'd throw it in there.
.babelrc
{
"presets":["react","es2015"]
}
3) Updated Webpack Queries
I figure this only affects the client-side rendering but I'll mention that I did update
by adding in the "presets".
webpack.config.js
module.exports = {
entry: "./js/app.js",
output: {
filename: "./public/js/bundle.js"
},
debug: true,
devtool: "source-map",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query:{
presets:['react','es2015']
}
}
]
},
};
Just to incase it helps:
Here is my list of my dependencies.
{
"name": "My App",
"version": "0.0.1",
"description": "Iso React Components",
"main": "app.js",
"dependencies": {
"classnames": "^2.1.3",
"express": "^4.13.3",
"express-handlebars": "~1.1.0",
"flux": "^2.0.0",
"history": "^1.13.0",
"html-webpack-plugin": "^2.9.0",
"keymirror": "~0.1.0",
"mongodb": "^2.1.3",
"node-jsx": "~0.12.4",
"object-assign": "^1.0.0",
"react": "^0.14.0",
"react-dom": "^0.14.0",
"react-router": "^2.0.0",
"react-scrollbar": "0.3.1",
"reactify": "^1.1.1"
},
"devDependencies": {
"babel-core": "^6.6.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"envify": "^3.0.0",
"jest-cli": "^0.4.3",
"node-libs-browser": "^0.5.2",
"uglify-js": "~2.4.15",
"webpack": "^1.12.1"
}
}
Question:
Once I switched out all the "import" syntax to Node require statements I was able to render server-side successfully. But I really don't like the idea of avoiding ES6 to make the React code Node/Browser compatible. What am I missing?
Take a look at Webpack Isomorphic Tools. It's a helper module you can add to your webpack config so that you can do ES6 imports or regular old requires in node and it'll do some magic and the require will resolve successfully.
Essentially you make an isomorphic config (which is detailed on the site) and then using the isomorphic webpack plugin, you can use it to render your assets (javascript, styles, etc) client side.
Edit: A word of caution of some bugs you may run into: In node, things like the window object don't exist so if any of your node modules use it, it will throw an exception when you try to render that particular library on the server. Just shim the window object and anything else you need.
Babel require hook could help node.js parse ES6 syntax automatically while require files.
Just run command
npm install babel-register --save
And add the following to the first line of your entry file
require("babel-register");