I use decorators in my project, but it seems the babel-jest do not support this new experiment feature
I find some support from this github issue ===> which replace babel-jest with webpack-babel-jest, and it fix the decorator problem. But a new problem comes in when i run npm run test ==> "ReferenceError: regeneratorRuntime is not defined"
It seems we need regenerator-runtime.(I use redux-saga in my project) I can't get a way to fix this.
package.json {
"babel-core": "^6.7.6",
"babel-eslint": "^7.2.3",
"babel-jest": "^21.2.0",
"babel-loader": "^6.2.4",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"enzyme": "^3.1.0",
"enzyme-adapter-react-15.4": "^1.0.3",
"jest": "^21.2.1",
"node-sass": "^3.4.2",
"react-addons-test-utils": "^15.4.2",
"regenerator-runtime": "^0.11.0" }
.babelrc {
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"transform-decorators-legacy",
"transform-react-jsx-source",
"transform-class-properties",
["transform-runtime", {
"polyfill": false,
"regenerator": true
}
],
"env": {
"development": {
"presets": [
"react-hmre"
]
},
"test": {
"presets": [
"es2015",
"react",
"stage-0"
]
}
}
}
}
I can't get a way to fix this.
This is well-known issue of regenerator-transform babel plugin, which is commonly used for transpiling code with sagas.
See verbose explanation here: Unable to export generator functions
Related
In the project that I work at the moment, we use browserify. I have done npm i into my console.
Then when I wanted to generate the js with the command
browserify src/scripts/jsx/SignUp/signUp-twoPages/App.jsx -o src/scripts/jsx/SignUp/signUp-twoPages/app.js
it throw an error
preset not found #babel/react
Like every developer I went online and did a search for #babel/react but nothing came up. I have seen variations as #babel/preset-react and tried to use them but it didn't solve my problem.
At that point, my package.json locked like:
{
...
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015",
"react",
"stage-1"
],
"plugins": [
"transform-object-rest-spread"
]
}
]
]
},
"babel": {
"presets": [
"react",
"es2015",
"stage-1"
]
},
"scripts": {
"build-js": "browserify src/scripts/jsx/SignUp/signUp-twoPages/App.jsx -o src/scripts/jsx/SignUp/signUp-twoPages/app.js",
"buildSignUp": "npm run build-js",
...
},
"author": "",
"license": "ISC",
"dependencies": {
"#ungap/url-search-params": "^0.1.2",
"babel-polyfill": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.16.0",
"babelify": "^7.3.0",
"braintree-web": "^3.17.0",
"form-serialize": "^0.7.1",
"jest-junit": "^6.3.0",
"nock": "^10.0.6",
"object-assign": "^4.1.1",
"react": "^15.4.2",
"react-accessible-dropdown": "^1.0.2",
"react-animate-height": "^0.10.8",
"react-dom": "^15.4.2",
"react-dropdown": "^1.2.0",
"react-modal": "^3.8.1",
"react-redux": "^5.0.6",
"react-responsive-modal": "^1.9.4",
"react-scroll": "^1.4.7",
"react-select": "^2.1.2",
"react-slick": "^0.24.0",
"react-swipeable": "^5.4.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"slick-carousel": "^1.8.1",
"validator": "^6.2.1"
},
"devDependencies": {
"babel-core": "6.26.3",
"babel-jest": "^23.6.0",
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
"babel-plugin-transform-es3-property-literals": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "^6.22.0",
"babel-preset-stage-1": "^6.24.1",
"babelify": "^7.3.0",
"browserify": "^13.3.0",
"core-js": "^2.5.3",
"envify": "^4.1.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-15": "^1.2.0",
"jest": "^23.6.0",
"react-test-renderer": "^15.6.2",
"redux-logger": "^3.0.6",
"redux-mock-store": "^1.5.3",
"redux-test-utils": "^0.3.0",
"uglify-js": "^3.3.9",
"uglifyify": "^4.0.5"
},
"-vs-binding": {
"ProjectOpened": [
"build"
]
},
"jest": {
"setupFiles": [
"<rootDir>/test-setup.js"
],
"moduleFileExtensions": [
"js",
"jsx"
],
"testMatch": [
"**/tests/*.js?(x)"
],
"reporters": [
"default",
"jest-junit"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/obj/"
],
"coveragePathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/obj/"
]
}
}
What to install or what to change in order to fix this problem?
The solution in my case was to extend the preset of the package.json
Because the node module extends and evolves from one version to another one there a lot of cases when they are not compatible.
I had deleted my node_module.
Run npm i again.
Added babel-preset-react to my package.json without installing anything, browserify worked properly. My package.json locked like this.
{
"main": "App.jsx",
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015",
"react",
"babel-preset-react",
"stage-1"
],
"plugins": [
"transform-object-rest-spread"
]
}
]
]
},
"babel": {
"presets": [
"react",
"es2015",
"babel-preset-react",
"stage-1"
]
},
"scripts": {
...
}
}
This solved my problem. Please let me know if it works for you as well.
I'm having trouble getting my eslint atom package to work with jsx. My eslint package references a global .eslintrc in my home directory. Following the eslint docs I have my .eslintrc file set up as follows:
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"semi": 2,
"strict": 0
}
}
My package.json dependencies:
"devDependencies": {
"babel-core": "^6.2.1",
"babel-eslint": "^8.2.6",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-react": "^7.10.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "16.3.2",
"react-dom": "16.3.2",
"react-redux": "5.0.7",
"redux": "4.0.0",
"youtube-api-search": "0.0.5"
}
I have installed the babel parser and eslint-plugin-react but am still not able to read the jsx. I'd really appreciate any help with this, thanks in advance.
What you mean by saying cant read jsx? If i get you right, i assume Atom is not showing any Error?
If so, it would be great to show us the list of installed Atom packages.
I guess you missed to include some packages e.g language-javascript-jsx
I'm in the process of upgrading to webpack 4.6.0 from 3.0.0.
Everything builds fine, but when it comes to executing the code in the browser, imports are not working properly.
This is mu setup:
package.json
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^22.2.2",
"babel-loader": "^7.1.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-dynamic-import-node": "^1.0.1",
"babel-plugin-syntax-dynamic-import": "6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.6.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.3",
"workbox-webpack-plugin": "^3.0.0"
.babelrc
{
"presets": [
"env",
"react"
],
"plugins": [
"add-module-exports",
"transform-class-properties",
"transform-object-rest-spread",
"transform-object-assign",
"syntax-dynamic-import"
],
"env": {
"test": {
"plugins": [
"dynamic-import-node"
]
}
}
}
webpack.config.js
{
test: /\.js$/,
include: [
path.resolve('src')
],
use: [
{ loader: 'babel-loader' },
...
]
}
And then when it comes to being executed, this happens:
progressiveImage is a react component which when being debugged, it has no default from import.
Can you spot anything wrong from this?
Thanks in advance.
I'm trying to use decorators in my RN project:
Following is my package.json file:
{
"name": "testApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"autobind-decorator": "^1.3.3",
"babel-core": "^6.7.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-native": "^1.5.6",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.6.1",
"react": "^0.14.8",
"react-native": "^0.22.2",
"webpack": "^1.12.14"
}
}
and this is my .babelrc:
{
"plugins": [
"transform-runtime",
"transform-decorators-legacy",
"transform-class-properties"
],
"presets": ["es2015", "react", "stage-0", "react-native"]
}
I'm getting error stating ReferenceError: Can't find variable: require
. I tried many post but couldn't get any solution. I created new RN Project using react-native init testApp
Got it fixed error was because of order of presets: I removed all other presets and changed presets to just "react-native" and everything's working now.
Code:
import React from 'react'
import { render } from 'react-dom'
import { Router} from 'react-router'
render((
<Router>
</Router>
), document.getElementById('app'))
Gives error:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
I am using Browserify with Babel6 - here's the babelrc:
{
"presets": ["es2015", "react"],
"env": {
"development": {
"plugins": [
["react-transform", {
"transforms": [{
"transform": "livereactload/babel-transform",
"imports": ["react"]
}]
}]
]
}
}
}
And package.json deps:
"axios": "^0.8.1",
"babel-core": "^6.3.26",
"babel-loader": "^6.2.0",
"babel-plugin-react-transform": "^2.0.0-beta1",
"babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
"babel-plugin-transform-react-jsx": "^6.3.13",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babel-preset-stage-2": "^6.3.13",
"babel-runtime": "^6.3.19",
"babelify": "^7.2.0",
"browserify": "^12.0.1",
"livereactload": "^2.1.0",
"react": "^0.14.5",
"react-addons-linked-state-mixin": "^0.14.5",
"react-dom": "^0.14.3",
"react-hot-loader": "^1.3.0",
"react-mixin": "^1.1.0",
"react-proxy": "^1.1.2",
"react-redux": "^4.0.6",
"react-router": "^1.0.3",
"react-simple-router": "^0.1.6",
"reactify": "^1.1.1",
"redux": "^3.0.5",
"redux-devtools": "^3.0.1",
"redux-devtools-dock-monitor": "^1.0.1",
"redux-devtools-log-monitor": "^1.0.1",
"redux-form": "^4.0.7",
"redux-simple-router": "^1.0.2",
Browserify config:
var props = {
entries: [script],
cache: {},
packageCache: {},
plugin: isProd ? [] : (watch ? [watchify, livereactload] : [livereactload]),
transform: [
['babelify', {
presets: ['es2015', 'react'],
plugins: [
['react-transform', {
'transforms': [{
'transform': 'livereactload/babel-transform',
'imports': ['react']
}]
}]
]
}],
[envify, {}]
],
extensions: ['.jsx', '.js'],
debug: !isProd,
fullPaths: !isProd // for watchify
}
Suggestion? I am finding lots of issues on GH with this but no clear solution. This is taken right off the examples on React Router site so not sure why I cannot get it working. The only diff is they use webpack.
Well the issue was odd - thanks to comment I was able to resolve it. I have a .babelrc config as well as a browserify gulp job with its own babel config. For some reason having both created this issue. I deleted the one in gulp and now things work fine. Reason: I have zero idea.