We've started to build an application and came to decide we want to integrate it with office-ui-fabric-react. I know how to install packages using npm ..., I just have no idea where to install both NodeJs & gulp.
I have a repository called Relationize, in that repository I have a folder to my Api and to my web application(here is also my package-lock.json located).
In here I don't know if it should either be in the root where my project file is or in my wwwroot (as said it should be in your root). But when I ran all 3 commands: npm i -S nodejs, npm install --global gulp-cli and eventually npm --save install office-ui-fabric-react to install the office package.
When I try to add a component in a seperate javascript file to just test if it works(just copied the code from #Microsoft:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
const MyPage = () => (<Fabric><DefaultButton>I am a button.</DefaultButton></Fabric>);
ReactDOM.render(<MyPage />, document.body.firstChild);
It gives an error:
Uncaught SyntaxError: Unexpected token import
Does anyone have an understandable guide on how to implement this in an existing project or someone who wants to spend some time helping me to implement it?
Thanks in advance!
Perhaps you are missing the ecosystem of build tools to transform your js file into something that is understood by your browser e.g. babel, webpack and the like? It's possible that your browser understands the latest module syntax though...
There is a good example program at: https://medium.com/#gmonne/simple-app-layout-with-office-ui-fabric-react-2eac6361e1b4. There are other examples.
Related
I'm new to react-native, since I'm using Expo and I had to install react-native community picker, I used the following command to install:
npm install #react-native-community/picker --save
After that I import it like this:
import {Picker} from '#react-native-community/picker';
But I get the following error:
While trying to resolve module `#react-native-community/picker` from file `C:\xampp\htdocs\secondtry\screens\HomeScreen3.js`, the package `C:\xampp\htdocs\secondtry\node_modules\#react-native-community\picker\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\xampp\htdocs\secondtry\node_modules\#react-native-community\picker\js\index.js`. Indeed, none of these files exist:
You need to use expo command for installing:
expo install #react-native-community/picker
Here is doc
The Author renamed the library to #react-native-picker/picker. Please try to use it.
For details see this link.
SyntaxError: import declarations may only appear at top level of a module with Yeoman.
I installed Yeoman and generator-ko for knockoutjs. I must say I never used Yeoman before but I heard it's a magic wand for frontend developments.
Steps I did:
sudo npm i -g yo bower http-server
sudo npm i -g generator-ko
mkdir testing && cd testing && npm init
yo ko
http-server src
In the browser's console I get:
SyntaxError: import declarations may only appear at top level of a module
From a file called startup.js which looks like:
import 'jquery';
import 'bootstrap';
import ko from 'knockout';
import 'knockout-projections'
import * as router from './router';
The package generator-ko looks a bit outdated (2 years old) would that be the issue here? If so, which package should I use then to start using knockoutjs?
EDIT: I tried with classical-ko which is more recent (~6 months) and I get the same error :/ ARG)
Now I feel stupid, in the demo I watched the guy was calling http-server but I had to actually call gulp serve:dist or gulp serve:src.
Sorry for wasted time.
I'm using meteor. I'd like to use redux-undo to develope
I have installed like this
meteor npm install redux-undo
And use
import undoable, { ActionCreators } from 'redux-undo';
The meteor always shows this errors
Cannot find module 'redux-undo'
However, I install the redux module and import as above, it works well. :(
Some one help me, thanks so much!
I have just build my first npm package. It is a small utility for helping me manage logins on hobby projects.
In v0.0.2 of this package I had an import that looked like this:
import { setRoute } from 'actions/route-actions';
Which did not work so i changed it to this
import { setRoute } from 'auth-hub-module/lib/actions/route-actions';
However when I try to install the new version (0.0.4) in my other projects I keep getting the import from version 0.0.2.
Why is this? How Can I debug this?
My build script works fine when I am in the package repo and the files being built there has the correct path.
I tried uninstalling and reinstalling the package in the project with no luck.
I'm pretty new to some of this stuff and I feel like I must just be missing something simple. I have a very basic Ember.js app that I created with the CLI tool flowing the guide. The code is at https://github.com/nfriedly/particle-webhook-manager
It has a couple of routes and components, and a single third-party dependency, particle-api-js. I installed it twice, via bower and npm, and I'm importing it in one of my components like so:
import particle from 'particle-api-js';
I start up my server with ember serve and it builds successfully. I then open my browser to http://localhost:4200/login where I load the component and it gives me the following error in my console:
Error: Could not find module `particle-api-js` imported from `particle-webhook-manager/components/login-form`
So, my main question is: what am I doing wrong here/how do I make it work?
My secondary question is: why did it "build" successfully and then throw a runtime error for the missing module - shouldn't it have found that in the build stage?
You should not use bower anymore. Use ember browserify to import things installed with npm.
You can import bower modules in your ember-cli-build.js with app.import('bower_components/...js').
You can not import them directly, but you can create a vendor shim to provide this for you. Checkout the ember-cli documentation for this.