How to install a wsdl connection in react-native - node.js

I'm trying to establish aa wsdl connection. I get the following error. is there anyone who can help?
my connection code
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
var soap = require('soap');
var url = 'https://localhost:44379/service/ozelekranservice.svc?wsdl';
var args = {User : '15460036927', Password : '123'};
type Props = {};
export default class App extends Component<Props> {
render() {
soap.createClientAsync(url).then((client) => {
console.warn(client.Login(args));
return client.Login(args);
}).then((result) => {
console.warn(result);
});
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
</View>
);
}
}
error code
url:http://10.0.3.2:8081/index.delta?platform=andoid&dev=true&minify=false
body:{"orginModulePath":"
C:\users\...\node_modules\soap\lib\client.js","targetModuleName":"assert","message":"Unable to resolve module'assert'from
'C:\users\...\node_modules\soap\lib\client.js':Module 'assert' does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n
Clear watchman watches:'watchman watch-del-all'.\n
Delete the 'node_modules' folder: 'rm -rf node_modules &&nom install'.\n
3.Reset Metro Bundler cache:'rm -rf/tmp/metro-bundler-chace-*' or 'npm start -- --reset-chace'.\n
Remove haste chace:'rm -rf /tmp/haste-mat-react-native-packager-*'.","errors":[{"description":"Unable to resolve module 'assert'from
'C:\users\...\node_modules\soap\lib\client.js': Module 'assert' does not exist in the Haste module map\n\nThis might be related to

Related

export/import javascript class like module node into electron with webpack

In context of basic electon-vue app, I want to create my own javascript class and use it into main process or renderer or into vue component.
I created JS Class but I never find a good way for exporting my class.
All possibility of writing import/export module find in the web finished by same error : Undefined exports
"use strict"
import fs from 'fs'
import typeorm from 'typeorm'
import Public from './../entity/Public'
class ConnectionManager
{
constructor(){}
getConnection(type, name, options) {
}
}
module.exports = ConnectionManager
But it seeams that others js file work perfectly like the vue-router js for routing into vue.js app :
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: require('#/components/Home').default
}
]
})
I package my code with Webpack and libraryTarget Output is : commonjs2
I seems that use babel-loader with webpack
node version : 10.13.0
electron : 3.0.10
Babel : 6
EDIT :
I try this syntax class js file :
"use strict"
import * as fs from 'fs'
import * as typeorm from 'typeorm'
import {Public} from './../entity/Public'
export default class ConnectionManager
{
constructor(){}
getConnection(type, name, options) {
}
}
with this import syntax :
import ConnectionManager from './../service/connectionManager'
But I have this error when I execute code into electron :
Uncaught TypeError:
_service_connectionManager__WEBPACK_IMPORTED_MODULE_8__.default.getConnection
is not a function
I console logged this service class "ConnectionManager" and I have this result (so it really exist) :
ƒ ConnectionManager() {
babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, ConnectionManager);
}
It seems that the final js module webpack contain the ConnectionManager class
It seems that you mix commonjs modules with ES modules by the wrong way.
There are a lot of modules (include node built-in) which have no default export. To import such a module you need to use * as moduleAlias or { exportedField } in your import statement. Try to rewrite your code by this way:
import * as fs from 'fs'
import * as typeorm from 'typeorm'
import { Public } from '../entity/Public'
export default class ConnectionManager
{
constructor(){}
getConnection(type, name, options) {
}
}
Because this class is exported as a default value, you can use the following construction to import it as a default field, where ConnectionManager is an alias for the current scope:
import ConnectionManager from '../service/connectionManager'

windows not defined when Node.js trying to read export default variable from react file (node.js reads react file)

