I'm quite new to react. I've just started following instructions and experimenting with create-react-app. After create a empty application, I tried to add a grid which is from react-bootstrap-table.
Very simple codes below:
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
var products = [{
id: 1,
name: "Item name 1",
price: 100
},{
id: 2,
name: "Item name 2",
price: 100
}];
function priceFormatter(cell, row){
return '<i class="glyphicon glyphicon-usd"></i> ' + cell;
}
ReactDOM.render(
<BootstrapTable data={products} striped={true} hover={true}>
<TableHeaderColumn dataField="id" isKey={true} dataAlign="center" dataSort={true}>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField="name" dataSort={true}>Product Name</TableHeaderColumn>
<TableHeaderColumn dataField="price" dataFormat={priceFormatter}>Product Price</TableHeaderColumn>
</BootstrapTable>,
document.getElementById("root")
);
However it doesn't seem to be able to load stylesheet correctly.
I've also tried to use :
require('react-bootstrap-table/dist/react-bootstrap-table-all.min.css')
according to suggestion from other posts but no luck.
Did I make any mistakes?
I figured out at the end. Looks like document of react-bootstrap-table in github is incomplete and has an dependency of bootstrap/react-bootstrap.
Problem solved after I installed react-bootstrap and bootstrap module also import bootstrap css.
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap-theme.min.css';
Related
Just started using Nuxt.js a week ago and I'm not getting the hang of the plugins system.
The relevant part of my nuxt.config.js looks like this:
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'~/plugins/lodash',
],
And I created a file named lodash.js in the plugins directory that looks like this:
import Vue from 'vue';
import lodash from 'lodash';
Vue.use(lodash);
But then in my .vue component, when I console.log('lodash:', this.lodash), it prints out lodash: undefined, and when I try to use this.lodash.pick(['a'], { a: 'a', b: 'b' }), for instance, it throws the error: TypeError: Cannot read property 'pick' of undefined.
So then I tried using this.$lodash (added an $), and when I then console.log('lodash:', this.$lodash), it logs lodash: ƒ, and using console.log('lodash:', this.$lodash()) (calling it like a function) logs lodash: LodashWrapper {__wrapped__: undefined, __actions__: Array(0), __chain__: false, __index__: 0, __values__: undefined} (i.e. an object with a bunch of worthless properties).
So then I thought maybe Vue.use() isn't the way to go and maybe I should instead inject lodash, so I changed up my lodash.js plugin file to look like this:
import lodash from 'lodash';
export default({ app }, inject) => {
inject('lodash', lodash);
}
But that led to exactly the same results. And now I don't know what else to try. So my question is how do you install and use lodash (and I suppose any other random npm module) in a nuxt.js project?
FWIW my project's running nuxt version 2.14.12
I've achieved adding lodash into this.$_ using Atif Zia's reccomendation of vue-lodash.
plugins/lodash.js:
import Vue from 'vue'
import VueLodash from 'vue-lodash'
import lodash from 'lodash'
Vue.use(VueLodash, { name: '$_', lodash })
nuxt.config.js:
export default {
...
plugins: ['~/plugins/lodash.js'],
...
}
Usage in script:
var object = { 'a': 1, 'b': '2', 'c': 3 };
this._.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }
Looking at their GitHub, it looks like this package allows lodash to be webpacked properly.
Hi #PrintlnParams you can eigther use vue-lodash package to achieve
this.$_.sumBy().
or you can import lodash as
import _ from "lodash"
or individual components as
import { sumBy } from "lodash"
to use with Nuxt.Js
I have followed the instructions on https://github.com/Justineo/vue-awesome
in my jest.config.js I add the following
transformIgnorePatterns: [
'/node_modules(?![\\\\/]vue-awesome[\\\\/])/'
]
my nuxt.config.js
build: {
transpile: [/^vue-awesome/] // enable font-awesome integration.
},
The icons work just fine when I'm running the dev box, but I get the following when I run yarn test:
[path/to/project]/node_modules/vue-awesome/icons/building.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Icon from '../components/Icon.vue'
^^^^^^
SyntaxError: Cannot use import statement outside a module
explicitly, the issue seems to be something to do with how babel reads (or overlooks) the imports above the Icon component import. So, for example, given the building.js in the error log above, here is how the import looks in the vuejs file:
<script>
import 'vue-awesome/icons/building'
import Icon from 'vue-awesome/components/Icon'
export default {
componentes: {
'v-icon': Icon
}
...
}
</script>
It looks like I have to explicitly mock the component and its imports at the top of the file (below the imports)
the following works for my test.
import { shallowMount, createLocalVue } from '#vue/test-utils'
import Vuex from 'vuex'
import { AxiosSpy, MockNuxt } from 'jest-nuxt-helper'
import index from '#/pages/courses/index'
// MOCKS:
jest.mock('vue-awesome/icons/building', () => '')
jest.mock('vue-awesome/components/Icon', () => '<div></div>')
...
I am searching in the documentation but i not find any examples for using the maps modules with zingchart-vue
Really I am using Nuxt, but i supose that its same...
we have updated our readme in the zingchart-vue repo on how to address the problem.
https://github.com/zingchart/zingchart-vue#zingchart-modules
ZingChart comes bundled with your common chart types such as line, column, pie, and scatter. For additional chart types, you will need to import the additional module file.
For example, adding a depth chart to your vue component will require an additional import. Note, you must import from the modules-es6 directory in the zingchart package.
import 'zingchart/modules-es6/zingchart-depth.min.js';
Here is a full .vue example for loading a map:
<template>
<div style="height:200px">
<zingchart :height="'100%'" ref="myChart"
:data="{
shapes: [
{
type: 'zingchart.maps',
options: {
name: 'usa',
ignore: ['AK','HI']
}
}
]
}" >
</zingchart>
</div>
</template>
<script>
import zingchartVue from 'zingchart-vue';
import 'zingchart/modules-es6/zingchart-maps.min.js';
import 'zingchart/modules-es6/zingchart-maps-usa.min.js';
export default {
components: {
zingchart: zingchartVue,
},
}
</script>
I'm new to Ionic 4 and am trying to get SQLite working. I have added the cordova plugin and the ionic native sqlite but when I try and set it up in the app module I get the above error. Here is my app,module.ts
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { IonicStorageModule } from '#ionic/storage';
import { SQLite } from '#ionic-native/sqlite';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), IonicStorageModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
SQLite,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Can anyone help?
You have to import from '#ionic-native/sqlite/ngx'
https://ionicframework.com/docs/native
It looks like this has to do with the recent release of Ionic 4. I ran into this issue with #ionic-native/file within my app. If you installed after the release without specifying the version you wanted, you probably got the latest or beta version.
I was able to fix it by rolling back to an earlier version by modifying my package.json to reflect the version required -- I had 5.0.0 installed and rolled back to 4.20.0. If you have VersionLens for VSCode it will show you the minimum and the latest versions.
Then, clear your node modules, and reinstall:
rm -rf node_modules/
npm install
There is another post open this, available here:
Type HTTPOriginal is not assignable to type Provider, ionic error after plugin installation
It happens because of the new update of ionic 4.
You have to add /ngx to your plugin's import. Like this:
import { PluginName} from '#ionic-native/pluginName/ngx';
Otherwise fallback to ionic v4.
More info here
Everywhere where native plugins are imported, you need to add /ngx/.
Moreover, this must be done throughout the project, otherwise the error will still appear.
Error example:
import {Market} from '#ionic-native/market';
True example:
import {Market} from '#ionic-native/market/ngx';
Import:
import { SQLitePorter } from '#ionic-native/sqlite-porter/ngx';
import { SQLite } from '#ionic-native/sqlite/ngx';
And add into provider:
providers: [
SQLite,
SQLitePorter
]
This usually happens if you import them from different path.
You have to import '#ionic-native/sqlite/ngx' at both app.module.ts and the page you want to use it.
I try to use swiper from this library https://github.com/leecade/react-native-swiper
Here is my dependencies:
"react": 16.3.1,
"react-native": "~0.55.2",
"react-native-swiper": "^1.5.13"
But when i just add this code import Swiper from 'react-native-swiper';
My component like:
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Swiper from 'react-native-swiper';
class Welcome extends Component {
render() {
return (
<View>
<Text>Welcome</Text>
</View>
);
}
}
export default Welcome;
It will shows error even i don't use the <Swiper />
error:
Failed to load bundle
Check my terminal error shows:
error: bundling failed: Error: While trying to resolve module `react-native-swiper` from file `/Users/huaweb/ReactNativeProject/Huaweb/src/components/Welcome.js`, the package `/Users/huaweb/ReactNativeProject/Huaweb/node_modules/react-native-swiper/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/huaweb/ReactNativeProject/Huaweb/node_modules/react-native-swiper/index.js`. Indeed, none of these files exist:
I don't know what is However, this package itself specifies amainmodule field that could not be resolved
I can't figure it out. Is any thing i miss it ?
Any help would be appreciated, thanks in advance.
In node_modules find the folder react-native-swiper and do so, It worked for me
replace :
module.exports = Swiper;
module.exports.default = Swiper;
by
export default Swiper
export {Swiper}
try with:
import Swiper from 'react-native-swiper/src';