I am trying to import famous into my application
When i create a breakpoint in the base index.html file in ember cli and look at what require seems to know about i see famo.us is there
in my brocfile i have tried the following
app.import('vendor/famous/famous.js', {
'famous/core/Context':''
});
app.import('vendor/famous/famous.js', {
'famous/core/Context':'default'
});
app.import('vendor/famous/famous.js');
this may be fixed by master of loader.js https://github.com/stefanpenner/loader.js/issues/25
Related
Currently working on a react app which uses the Facebook SDK. It seems to brake on the import of com.facebook.CallbackManager with the following error:
/android/app/src/main/java/com/phonebook/theredcorner/MainApplication.java:5: error: cannot find symbol import com.facebook.CallbackManager;
I've tried many suggestions online but it all doesn't seem to work. Anyone recently got this error and knows how to solve it?
I'm importing it in my MainApplication.java as follows
package com.phonebook.theredcorner;
import android.app.Application;
import com.facebook.CallbackManager;
import com.facebook.FacebookSdk;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.appevents.AppEventsLogger;
Furthermore I've followed all steps on the Facebook getting started page to implement the Facebook SDK.
The Facebook SDK was published as an independent module to Maven. Include the dependency in the app/build.gradle file.
dependencies {
// Facebook Core only (Analytics)
implementation 'com.facebook.android:facebook-core:5.0.0'
}
You may also need to add the following to your project/build.gradle file.
buildscript {
repositories {
mavenCentral()
}
}
If the error persists after installation, make sure the file is in the next path.
facebook-android-sdk/facebook-core/src/main/java/com/facebook/CallbackManager.java
I'm trying to add OfficeUI fabric components in a blog build using gatsby js.
As soon as I'm importing any component, the site stop to works.
Using develop command, I can see in the browser console : SyntaxError: export declarations may only appear at top level of a module
How to fix this ? (I'm very new to node dev).
Searches I've done suggest problems with babel not using the es2015 preset. However, I double checked, the .babelrc file is mentioning this preset.
Here's the complete operations I've done (on Windows 10 x64 if it matters):
cloned the gatsby-starter-blog-no-styles repo :
gatsby.cmd new someblog https://github.com/noahg/gatsby-starter-blog-no-styles
cd someblog
npm install
drink a coffee (will move to yarn soon)
Check that works
gatsby develop
Opened the browser (http://localhost:8000). Its Ok
added office ui fabric react components
npm install --save office-ui-fabric-react
Restart gatsby develop. Still working
change src/layouts/index.js file to import an office component
import React from 'react'
import Link from 'gatsby-link'
import { Button } from 'office-ui-fabric-react/lib/Button'
class Template extends React.Component {
....
And voilà! it stop to works. In the browser console, I see an error : SyntaxError: export declarations may only appear at top level of a module
I put in GH a complete reproduction repository : https://github.com/stevebeauge/repro-gatsbyjs-officeui-error
[Edit] Digging a bit I can see in the generated 'common.js' file the error :
/***/ "./node_modules/office-ui-fabric-react/lib/Button.js":
/***/ (function(module, exports) {
export * from './components/Button/index';
//# sourceMappingURL=Button.js.map
/***/ }),
The export here seems to be forbidden, which leads to Babel issue (not found how to solve though)
Recently i stumbled upon the similar error, my solution was to explicitly import from lib-commonjs:
import { Button } from 'office-ui-fabric-react/lib-commonjs/Button';
instead of
import { Button } from 'office-ui-fabric-react/lib/Button'
Seems to be the error occurs since babel isn't converting office-ui-fabric-react to CommonJS module.
I am using create-react-app and trying to install mapbox-gl-draw.
npm install #mapbox/mapbox-gl-draw
This works with some npm warnings. I then try to pull mapbox-gl-draw into a component like this:
import React,{Component} from 'react';
import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';
import ReactMapboxGl from 'react-mapbox-gl';
import MapboxDraw from '#mapbox/mapbox-gl-draw/dist/mapbox-gl-draw'
console.log(MapboxDraw)
I just get an empty object.
I am using create-react-app. Do I need to use a different webpack .config file.
What is the best way to import mapbox modules like this?
If you're using webpack, you need to alias to use mapbox-gl dist file, here is how I have done it using webpack2:
resolve: {
modules: ['src', 'node_modules'],
extensions: ['.js', '.jsx', '.json', '.css', '.svg'],
alias: {
// mapbox-gl related packages in webpack should use dist instead of the default src
'#mapbox/mapbox-gl-draw': path.resolve(root, 'node_modules/#mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.js'),
},
},
Variable "root" was defined earlier in the file to refer to the root directory of the project, on the same level as package.json etc.
The same problem can happen in react-map-gl-alt where you need to alias 'mapbox' to 'node_modules/mapbox/dist/distfilehere.js'.
To expand upon medv's answer, at current, in your package.json, you need to add the mapbox-gl v0.270 - v0.38.0, like:
"mapbox-gl": ">=0.27.0 <=0.38.0 when using "#mapbox/mapbox-gl-draw": "^1.0.1".
This is explained at the 'Requires' line here & if you look at the peerDependencies in the package.json.
I want to use RxJS-DOM library to parse json data from file. I have some difficulties with including this library to Angular2 application. First, i installed RxJS-DOM with NPM. And i need to import this library to my service file with import expression.
import {name} from 'path/to'
How can i know which name and which path to use to import this library by analogy with, for example, import {Injectable} from 'angular2/core' ?
Do i need to include this library in index.html like this and why ?
Thank you.
Usually it's SystemJS, which is loading up modules for you. You're configuring it with a systemjs.config.js file or inline in your index.html. There you tell it to load packages from your node_modules folder and with which name you want to register it and so on.
If you're using the Angular 2 Quickstart project, and the Beta version of Angular 2, then the configuration is probably done in your index.html and rather minimal at that. You will find, that every extra NodeJS module you want to use, you have to import with a <script> tag. (That's not the case if you go the SystemJS config route)
So your base path it usually the node_modules folder, when you're importing in your TypeScript file. If you want to import "local" files that are not modules from your node_modules folder, you do that with
import {class} from './path/file';
Regarding your JSON problem - I would leverage Angular's Http class to read in JSON files like this:
interface IConfig {
thingEnabled: boolean;
otherStuff: string;
}
[...]
this.http.get('./config.json')
.map((res: Response) => res.json())
.subscribe((res: IConfig) => {
// do something with the already deserialized JSON here
console.log(res.otherStuff);
});
I've got a file named index.js which looks like this:
import Backbone from 'backbone'
import _ from 'underscore'
import $ from 'jquery'
console.log("blah")
export default {...}
In my index.html I've got:
<script>
System.import('index');
</script>
But what's baffling me is that I can see the file being loaded (in the dev tools network panel) but the console.log is never run. If this is the case, how am I to bootstrap my application?
Several online tutorials suggest bootstrapping it in the System.import file but how can that be done if the code isn't executed?
I ended up adding a .then() to the System.import with three anonymous functions, all with just a debugger and found that the import $ from 'jquery' was timing out because I didn't have the library installed. I removed the import declaration and the app was still trying to load jquery, so I installed it and it fixed the issue.