I'm developing with Webpack (hot reloading) and I'm importing React components with import Sample from './components/Sample/Sample', however, I'd like to simple be able to import with import {Sample, SampleTwo} from './components'.
The former works, however, the latter throws an error.
components/
index.jsx
Sample/
Sample.jsx
SampleTwo/
SampleTwo.jsx
Inside of index.jsx, I've tried:
export {default as Sample} from './component/Sample/Sample' which works, however, I get a warning from Webpack saying it's in read-only mode. Then, I tried the following:
import Sample from './components/Sample/Sample';
export default {
Sample: Sample
}
As Davin suggested, you can just export the object whose properties reference your components:
import Sample from './components/Sample/Sample';
export { Sample: Sample }
or even better:
import Sample from './components/Sample/Sample';
export { Sample }
Then you can import this way:
import { Sample } from './components'
components/Sample/Sample.jsx
[...]
class Sample extends React.Component
{
[...]
}
export default Sample;
Component/SampleTwo/SampleTwo.jws
[...]
class SampleTwo export React.Component
{
[...]
}
export default SampleTwo;
components/index.jsx
import Sample from './Sample/Sample'
import SampleTwo from './SampleTwo/SampleTwo'
export {Sample, SampleTwo};
Related
I try to create sird Router in Play Framework (from official tutorial https://www.playframework.com/documentation/2.6.x/ScalaSirdRouter#Binding-sird-Router).
I created the same structure and files but I get error after compile "Compilation error value withPrefix is not a member of api.ApiRouter".
ApiRouter (from official tutorial):
package api
import javax.inject.{Inject, Singleton}
import play.api.routing.Router.Routes
import play.api.routing.SimpleRouter
import play.api.routing.sird._
class ApiRouter #Inject()(controller: controllers.ApiController) extends SimpleRouter {
override def routes: Routes = {
case POST(p"/") => controller.message("test")
}
}
ApiController works, routes file has error "cannot resolve api.ApiRouter" in
-> /api api.ApiRouter
I tried to change path and namespace in ApiRoter file (file put in app/controllers, namespace change to "controllers" and change to "controllers.ApiController" in routes line) but the same error.
Where did I mistake?
I am using Junit 4.1. When I tried to use AssertArrayEquals(...) it's not finding that method. I tried importing everything by import static org.junit.Assert.*;. I searched in the jar file but I didn't find this method, and need suggestions to resolve this.
import static org.junit.Assert.assertEquals;
import static org.junit.Assert.*;
import java.util.Arrays;
import org.junit.Test;
public class ArraysCompareTest {
#Test
public void testArraySort() {
int [] actual= {8,7,6,5};
int [] expected= {5,6,7,8};
Arrays.sort(actual);
//it fails because it checks object references not content
assertArrayEquals(expected, actual);
}
}
The problem here is Assert class is not showing AssertArrayEquals in suggestion.
Are you sure you have the JUnit4 jar? Assert.AssertArrayEquals wasn't present in JUnit3 and before.
I am currently attempting to return an observable from a service in Angular2. If you look at the following code, if I uncomment the line in the constructor, everything works fine, and the consumer of the service won't break. But when I try to remove the call from the constructor, it crashes with:
Error: XHR error (404 Not Found) loading http://localhost:3847/rxjs/observable
I believe that it is trying to subscribe to the todo$ property prior to initialisation. So how can I create an initial observer that doesn't actually make the call to the get method straight away? That is, I need some sort of empty Observer that will stop the subscribe line from falling over.
How am I supposed to achieve this?
Tony
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import {Todo} from './todo';
import {Observable} from 'rxjs/observable'
#Injectable()
export class TodoService {
public todos$: Observable<Todo[]>;
constructor(private http: Http) {
//this.todos$ = this.http.get('api/Todo').map(res => <Array<Todo>>res.json());
}
loadData() {
this.todos$ = this.http.get('api/Todo').map(res => <Array<Todo>>res.json());
}
}
import {Observable} from 'rxjs/observable'
should be
import {Observable} from 'rxjs/Observable';
^
I have this namespace
namespace Validation {
export function Func1() {
// code
}
export function Func2() {
// code
}
}
Which I can import in my app.ts:
import Validations = Validation;
But when I want to reference some modules in my Validation namespace
import {Request, Response} from 'express';
var jwt = require('jsonwebtoken');
var express = require('express');
import {Config} from './../config';
namespace Validation {
export function Func1() {
// code
}
export function Func2() {
// code
}
}
So then import Validations = Validation; in my app.ts giving me an error cannot find namespace Validation.
Why it is happened? Any thoughts how to fix?
UPDATE 1 : In case if I put imports after namespace I am getting an error Import declaration in a namespace cannot import a module:
namespace Validation {
import {Request, Response} from 'express'; //Error: Import declaration in a namespace cannot import a module
var jwt = require('jsonwebtoken');
var express = require('express');
import {Config} from './../config'; //Error: Import declaration in a namespace cannot import a module
export function Func1() {
// code
}
export function Func2() {
// code
}
}
my config.ts is just a simple class:
export class Config {
public static get Secret():string { return 'stuff'; }
public static get Database():string { return 'mongodb://127.0.0.1:27019/test'; }
}
And 'express' it is an npm package
UPDATE 2
I think I just fixed config by wrapping it in to namespace:
namespace Common {
export class Config { .. }
}
Also changed import statement from this import {Config} from './config'; to this: import Config = Common.Config; but haven't yet figure out how to fix 'express' thing
This happens because from the moment you put a top-level import or export statement into a file, that file is treated as an external module itself. If you are using internal modules (namespaces), I suggest importing inside namespaces, so that there are no top-level import or export statements.
namespace Validation {
import Request = ...;
import Response = ...;
export function Func1() {
// code
}
export function Func2() {
// code
}
}
The other approach would be to use external modules instead, but that requires a module loading system, which might be superfluous in many cases.
Right now, you are mixing internal and external modules, which is not recommended. Regarding complex structural cases like this, Typescript is still very far from being a mature language.
I assume that you have defined your validation functions in the separate (from app.ts) file. If this is the case then what you need to do is:
In your Validation.ts:
export function Func1() {
// code
}
export function Func2() {
// code
}
In your app.ts:
import * as Validation from './Validation';
Validation.Func1();
Your problem is most likely in mixing together concepts of modules and namespaces in typescript. Have a look here: Namespaces and Modules, and be sure to look through Modules and Namespaces
I'm trying out Haxe programming and OpenFL library with Flashdevelop as the IDE. I made a package for my global game classes and then tried to import it, it just says the class I'm importing doesn't exist. Shouldn't it notice that I have the class in a source file under the Source directory?
Here is the Source/Main.hx file:
package;
import flash.display.Sprite;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.Font;
import openfl.Assets;
import globals.Room;
class Main extends Sprite {
public function new () {
super ();
}
}
And here is the Source/Globals.hx file:
package globals;
public class Room {
public function new() {
}
}
Classes in the package this.is.a.package should be in the folder [source]/this/is/a/package so you should probably make a Room.hx file in Source/globals/
Also, FlashDevelop can make the class in the right folder if you define the package when you create it with the "Add -> New Class" menu (right click on your project)