I just put some image and try to render pdf:
phantom.create().then(async function(ph) {
let page = await ph.createPage();
let status = await page.open("http://localhost:4000")
await page.render('file.pdf');
ph.exit();
});
But i get blank pdf file.
I also try
page.onLoadFinished
But it is never income to it.
I also try:
await new Promise(resolve => setTimeout(() => resolve(), 10000));
But nothing.
I solved this issue by running phantom alone, and figure out that i need to uncomment this lines in polyfills:
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
Related
Using channels it connects properly when the page loads the first time but then hangs on refresh. Not sure why this is happening. I've placed the code below to see what might be happening?
# index.html
<script>
let socket = new WebSocket('ws://127.0.0.1:8001/ws/');
socket.onmessage = () => {
console.log("Connected");
};
socket.onclose = () => {
console.log('Websocket closed');
}
</script>
# app/consumer.py
from json import dumps
from time import sleep
from channels.generic.websocket import WebsocketConsumer
class WSConsumer(WebsocketConsumer):
def connect(self):
self.accept()
self.send(dumps({'message': 'connected'}))
for i in range(1000):
self.send(dumps({'message': i}))
sleep(2)
#app/routing.py
from django.urls import path
from app.consumers import WSConsumer
ws_urlpatterns = [
path('ws/', WSConsumer.as_asgi())
]
#core/asgi.py
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter
from channels.routing import URLRouter
from django.core.asgi import get_asgi_application
from app.routing import ws_urlpatterns
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "core.settings")
django.setup()
application = ProtocolTypeRouter({
"http": get_asgi_application(),
"websocket": AuthMiddlewareStack(URLRouter(ws_urlpatterns)),
})
# core/urls.py
...
path('test/', views.IndexView.as_view()),
...
In my settings I've added channels just below the .sites app but above everything else and I've added the ASGI_APPLICATION and running the application with python manage.py runserver 127.0.0.1:8001
I am using reactjs.
node: version 14
I am developing on core-ui-react-template.
Sidebar did not work after updating the ./store file. I put the contents of the store file and index.js file below.
original website core.io
I have been working on it for a few days but I could not get any results. I couldn't find where was the mistake
index.js
import 'react-app-polyfill/ie11'; // For IE 11 support
import 'react-app-polyfill/stable';
import './polyfill'
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { icons } from './assets/icons'
import store from './store'
import { transitions, positions, Provider as AlertProvider } from 'react-alert'
import AlertTemplate from 'react-alert-template-basic'
import {Provider} from 'react-redux';
import ReactNotification from 'react-notifications-component';
import 'react-notifications-component/dist/theme.css'
React.icons = icons;
const options = {
position: positions.BOTTOM_RIGHT,
timeout: 5000,
offset: '1px',
transition: transitions.SCALE,
};
console.log(store.getState());
ReactDOM.render(
<Provider store={store}>
<AlertProvider template={AlertTemplate} {...options}>
<ReactNotification/>
<App/>
</AlertProvider>
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
./store.js
import {applyMiddleware, combineReducers, compose, createStore} from "redux";
import customerReducer from "./components/helpers/reducers/customerReducer";
import userReducer from "./components/helpers/reducers/userReducer";
import appointmentsReducer from "./components/helpers/reducers/appointmenstReducer";
import thunk from "redux-thunk";
const initialState = {
sidebarShow: 'responsive'
};
const changeStateReducer = (state = initialState, { type, ...rest }) => {
switch (type) {
case 'set':
return {...state, ...rest };
default:
return state
}
};
const rootReducers = combineReducers({
customerInfo: customerReducer,
account_profile: userReducer,
appointmentsList: appointmentsReducer,
changeState: changeStateReducer
});
const allEnhancers = compose(
applyMiddleware(thunk)
);
const store = createStore(
rootReducers,
allEnhancers
);
export default store
As you know, I use core-ui-react template. There is a link below.
But after updating the ./store file, it shows "undefined" when I show it with console.log (sidebarShow) in "const sidebarShow = useSelector (state => state.sidebarShow)" line in TheHeader file.
https://github.com/coreui/coreui-free-react-admin-template/blob/master/src/containers/TheHeader.js
I think "useSelector (state => state.sidebarShow)" doesn't get the function here. It originates from here.
check out how combineReducers works: https://redux.js.org/api/combinereducers
your selector should be:
const sidebarShow = useSelector(state => state.changeState.sidebarShow)
you'll notice that changeState is not a very good key name, but that is another issue :)
I got this error when i run the exp start command. How can I solve this error?
This is my login.js file code.
I am new to React native, using js to run a native app using expo, so I am stuck. I don't know why it gives me this error and how to handle it.
import React, { Component } from 'react';
import {
Alert,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Image,
AsyncStorage,
KeyboardAvoidingView,
Dimensions,
ActivityIndicator,
NetInfo,
BackHandler,
DeviceEventEmitter
} from 'react-native';
import * as firebase from 'firebase';
import firebaseService from '../config/firebaseService';
import {Actions} from 'react-native-router-flux';
import Modal from "react-native-modal";
import { Dialog,ConfirmDialog } from 'react-native-simple-dialogs';
import Toast, {DURATION} from 'react-native-easy-toast';
import Expo from 'expo';
var height = Dimensions.get('window').height;
var width = Dimensions.get('window').width;
import styles from "../styles/loginStyle";
import {apiUrl,netErrorMsg,facebookId,androidGoogleClientId,iosGoogleClientId,firebaseConfig} from "../config/constant";
export default class Login extends Component<{}> {
constructor(props) {
super(props);
this.state = {
email:'',
password:'',
forgotEmail:'',
versionName:'',
loading:false,
isModalVisible: false,
netStatus:'none',
dialogVisible:false,
errorForgotEmail:""
}
}
Looks like you are trying to import firebase from your Login.js in some file. Remove that import and import firebase as you have imported it in your Login.js. This will resolve the problem.
I am creating a forced graph in react using d3 for npm.
The graph is created using the follows:
https://medium.com/walmartlabs/d3v4-forcesimulation-with-react-8b1d84364721
I am trying to set up the testing environment as follows:
https://ericnish.io/blog/how-to-unit-test-react-components-with-enzyme/
the problem is when I run the test I keep on getting
Cannot read property 'matches' of undefined
at C:\workspace\project\node_modules\d3-selection\build\d3-selection.js:83:15
I have imported d3 in my graph component as follows:
import * as d3 from 'd3';
It seems like when I import my react component in my test file, it freaks out. This is my test file:
import React from 'react'
import {shallow, mount, render} from 'enzyme'
import {expect} from 'chai'
import * as d3 from 'd3';
import graph from '.../components/graph ';
describe('graph ', () => {
it('should have the main svg', (done) => {
const wrapper = shallow(<graph />);
expect(wrapper.find('svg')).to.have.length(1);
done()
})
})
How can I get rid of this error?
Create a file, e.g. polyfill.js:
global.document.documentElement = {matches: () => false};
And import it right before you import DS3 (or any other import that transitively imports D3):
import React from 'react'
import {shallow, mount, render} from 'enzyme'
import {expect} from 'chai'
import './polyfill';
import * as d3 from 'd3';
I am having an error like this:
XMLHttpRequest cannot load file:///Users/mshin/workspace/spirent/trinity/trinity-link/public/node_modules/can/view/stache/system.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
home.js:
import can from 'can';
import template from './home.stache!';
export default can.Component.extend({
tag: 'home',
template: template
});
The build config in Gruntfile:
"steal-build": {
default: {
options: {
system: {
config: "package.json!npm",
bundlesPath: "production"
},
buildOptions: {
minify: true,
sourceMaps: true
}
}
}
}
I don't know why I am getting this error message in production mode. In development environment, it works fine. Also, it is fine on test environment. I am running QUnit test with testee.
home_test.js:
import QUnit from 'steal-qunit';
import ViewModel from 'components/home/home';
import can from 'can';
import stache from 'can/view/stache/';
import $ from 'jquery';
var template = can.stache('<home></home>'),
$component;
QUnit.module('home component', {
setup: function() {
$('#trinity-js-tests').html(template());
$component = $('#trinity-js-tests').find('home');
}
});
QUnit.test('title tag', function() {
QUnit.ok($component.find('h1'), 'Page shows title with <h1> tag');
});
QUnit.test('title content', function() {
QUnit.strictEqual($component.find('h1').text(), 'This is homepage.', 'Title is "This is homepage."');
});
However, if I change the home.js to like this:
import can from 'can';
export default can.Component.extend({
tag: 'home',
template: can.view('components/home/home.stache)
});
It works fine in production and development environment, but in test the last test case fails.
1) QUnit "public/tests/test.html" on PhantomJS 1.9.8 / Mac OS X 0.0.0: home component title content Title is "This is homepage.":
Error: Expected This is homepage. but was
at http://localhost:3996/public/tests/test.html?__token=k8l88m:1340
at http://localhost:3996/public/tests/test.html?__token=k8l88m:1907
at :33
at http://localhost:3996/public/tests/test.html?__token=k8l88m:895
at http://localhost:3996/public/tests/test.html?__token=k8l88m:1024
at process (http://localhost:3996/public/tests/test.html?__token=k8l88m:583)
at begin (http://localhost:3996/public/tests/test.html?__token=k8l88m:628)
at http://localhost:3996/public/tests/test.html?__token=k8l88m:644
It looks like you are loading it from the file:// protocol, is that correct? If so that's likely your problem.
I found what I missed in the code.
main.js
import $ from 'jquery';
import _ from 'lodash';
import stache from 'can/view/stache/';
import can from 'can';
import 'components/route/';
import 'less/trinity.less!';
I didn't import can/view/stache/system in it.
To use system plugin in can.stache, I need to import the specific file to main javascript file.
So, the file should be
import $ from 'jquery';
import _ from 'lodash';
import stache from 'can/view/stache/';
import 'can/view/stache/system'; // this is the added line
import can from 'can';
import 'components/route/';
import 'less/trinity.less!';