I am trying to use the react-select component (https://github.com/JedWatson/react-select) and confused with this sentence while reading the documentation, see below:
Be sure to include styles at some point, probably during your bootstrapping
import 'react-select/dist/react-select.css';
When I import this line in the React JSX file where I am using the Select component I am getting the following error:
...node_modules/react-select/dist/react-select.css:8\n.Select
{\n^\nParseError: Unexpected token\n>",
"traces": {
"Application Trace": [
{
"id": 39,
"trace": "app/views/layouts/application.html.erb:7:in
`_app_views_layouts_application_html_erb___377503645297909977_70313107001300'"
}
],
"Framework Trace": [
{
"id": 0,
"trace": "browserify-rails (3.3.0) lib/browserify-rails/browserify_processor.rb:220:in `run_browserify'"
},
{
"id": 1,
"trace": "browserify-rails (3.3.0) lib/browserify-rails/browserify_processor.rb:51:in `call'"
},
{
....
}
Can someone provide some hints on this issue?
It looks like I found an answer towards this question.
Basically what I did is I manually copy the css file from node_modules/react-select/dist/react-select.css into /assets/javascript/stylesheets folder in my rails project.
For more infomation please look into: https://stackoverflow.com/a/10291177/5761338
Related
I created a React app with this command: npx create-react-app test-project
I have a small JSON file:
{
"colors": [
{
"id": 0,
"name": "red"
},
{
"id": 1,
"name": "green"
},
{
"id": 2,
"name": "blue"
},
{
"id": 3,
"name": "yellow"
}
]
}
And I am trying to display it in a list in React.
import {colors} from "./colors.json";
function App() {
return (
<div>
<ul>
{colors.map((c, i) =>
<li>{c.name}</li>
)}
</ul>
</div>
);
}
export default App;
When I run it, I get the following error:
Compiled with problems:X
ERROR in ./src/App.js 11:16-26
export 'colors'.'map' (imported as 'colors') was not found in './colors.json' (possible exports: 0, 1, 2, 3)
Because this project is pulled from a larger project, I happen to know what the issue is. In the package.json file, my react-scripts version is 5.0.0. If I downgrade it to 4.0.1, the issue resolves.
However, as someone who is learning React, I would like to understand why this error occurs. I don't understand why it is no longer able to recognize that an array from a JSON file would have a map function defined. I would definitely prefer the behavior found when I set react-scripts to 4.0.1.
Is this a bug or a feature? I have examined the release notes for react-scripts 5.0.0, but don't see anything relevant.
is there any way of using custom icons in primereact tree? I've tried importing them in css file and using them like that but it did not work.
Here is a sample of json file with primereact icon usage.
"key": "0-0",
"label": "Work",
"data": "Work Folder",
"icon": "pi pi-fw pi-cog"
Icon usage in css
.myIcon {
background-image: url('imgpath');
}
Here is a sample of json file with custom icon usage
"key": "0-0",
"label": "Work",
"data": "Work Folder",
"icon": "myIcon"
Would really appreciate help with this one
EDIT:
So I've managed to solve this problem by replacing background-image with content.
Css below:
.m-icon {
content: url("../images/module.png");
}
I've managed to solve this problem by replacing background-image with content.
Css below:
.m-icon {
content: url("../images/module.png");
}
I couldn't find this exact situation elsewhere: I have a custom add-on, which I'm loading temporarily via the developer menu. In the manifest file, I'm asking for a lot of permissions already:
{
"manifest_version": 2,
"name": "...",
"version": "1.0",
"description": "...",
"homepage_url": "...",
"permissions": [
"file:///*",
"*://*/*",
"<all_urls>",
"activeTab",
"bookmarks",
"contextMenus",
"tabs"
],
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": {
"19": "icon.svg"
},
"default_title": "..."
}
}
I have a background script only at the moment, however a small content script snippet gets injected:
(function() {
browser.browserAction.onClicked.addListener(async (tab) => {
let executing = browser.tabs.executeScript(tab.id, {
code: "window.getSelection().toString()"
})
...
try {
let selection = await executing
...
} catch(exception) {
console.log(exception)
}
...
})
})()
The purpose is essentially to get the current selection as text (for now) in order to later upload it to a bookmarking service of sorts.
However, when I have a tab open with a PDF file (https://www.example.com/file.pdf or file:///home/foo/file.pdf), the call of the content script to window.getSelection().toString() fails, with the following error:
Error: Missing host permission for the tab
Is this expected and I'm just missing a particular permission (and which one would that be)? Or is it unexpected and possibly worthy of a bug report?
Also, the call works in the developer console, which is why I'm thinking I'm really missing permissions somehow.
I need to integrate map chart using fusion chart library in my react application. after install fusion chart library through yarn configured component including fusion chart library, but when i render the map chart it shows me below error
After having error i just watch the node modules and check the existence of file, but seems like its not there, but my fusion chart installed successfully with no error then how this happened?
Here is my code
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import FusionCharts from 'fusioncharts';
import Maps from 'fusioncharts/fusioncharts.maps';
import World from 'fusioncharts/maps/fusioncharts.worldwithcountries';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
ReactFC.fcRoot(FusionCharts, Maps, World, FusionTheme);
class MapChart extends Component {
state = {
dataSource: {
"chart": {
showCanvasBorder: true,
canvasBorderColor: "#000000",
canvasBorderThickness: 1,
showBorder: true,
borderColor: "#000000",
fillColor: "#f1f1f1",
caption: "* USA traffic not displayed on Heat Map",
includevalueinlabels: "1",
showHoverEffect: false,
showEntityHoverEffect: false,
theme: "fusion",
},
data: [
{
"id": "27",
"value": "8",
"color" : "#f65122"
},
{
"id": "159",
"value": "3",
"color" : "#fcc50b"
},
{
"id": "142",
"value": "3",
"color" : "#f65122"
},
{
"id": "141",
"value": "9",
"color" : "#f3172d"
},
{
"id": "173",
"value": "9",
"color" : "#f3172d"
},
{
"id": "113",
"value": "5",
"color" : "#f65122"
},
{
"id": "193",
"value": "5",
"color" : "#f65122"
},
{
"id": "122",
"value": "9",
"color" : "#f65122"
}
]
}
}
render() {
return (
<React.Fragment>
<div style={{ width: '100%', margin: '20px', textAlign: 'center' }}><button><Link to="/">Back to home</Link></button></div>
<div style={{ textAlign: 'center' }}>
<ReactFC
type="worldwithcountries"
width="80%"
height="500"
dataFormat="JSON"
dataSource={this.state.dataSource} />
</div>
</React.Fragment>);
}
}
export default MapChart;
Any help on this issue would be greatly appreciated. Thanks!
Fusion Maps XT offers interactive maps to plot geographical data like revenue by regions, population by state, survey and election results effectively. You can also drop markers on the map to pinpoint places like office locations and flight routes. It has over 1000 maps including all continents, major countries and all the US states.
Fusion chart library initially not provided any collection of maps. Whenever you install fusion chart library on initial base it has only few maps file in map folder of package. Due to that reason you're file is not available in the whole package. They provided the link on their official page for download all the map related to fusion map chart.
To render these maps, you need to download the map definition files from here and copy-paste the maps folder within your fusion charts directory.
Please follow the steps
open link https://www.fusioncharts.com/download/map-definition-files
click on Download Map Definition Files(https://cdn.fusioncharts.com/downloads/addons/fusionmaps-xt-definition.zip) which contains collection of all the maps available in Fusion Maps XTall the maps available in Fusion Maps XT
after download copy the /maps folder from this download package and paste it in your fusion charts folder.
now run you're existing application the file will be found and your react application will work as expected.
Every information already defined on it official site of fusion chart but not in proper way so with the help of link which earlier defined you'll be directly redirect to that instruction page.
On GitHub i created one repository with map chart using fusionchart library, so you can download that repository and check exact functionality of map chart.
GitHub Repository
Since you are rendering the world with countries map in your app, you need to import fusioncharts.worldwithcounties.js, however, if you install FusionCharts via npm it does not have worldwithcountries file in the map folder, to get the file you need to install fusionmaps, here is the link - https://www.npmjs.com/package/fusionmaps
This will install all the map definition files, then you can use the following command:
import World from 'fusionmaps/maps/fusioncharts.worldwithcountries';
I have been trying to create a bundle of cards in https://developers.google.com/glass/tools-downloads/playground without success, here is what I did:
insert a card with the following json:
{
"text": "Cover",
"bundleId": "123",
"isBundleCover": true,
"notification": {
"level": "DEFAULT"
}
}
then insert a 2nd card with the following json:
{
"text": "Card 1","bundleId": "123","notification": {
"level": "DEFAULT"
}
}
But they don't appear to be threaded in my timeline under playground. What did I do wrong? Thanks in advance!
From the usage information at https://developers.google.com/glass/tools-downloads/playground
Note: The Playground does not support bundles.
Your card json looks to be correct though, so it should show up correctly on Glass.