I am new to reactjs. I am using react-native and I wanted to import react-redux.
But I keep getting:
"development server response 500.
Message: {transform error: .../node_modules/redux/lib/index.js:
{babel}..../node_modules/redux/lib/index.js:
Using removed babel 5 option: .../node_modules/redux/.babelrc.stage - check out the corresponding stage x presets http://babeljs.io/docs/plugins/#presets".
My package.json looks like
"dependencies": {
"react": "15.3.2",
"react-native": "0.36.0",
"react-native-pathjs-charts": "0.0.20",
"react-native-svg": "^4.3.1",
"react-redux": "^4.4.5",
"redux": "^2.0.0"
},
"devDependencies": {
"babel-core": "6.3.26",
"babel-preset-es2015": "6.5.0",
"babel-preset-react": "6.5.0",
"babel-preset-stage-0": "6.5.0",
"babel-preset-stage-1": "6.5.0",
"eslint": "2.3.0",
"eslint-config-standard": "5.1.0",
"eslint-plugin-promise": "1.1.0",
"eslint-plugin-react": "4.1.0",
"eslint-plugin-standard": "1.3.2"
}
My .babelrc looks like
{
"presets": ["react-native", "stage-0"]
}
I am importing in my component like below
import React, { Component } from 'react'
import {
View, Text, StyleSheet, ScrollView,
TouchableHighlight
} from 'react-native'
import { connect } from 'react-redux/src/index';
Any idea how to import react-redux into my component? Thank you!
Related
I want to use Ant Design with Snowpack. I followed the And Design docs and installed antd but whenever I run my application the dependency can't be resolved.
I get the following error message:
[snowpack] Import "antd" could not be resolved.
If this is a new package, re-run Snowpack with the --reload flag to rebuild.
If Snowpack is having trouble detecting the import, add "install": ["antd"] to your Snowpack config file.
My App.tsx:
import React from 'react';
import './App.css';
import { Button } from 'antd';
function App(): JSX.Element {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
export default App;
My package.json dependencies:
"dependencies": {
"antd": "^4.6.2",
"axios": "^0.20.0",
"postcss": "^7.0.32",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hook-form": "^6.7.0",
"tailwindcss": "^1.7.6"
},
"devDependencies": {
"#snowpack/app-scripts-react": "^1.10.0",
"#testing-library/jest-dom": "^5.5.0",
"#testing-library/react": "^10.0.3",
"#types/react": "^16.9.35",
"#types/react-dom": "^16.9.8",
"#types/snowpack-env": "^2.3.0",
"#typescript-eslint/eslint-plugin": "^4.0.1",
"#typescript-eslint/parser": "^4.0.1",
"eslint": "^7.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.0",
"jest": "^26.2.2",
"postcss-cli": "^7.1.2",
"prettier": "^2.0.5",
"snowpack": "^2.9.0",
"typescript": "^3.9.7"
}
Am I missing something?
Make sure antd is already installed. Try this in snowpack.config.js:
module.exports = {
mount: {
public: "/",
src: "/_dist_",
},
installOptions: {
namedExports: ["antd"],
},
};
trying to run a reactjs application , but I am getting this error
Module build failed: TypeError: fileSystem.statSync is not a function
My package.json file looks like this
{
"name": "stellar-laboratory",
"version": "0.0.1",
"private": true,
"description": "",
"author": "Stellar Development Foundation <stellar#stellar.org>",
"license": "Apache-2.0",
"scripts": {
"start": "gulp develop",
"build": "gulp build"
},
"dependencies": {
"#ledgerhq/hw-app-str": "^4.14.0",
"#ledgerhq/hw-transport-u2f": "^4.13.0",
"axios": "^0.8.1",
"babel-loader": "^7.1.5",
"babel-preset-stage-2": "^6.24.1",
"babel-core": "^6.0.20",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.0.16",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.0.15",
"bluebird": "^3.5.1",
"browser-sync": "^2.9.11",
"chai": "^3.5.0",
"classnames": "^2.2.0",
"css-loader": "^0.18.0",
"extract-text-webpack-plugin": "^0.8.2",
"file-loader": "^0.8.4",
"gulp": "^3.9.0",
"gulp-mocha": "^2.2.0",
"html-webpack-plugin": "^1.6.2",
"json-loader": "^0.5.3",
"lodash": "^4.17.5",
"mocha": "^2.4.5",
"node-sass": "^4.7.2",
"react": "^0.14.0",
"react-dom": "^0.14.0",
"react-redux": "^4.0.0",
"redux": "^3.0.4",
"redux-thunk": "^1.0.0",
"route-recognizer": "^0.1.9",
"sass-loader": "^3.2.3",
"solar-css": "git+https://github.com/stellar/solar#master",
"solar-stellarorg": "git+https://github.com/stellar/solar-stellarorg#master",
"stellar-sdk": "^0.11.0",
"uri-templates": "^0.1.9",
"urijs": "^1.16.0",
"webpack": "^1.13.2"
}
}
Update
Then I downgraded my babel-loader to ^7.1.1
**post to that I am gettting this error
Module build failed: SyntaxError: Unexpected token (42:2)
app.js
require("./styles/main.scss");
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import {Provider} from 'react-redux';
import {throttle} from 'lodash';
import rootReducer from './reducers/root';
import logging from './middleware/logging';
import {routerMiddleware} from './utilities/simpleRouter';
import LaboratoryChrome from './components/LaboratoryChrome';
import {loadState, saveState} from './localStorage';
const persistedState = loadState();
import StellarSdk from 'stellar-sdk';
if (typeof window !== "undefined") {
window.StellarSdk = StellarSdk;
}
document.write('<div id="app"></div>');
let createStoreWithMiddleware = applyMiddleware(
thunk,
routerMiddleware,
logging
)(createStore);
let store = createStoreWithMiddleware(rootReducer, persistedState);
store.subscribe(throttle(() => {
saveState({
network: store.getState().network
});
}, 1000));
ReactDOM.render(
<Provider store={store}>
<LaboratoryChrome />
</Provider>,
document.getElementById('app')
);
Fixed it by just using Yarn instead
I am trying to add the #DragDropContext decorator on my class but I am getting an error when I load it in my browser.
My component looks like:
import React from 'react';
import Link from 'react-router-dom';
import { connect } from 'react-redux';
import { DragDropContext } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import PropTypes from 'prop-types';
#DragDropContext(HTML5Backend)
class UserShowView extends React.Component {
}
export default connect(mapStateToProps)(UserShowView);
This is what the error looks like in chrome console:
bundle.js:977 Uncaught Error: Expected the backend to be a function or
an ES6 module exporting a default function. Read more:
http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html
My babelrc file:
{
"plugins": ["transform-decorators-legacy"],
"presets": ["react", "es2015", "stage-0"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
packages.json:
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node tools/srcServer.js",
"test": "NODE_ENV=test jest",
"lint": "eslint --max-warnings=0 src test",
"test:watch": "NODE_ENV=test jest --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-plugin-react-display-name": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"colors": "^1.1.2",
"compression": "^1.7.1",
"eslint": "^4.15.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.5.1",
"eslint-watch": "^3.1.3",
"express": "^4.16.2",
"jest": "^22.0.6",
"node-sass": "^4.7.2",
"npm-run-all": "^4.1.2",
"redux-devtools": "^3.4.1",
"sass-loader": "^6.0.6",
"webpack": "^3.10.0",
"webpack-dev-middleware": "^2.0.4",
"webpack-dev-server": "^2.10.1",
"webpack-hot-middleware": "^2.21.0"
},
"dependencies": {
"axios": "^0.17.1",
"history": "^4.7.2",
"lodash": "^4.17.5",
"moment": "^2.20.1",
"react": "^16.2.0",
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.5.4",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
}
What am I doing wrong or am I missing a babel preset?
Is my "transform-decorators-legacy" even working?
As the error messages shows, #DragDropContext(HTML5Backend) is expecting a module or function.
From the documentation you should be importing the HTML5Backend module with:
import HTML5Backend from 'react-dnd-html5-backend';
Since you are using
import { HTML5Backend } from 'react-dnd-html5-backend';
You are trying to import a specific export that doesn't exist thus DragDropContext showing the error.
Importing with curly brackets is for specific exports vs without curly brackets which is for default exports.
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
for more information on different ways of importing modules and functions.
Just remove the curly braces around HTML5Backend
import HTML5Backend from 'react-dnd-html5-backend';
http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html#usage
I wanna run unit test at react, but when I run "npm test", it shows me this error:
navList.test.js: Unexpected token (12:26)
> 12 | let app = shallow(<NavList/>);
| ^
Following is my code:
navList.test.js
import React from 'react';
import {shallow, configure} from 'enzyme';
import {expect} from 'chai';
import {NavList} from '../components/common/nav/navList';
import Adapter from 'enzyme-adapter-react-16';
configure({adapter: new Adapter()});
describe('NavList', function () {
it('NavList ', function () {
let app = shallow(<NavList/>);
expect(app.find('h2').length).to.equal(1);
});
});
package.json:
"scripts": {
"test": "jest"
},
"devDependencies": {
"axios": "^0.16.2",
"babel-jest": "^22.1.0",
"babel-preset-react": "^6.23.0",
"bootstrap": "^4.0.0-beta",
"bootstrap-sass": "^3.3.7",
"chai": "^4.1.2",
"cross-env": "^5.0.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"jest": "^22.1.4",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"mocha": "^5.0.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-test-renderer": "^16.2.0"
}
Did I miss something at install ?
It looks like the code isn't getting transpiled before jest is trying to run it (hence the Unexpected token error).
Take a look at the setup instructions here. My best guess is that you need to update your .babelrc with the react preset.
I am trying to get started in building a react application using konva, react-konva.
I built a basic react component:
import React, { Component } from "react";
import { Stage } from "react-konva";
import Square from "./Square.jsx";
class Map extends Component {
render() {
return (
<Stage height={100} width={100}>
<Layer>
</Layer>
</Stage>
);
}
}
export default Map;
and also a test using jest:
/* global beforeEach describe expect it */
import { shallow } from "enzyme";
import React from "react";
import Map from "../Map";
function createComponent() {
const wrapper = shallow(
<Map />
);
return wrapper;
}
describe("Map component test", () => {
describe("When initializing the component", () => {
let sut;
beforeEach(() => {
sut = createComponent();
});
it("it should render a Stage component", () => {
expect(sut.find("Stage").exists()).toBe(true);
});
});
});
When this test runs, I get the following error:
TypeError: Cannot read property 'webkitBackingStorePixelRatio' of null
at node_modules/konva/konva.js:1291:36
at node_modules/konva/konva.js:1298:7
at Object.<anonymous> (node_modules/konva/konva.js:1477:3)
at Object.<anonymous> (node_modules/react-konva/src/react-konva.js:4:13)
at Object.<anonymous> (src/mapping/Map.jsx:2:19)
at Object.<anonymous> (src/mapping/MapContainer.js:3:12)
at Object.<anonymous> (src/App.jsx:3:21)
at Object.<anonymous> (src/tests/App.spec.js:5:12)
My dependencies from package.json:
"dependencies": {
"konva": "^1.6.3",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-konva": "^1.1.3",
"react-redux": "^5.0.5",
"redux": "^3.7.1"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"canvas": "^1.6.5",
"chalk": "^1.1.3",
"coveralls": "^2.13.1",
"css-loader": "^0.28.4",
"enzyme": "^2.8.2",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-plugin-import": "^2.5.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.1.0",
"eslint-watch": "^3.1.2",
"html-webpack-plugin": "^2.28.0",
"jest": "^20.0.4",
"jsdom": "^11.1.0",
"node-gyp": "^3.6.2",
"npm-run-all": "^4.0.2",
"react-test-renderer": "^15.6.1",
"redux-mock-store": "^1.2.3",
"style-loader": "^0.18.2",
"webpack": "^3.0.0"
}
I'm sure that this is related to node setup, but I am unsure of the correct way to do it. Can anyone help?
I fixed it by installing and using konva-node in my test:
import Konva from 'konva-node';
I also had to specify that it's not used in the browser before executing any tests:
Konva.isBrowser = false;
I am using the following dependencies:
"dependencies": {
"axios": "^0.18.0",
"konva": "^2.5.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-konva": "^16.5.2",
"react-scripts": "2.0.5"
},
"devDependencies": {
"chai": "^4.2.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"konva-node": "^0.5.5",
"sinon": "^7.1.1",
"sinon-chai": "^3.2.0"
},
There are several options:
The one mentioned by Alpar. It works for me but it requires building of old node-canvas version.
Using https://github.com/hustcc/jest-canvas-mock. If you are using Create React App just add import 'jest-canvas-mock' in your setupTests.js
Theoretically npm i -D canvas should solve this problem as well but I have not managed to make it work. Read here https://github.com/jsdom/jsdom/issues/1782 for more ideas.