I'm building a notes app but I run into a problem, I installed react-mde, react-split, and showdown as dependencies using npm install but the editor's CSS styling is missing, what could be the problem?
The source code: https://github.com/arturfriedrich/notes-app
This is from the Scrimba React course, right?. I was having the exact same problem. Here's how I solved it.
Just put this line of code in your App after all your imports:
import "react-mde/lib/styles/css/react-mde-all.css";
See also the React MDE documenation.
Related
So I have been trying to import JSON Simple (https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple/1.1.1)
I am also using Visual Studio Code. So I have added the dependency in my pom.xml file, but it still wont find my imports. Do I have to add soemthing to my module-info? (fixed a different issue for me) I tried requires com.json.simple; or requires com.googlecode.json.simple; but I get the cannot be resolved to a module error. Also my project is a javafx Application, that implements server socket networks (JSON exchage).
Im at a complete los here on what to do...
Thanks for your help.
So after a lot of trial and error, i have finally fixed it. Instead of vs code I used IntelliJ and added the dependencies there. Its impotant to note, that after every import I had to restart intelliJ also make sure to press the icon as mentioned in this tutorial https://www.jetbrains.com/help/idea/work-with-maven-dependencies.html#maven_import_dependency.
I am using React (16.12.0) with PhpStorm (2019.3.1).
The package I am importing is react-router-dom (5.1.2)
I will write the following import:
import { NavLink, Switch } from "react-router-dom";
Both packages are imported properly by webpack/babel and the page renders properly when I use both Switch and NavLink.
However purely from the IDE-perspective, I get a warning about Switch: Cannot resolve symbol 'Switch'
It is weird because it is obviously there, and I checked in /node_modules/react-router-dom and Switch.js is there.
Strangely on previous versions of PhpStorm (before several updates and plugin imports and other changes), the Switch import was accurately found by PhpStorm.
I have not updated react-router-dom recently and am using its latest stable build.
Any ideas as to why it might be missing Switch?
EDIT:
I have realized it may be because PhpStorm is having difficulty importing a commonJS module.
I tried changing the Javascript compilation method from React JSX to ECMA 6. That didn't work.
I also tried importing some build libraries for react-router-dom, and that worked for recognizing the Route import strangely but not Switch.
I also tried invalidating the PhpStorm cache and restarting the app, but that didn't work either.
EDIT 2:
Per an answer, I have tried to use option+enter (alt+enter on windows) while my cursor is within react-router-dom to try to install a typescript package, but I don't get the same suggested action as shown on the JetBrains website: https://www.jetbrains.com/help/webstorm/configuring-javascript-libraries.html
All it suggests is switching single quotes to double quotes.
Also I have already installed #types/react-router-dom. Perhaps there is another one that I am missing?
EDIT 3:
The correct answer was to install #types/react-router. For some reason #types/react-router-dom is deceivingly NOT what solves this.
node_modules/react-router-dom/esm/react-router-dom.js exports BrowserRouter, HashRouter, Link and NavLink, but doesn't export Switch, it's not explicitly defined there.
For better completion/type hinting, you can install Typescript stubs for the package: put cursor on "react-router-dom" in import statement, hit Alt+Enter, choose Install TypeScript definitions for better type information::
See https://www.jetbrains.com/help/webstorm/2019.3/configuring-javascript-libraries.html#ws_jsconfigure_libraries_ts_definition_files
I'm developing an app using Jhipster where I'm trying to show a <ng-select>, that is not rendering as the attached file, I have also included the default theme (#import "~#ng-select/ng-select/themes/default.theme.css") in vendor.css and have rebuilt everything, it's not displayed too. Any help is appreciated.
I had the same issue as you and I solved it.
This is not an issue related to , but to any library you want to use.
To be able to add any thrid party library, you should follow the way jhipster is doing.
1- Create a module where to add the libraries module in import and export sections
2- Add this module (in import and export sections) to the shared.module.ts module.
A good example is here: https://medium.com/#cyril.casaucau/how-to-add-angular-material-on-an-jhipster-5-x-app-97c9569c9f97
Or simply add the NgSelectModule module to shared-libs.module.ts file.
we started our project with ES6 javascript skeleton.
we would like to extract some styles and custom attributes to a common folder so we can use these at any Aurelia module we will build in the future.
the problem is with the bundle files. we don't know how to config them to bundle external folder out of the main ES6 folder.
can you please tell us what to do?
It sounds like you want to build an Aurelia plugin that you can import into any project. I would start by taking a look at the Aurelia plugin skeleton.
Once you've built your plugin with the custom styles and attributes you want, you'll want to either register it with jspm as a link, or publically through a registry such as npm or github.
Once published, you will be able to jspm install registry:my-package in any new project, and add the following line to your main.js file:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.plugin('my-package');
}
For more information on this last step, see the brilliant answer provided by Ashley Grant here.
I'm using this yeoman generator (https://github.com/Swiip/generator-gulp-angular) for my project. And have added a couple of bower libraries, namely, videojs, ngDialog.
The problem I'm experiencing is that the css files included in these libraries aren't being packaged up into the vendor.css file like the rest of the packages are. I know that that the generator uses wiredep, but I'm afraid I don't know enough about it to find out what went wrong.
Basically, when I go to view source, I see that there are style includes underneath the vendor.css style include, eg.
<link rel="stylesheet" href="../bower_components/ngDialog/css/ngDialog.css">
Also notice how it is included using "../". This would break if I'm in an HTML file that is in a directory other than the root.
Any pointers?
Thanks.
John.
Basically you don't have to worry about the building process, the gulpfile provided by gulp-angular is well configured for you future including bower components.
Once you run bower install your_component, be sure to run gulp build again in command line, it will then include the needed styles to your index.html.
If you would like to know more about the underlying process with that, you may check yourapp/src/index.html from line 12 to line 20 to get a sense of it. For how wiredep works for your bower components, the official document should suffice.