I'm finding it pretty hard to wrap my head around the jspm/systemjs ecosystem sometimes, but today I found a workaround to the following problem.
I needed to be able to do something like this:
import 'bootstrap'
import 'ifightcrime/bootstrap-growl'
Problem is that when I do jspm install -y github/ifightcrime/bootstrap-growl#1.1.0 only the folder (and files inside of course) jspm_packages/ifightcrime/bootstrap-growl#1.1.0 is created, but the bootstrap-growl#1.1.0.js which is responsisble for the module.exports is missing.
So when I manually add that in jspm_packages/ifightcrime/ like this:
// bootstrap-growl#1.1.0.js
module.exports = require("github:ifightcrime/bootstrap-growl#1.1.0/jquery.bootstrap-growl");
I can do the import in my code.
But how would I make sure this file is created automatically when other people do a jspm-install? This file was created manually by me, so it wouldn't be working for them, without also doing this.
Related
I've started a simple playground project where I only have installed bootstrap (with npm install bootstrap), and the scss compiler package (with node install nose-sass).
I only need the reboot.scss code at the moment.
I would like to import it in my custom scss file and then start writing my bespoke scss code.
My scss file is in /src/scss/style.scss.
And I'm trying to import the bootstrap reboot file, which is /node_modules/bootstrap/scss/bootstrap-reboot.scss.
In my /src/scss/style.scss I wrote:
#import "../../node_modules/bootstrap/scss/bootstrap-reboot";
I need the reboot style from bootstrap. Is there a better way to do it?
Yep, you are correct.
Check this out: this is the documentation on how to do exactly what you mention.
https://getbootstrap.com/docs/4.0/getting-started/theming/#importing
hope you're doing well.
I'm new at react native and i'm stuck with a problem while trying to import a node module.
I need to create an app that will get orders from the API of a Wordpress Website with WooCommerce.
I first created a project with the command create-react-native-app picking then npm install. It's creating a structure like this in the project folder named picking:
node_modules
App.js
app.json
App.test.js
etc....
Then I installed the package woocommerce-api with npm install woocommerce-api --save (https://www.npmjs.com/package/woocommerce-api). This package allow me to do request to the WooCommerce API easier.
I want to not put the config to the WooCommerce API in the App.js, so I created a folder src and a folder woocommerce with a file api.js (should I write it with the first letter in uppercase ?) in it and I added import Api from 'picking/src/woocommerce/api'; in my App.js.
So now the structure is
node_modules
src
-- woocommerce
-- api.js
App.js
app.json
App.test.js
etc....
The problem is that I can't achieve to import the WooCommerceAPI module from woocommerce-api, no matter what I set in path to get the module.
There is the file api.js at the moment :
import WooCommerceAPI from '../../woocommerce-api';
var Api = new WooCommerceAPI({
url: 'http://localhost/mysite',
consumerKey: 'ck_xxxxxxxxxxxxxxxxxxxxxxxxxx',
consumerSecret: 'cs_xxxxxxxxxxxxxxxxxxxxxxxxxxx',
wp_api: true,
version: '/wc/v2',
queryStringAuth: true
});
export default Api;
And I get the error :
Unable to resolve module '../../woocommerce-api' from etc ...
I can't find what is the problem and why this is not working. If you could help me on this, it would be very nice.
Have a nice day everyone :)
EDIT: I changed the line for the import to import WooCommerceAPI from 'woocommerce-api'; and I got a new error : Metro Bundler has encountered an internal error, please check your terminal error output for more details, but there is nothing in the terminal except Failed building JavaScript bundle.
EDIT2: I downgrade node from 9.4 to 8.0.0 and restart the project. I got the same error but in the terminal i now get this in yellow/orange : Problem checking node_modules dependencies: Unexpected end of JSON input
Okay, so I find a workaround. In fact, the import is working. For some reason that i don't know, this is the npm package that is not working and make the app crash.
So I removed the package woocommerce-api and I create a file in src/woocommerce called woocommerce-api.js, then I copied the content of this https://github.com/minhcasi/react-native-woocommerce/blob/master/WooCommerceAPI.js that is the same as the one in the npm package and I pasted it in my woocommerce-api.js. I import it in my api.jsfile and "voilà" !
Seems to work fine.
As you install woocommerce-api in your project there is no need to place the location like ../../woocommerce-api.
just change ../../woocommerce-api to woocommerce-api and your project should work.
I am trying to learn Node and React and I ran into an interesting problem where - in the import statement like below, I need to explicitly type the file format (.jsx) otherwise, the compiler borks up and complains that it cannot find App.js file.
import App from './App.jsx';
Note - App is a jsx file and saved as App.jsx. I used create-react-app for boilerplate code.
Also, I found some more information on GitHub on the lines of "The distinction between .js and .jsx files was useful before Babel, but it’s not that useful anymore."
https://github.com/facebook/create-react-app/issues/87
So, it looks like a non-issue as long as save it as .js and I have babel to compile ES6.. Thanks everyone!
Here your assumption is incorrect.
If I am right then you are assuming that if your file is .jsx, then you don't need to specify the file extension in the import statement to import .jsx file.
But its the other way round.
If you don't specify the extension of the file then compiler assumes that it is a .js file. So, there is nothing wrong with the behavior that you are seeing.
OR
If you don't want to include extensions in the import statement then just create .js files. Compiler will automatically detect the jsx written inside it. This is the easiest way to fool import statement.
Any javascript react snippets will not show up in a plain .js file only a .jsx file
I suggest that closing the running project on Browser
(ctrl + c / command + c on terminal to finish running project) and do
'yarn start' or 'npm start' again. then it would work!
React sometimes shows errors when you add new files like jsx, js, etc..
and I also had the same problem with you.
(I changed App.js to App.jsx and webppack error was occured).
In these case re-starting project would be the solution!
finally you don't need to specify file extension (like the other answers suggestion).
How would I import ts-topojson into an Angular2 project so I get Typescript typings? I installed the module using npm and tried to include with a simple import statement but the linter said it couldn't find 'topojson'.
import { Topojson } from 'topojson';
This is my first Angular2 project so I'm very new at this so I could possibly be missing a crucial step.
You could install the package #types/topojson with npm install #types/topojson --save-dev.
Now you can use topojson the following way within a component:
import {topology, feature, ...} from 'topojson';
Or with:
import * as t from '#types/topojson';
Try the following:
Make sure the script is loaded into your scripts in .angular-cli.json.
At the top of a file you want to use the library, add declare let Topojson: any;.
Now you can use Topojson without the TS compiler yelling at you, because it will be implied that it's loaded as a script and made available to you during runtime.
This is what I've done so far :
Install NodeJs and play with it : the node command is available
Install TypeScript using npm : npm install typescript -g
Now I am able to create .ts files, use the TypeScript syntax and compile the files using tsc command
Okay, from now on everything works fine. What I am doing is translating a Java library to TypeScript. But I am facing an issue : The Java library is using the Calendar object and I need the same kind of object in TypeScript.
I've searched a bit and found moment.js. I wanted to import that library into my TypeScript files.
Question : How do I do that ? I've looked around on StackOverflow but in every post I found there was something that made me think this would not be my solution, like :
Install typings / tsd : I've read that now moment.js has now a definition file (? sorry, maybe it is not the good term, but it has a moment.d.ts file)
Check in random.config.json file : I do not have such a configuration file (not in NodeJs in my guess, and in TypeScript I have the tsconfig.json file, and tried to include the moment.d.ts file but I wasn't able to import it in TypeScript > "cannot find module moment")
Install moment from npm : I've done it, but I didn't find out how to include the moment.d.ts file in my project.
and so on ...
I would like to know what I am missing and how to include moment in my .ts files in order to use it. I probably lack of some knowledge about the organisation of these modules, so every explanation will be welcome.
NodeJs version : 7.1.0
TypeScript version : 2.0.10
EDIT
After digging a bit, I found that I could compile my .ts files using tsc Test.ts --traceResolution to see if the imports are resolved correctly. Result : They are ! The real problem now is that my IDE (Visual Studio) doesn't know about moment.
The thing is that I have created each .ts file manually, by creating a new file, changing the extension and opening it in Visual Studio. Maybe that is the problem ? I'm just using Visual Studio as a text editor with IntelliSense. Do I have to make something in order to make Visual Studio understand that the import comes from NodeJS ?
You do not have to install moment.js interface because it provides its own types definitions.
Import moment.js in typescript (you were right).
import * as moment from 'moment';
Use moment.js in typescript
var momentObject: moment.Moment
momentObject.something() (ex: momentObject.add(..))