How to solve the following errors in cli app?
backend.js:3638 App with id null not found
Is it bug in beta?
in console:
main.js (code)
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import DataTable from 'laravel-vue-datatable';
// import jQuery from 'jquery';
// window.$ = window.jQuery = jQuery;
import 'popper.js';
import 'bootstrap';
import './assets/app.scss';
import './assets/styles/bootstrap/dist/css/bootstrap.min.css';
import './assets/styles/custom.css';
import './assets/styles/themify-icons.css';
import './assets/styles/animate.css';
import './assets/styles/sublime.css';
// import './assets/styles/bootstrap/dist/js/bootstrap.min.js'
require('#/store/subscriber')
axios.defaults.baseURL = 'http://p3backend.test/api/'
Vue.config.productionTip = false
Vue.use(DataTable);
Vue.component('pagination', require('laravel-vue-pagination'));
store.dispatch('auth/attempt', localStorage.getItem('token')).then(() => {
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
})
Updated: I have 2 profiles in my chrome, on second profile vue-dev-tool is working fine :( tried to clean cache but still the same issue, the browser is up-to-date as Version 84.0.4147.89 (Official Build) (64-bit)
This problem is in the Beta version of vue.js devtools!
try: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
Steps:
Uninstall/remove the current chrome extension.
Install the new version.
Happy using Vue.js devtools again :)
Related
I run command ionic generate pages/login but me return this error
Since you're using the React project type, this command won't work. The Ionic CLI doesn't know how to generate framework components for React
You'll have to make a new file in e.g src/pages/ (e.g. with the name xy.tsx) with the following contents:
import React from "react";
import {IonPage} from "#ionic/react";
const PageXY: React.FC = () => {
return (
<IonPage>
...
</IonPage>
);
};
export default PageXY;
and in your App.tsx aka Router you have to import it with import PageXY from "./pages/xy";
and hook it up to the Router like so: <Route path="/xy" component={PageXY} exact />
Hope this still helps someone
This question already has answers here:
Accessing PropTypes via the main React package is deprecated
(7 answers)
Closed 5 years ago.
I'm using react with es2015 javascript and when I use the google-maps-react package I've got the following exception in my console:
warning.js:36 Warning: Accessing PropTypes via the main React package
is deprecated. Use the prop-types package from npm instead.
map.jsx:
import React , {Component} from 'react';
import {Map} from 'google-maps-react';
class MapView extends Component{
render(){
return(
<div className="google-map">
<Map google={this.props.google} zoom={14} />
</div>
)
}
}
export default MapView;
As of React v15.5.0, propTypes has been moved out of the React module; it now has its own prop-types package. Read the blog post https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html
Instead of using React.PropTypes.whatever, you have to import it using:
import PropTypes from 'prop-types';
(make sure to install it using npm install --save prop-types)
I have imported below packages in my service, which I use for SOAP-API processing.
"autopulous-xdom": "~0.0.12"
"autopulous-xdom2jso": "^0.0.12"
I am trying to use these with below lines at top of my service.ts
import 'autopulous-xdom/xdom.js';
import 'autopulous-xdom2jso/xdom2jso.js';
import convert = xdom2jso.convert;
import {Injectable} from '#angular/core';
#Injectable()
export class SoapService {
constructor() {}
}
I get no errors on compiling and building. But while running the application in browser, I get below error.
Has anyone worked with xdom2jso and xdom? Please help.
I got no responses and all I could do was fork and raise a PR myself into autopulous-xdom2jso.
See my fix here: https://github.com/autopulous/xdom2jso/pull/2
Are there any ways I could execute the import inline? See example below:
import $ from 'jquery';
import dt from 'datatables.net-bs';
import dtbuttons from 'datatables.net-buttons-bs';
import csv from 'datatables.net-buttons/js/buttons.html5.js';
// Attach the plugin - Could this be done inline in the import statments above?
dt(window,$);
dtbuttons(window,$);
csv(window,$);
Larsi
It is not possible with import statement. You can do it with different module loader. For example it is possible with node's built-in require:
import $ from 'jquery';
require('datatables.net-bs')(window, $);
require('datatables.net-buttons-bs')(window,$);
require('datatables.net-buttons/js/buttons.html5.js')(window,$);
I am developing a React & Reflux app, which is bundled by webpack with babel-loader (v6), and I am experiencing es6 modules dependencies issues
For example, I have a component that use the reflux .connect() mixin :
import MyStore from '../stores/my-store';
const Component = React.createClass({
mixins: [Reflux.connect(MyStore)]
});
When I import all modules individually in each file like this, everything's fine.
I then tried to improve my code by using deconstructed import statements :
...in a component :
//import One from '../js/one';
//import Two from '../js/two';
//import Three from '../js/three';
import { One, Two, Three } from '../js'; // Instead
...and in js/index.js :
import One from './one';
import Two from './two';
import Three from './three';
export { One, Two, Three };
App source code files are more concise using the above technique, because I can import all components in one import line.
But when I use this, some dependencies end up beeing undefined when I use them
If I use the same updated example...
//import MyStore from '../stores/my-store';
import { MyStore } from '../stores'; // Instead
const Component = React.createClass({
mixins: [Reflux.connect(MyStore)]
});
...MyStore parameter ends up undefined in Reflux.connect method.
I tried to troubleshoot in the debugger, but I'm not really aware of what's going on with the __webpack_require__(xxx) statements in the generated bundle. There must be a circular dependency that babel-loader or webpack require could not figure out when there are the index.js files re-exporting individual modules.
Do you know any tool that can help me figure this out? I tried madge but it does not work with es6 modules, and I could not find anything that would tell me where anything is wrong
In order to get extended info about build, run:
webpack --profile --display-modules --display-reasons
It will give you bunch of information for optimisation/profiling.
import statement is used to import functions, objects or primitives that have been exported from an external module.
As per MDN doc, you can import the Modules not the directory.
import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";
Reference URL:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
http://es6-features.org/#ValueExportImport
https://github.com/lukehoban/es6features#modules
http://www.2ality.com/2014/09/es6-modules-final.html
As a workaround keep one file as base.js and include all your 3 files.