When I am trying to read the react file that contains the router node crash with error ( i want to build sitemap but even if i just try to console.log the export default variable i am getting this error maybe babel wrong configuration?):
redux\store.js:80 var store = (0, _redux.createStore)(_index2.default,
defaultState, (0, _redux.compose)((0,
_redux.applyMiddleware)(_reduxThunk2.default), window.devToolsExtension ? window.devToolsExtension() : function (f) {
^
ReferenceError: window is not defined
Is it possible to fix that error?
react file test.js
require('es6-promise').polyfill();
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import store, { history } from './redux/store';
import { Router, Route, IndexRoute } from 'react-router';
import App from './app';
....
const renderRouter = (<Provider store={store}>
<Router history={history} >
<Route path="/" component={App}>
.....
</Router>
</Prodiver
)
export default renderRouter;
sitemap file
require('babel-register');
const renderRouter = require('./test').default;
console.log(renderRouter);
/*
const Sitemap = require('react-router-sitemap').default;
(
new Sitemap(router)
.build('https://www.omgomg.com')
.save('./sitemap.xml')
);*/
EDIT:
If i remove import store and history and I get #import error from App component ( it has scss file so I believe babel isn't config to read scss? )
react file test.js
require('es6-promise').polyfill();
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
/*import store, { history } from './redux/store';*/
import { Router, Route, IndexRoute } from 'react-router';
const App = 0;
....
const renderRouter = (<Provider >
<Router >
<Route path="/" component={App}>
.....
</Router>
</Prodiver
)
export default renderRouter;
Do you use react-router 4.x ?
If so, there is a issue in Github:
https://github.com/kuflash/react-router-sitemap/issues/71

How to read a react file ( ES6 with jsx) with node in order to get the export variable

When I am trying to read the react file that contains the router node crash with error ( i want to build sitemap but even if I just try to console.log the export default variable and I am getting this error maybe needs babel configuration?):
redux\store.js:80 var store = (0, _redux.createStore)(_index2.default,
defaultState, (0, _redux.compose)((0, _redux.applyMiddleware)
(_reduxThunk2.default), window.devToolsExtension ? window.devToolsExtension() :
function (f) { ^
ReferenceError: window is not defined
store.js code. were the error occured
const store = createStore(
rootReducer,
defaultState,
compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
);
Is it possible to fix that error?
react file test.js
require('es6-promise').polyfill();
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import store, { history } from './redux/store';
import { Router, Route, IndexRoute } from 'react-router';
import App from './app';
....
const renderRouter = (<Provider store={store}>
<Router history={history} >
<Route path="/" component={App}>
.....
</Router>
</Prodiver
)
export default renderRouter;
sitemap file
require('babel-register');
const renderRouter = require('./test').default;
console.log(renderRouter);
/*
const Sitemap = require('react-router-sitemap').default;
(
new Sitemap(router)
.build('https://www.omgomg.com')
.save('./sitemap.xml')
);*/
Assuming you are using webpack you could fix your issue by changing redux/store.js to
const store = createStore(
rootReducer,
defaultState,
compose(
applyMiddleware(thunk),
global.devToolsExtension ? global.devToolsExtension() : f => f
)
);
This will work in a Node.js runtime, where global is defined, while webpack will provide it in the browser.
Another solution that is less dependent on your build system is checking if window is defined:
const HAS_DEVTOOLS = typeof window === 'object' &&
typeof window.devToolsExtension === 'function';
const store = createStore(
rootReducer,
defaultState,
compose(
applyMiddleware(thunk),
HAS_DEVTOOLS ? global.devToolsExtension() : f => f
)
);

Is there a way to mock `module` variable?

I want to test my app init function, that depends on node.js module variable (webpack's module variable to be precise). I can't pass module variable as a function parameter because of this webpack GitHub issue.
I found this rewire library, that seems to be good for my problem. But it looks like it is abandoned and has some errors because of my ES6 imports.
Code sample I want to test:
import ReactDOM from 'react-dom'
import React from 'react'
import Root from './components/Root'
export function init() {
const {AppContainer} = require('react-hot-loader')
const render = Component => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById('root')
)
}
render(Root)
if (module.hot) { // the part I would like to test by mocking `module` variable
module.hot.accept('./components/Root', () => { render(Root) })
}
}
init()

Sendbird SDK not working with React Native

I am following sendbird's tutorial on building a chat app with react-native, and i get the following error when I try to import sendbird sdk:
Unable to resolve module http from .../SendbirdSample/node_modules/sendbird/SendBird.min.js:
Unable to find this module in its module map or any of the node_modules/http and its parent directories
I deleted node_modules folder and run npm install again, cleaned npm cache and cleared watchman watches but couldn't fix it.
Any thoughts on this issue ?
update : adding code
main.js
import React from 'react';
import {
StyleSheet,
Navigator
} from 'react-native';
var Login = require('./components/login');
var Channels = require('./components/channels');
var ROUTES = {
login: Login,
channels: Channels
};
module.exports = React.createClass({
renderScene: function(route, navigator) {
var Component = ROUTES[route.name];
return <Component route={route} navigator={navigator} />;
},
render: function() {
return (
<Navigator
style = { styles.container }
initialRoute={ {name:'login'} }
renderScene={this.renderScene }
configureScene={ () => { return Navigator.SceneConfigs.FloatFromRight; } } />
);
}});
login.js
import React from 'react';
import {
StyleSheet,
Navigator
} from 'react-native';
var Login = require('./components/login');
var Channels = require('./components/channels');
var ROUTES = {
login: Login,
channels: Channels
};
module.exports = React.createClass({
renderScene: function(route, navigator) {
var Component = ROUTES[route.name];
return <Component route={route} navigator={navigator} />;
},
render: function() {
return (
<Navigator
style = { styles.container }
initialRoute={ {name:'login'} }
renderScene={this.renderScene }
configureScene={ () => { return Navigator.SceneConfigs.FloatFromRight; } } />
);
}
});
channels.js
import React from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
var sendbird = require('sendbird');
module.exports = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={{color: '#fff'}}>Channels</Text>
</View>
);
}
});
Try using an earlier version of SendBird's JS SDK. Based on my own testing this issue is introduced in SDK v. 2.4.19. My setup works with sendbird#2.4.18 and react-native#0.27.2.
The sudden appearance of this problem in a patch strongly suggests a bug in the SDK or the introduction of an undocumented API change (changelog), which is basically a bug as well.
To install a specific version of an npm package:
npm i --save PACKAGE_NAME#MAJOR.MINOR.PATCH, e.g.
npm i --save sendbird#2.4.18.
You can view all available versions of the sdk by running
npm info sendbird.
The official word I got from Sendbird when I reported the same issue. I haven't tried the newly released 3.0. So can't speak to that.
Harry Kim (SendBird) Jul 6, 01:51 PDT
Thank you for contacting SendBird support.
We recommend to use below packages to run SendBird properly.
"react-native": "0.20.0",
"react-native-button": "1.4.2",
"react-native-gifted-messenger": "0.0.18",
"react-native-gifted-spinner": "0.0.3",
"react-native-popup": "0.5.2",
"sendbird": "^2.4.20"
Regard, Harry

Resources