rt-import syntax question

[shiefra]

What is the difference between <rt-import name="TagName" from "module_name"> and <rt-import name="*" as="TagName" from "module_name"> ?

For some module, I tried first one and I got the error message like below.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `Calendar3`

After some googling I tried second one, and then It works well. Can anybody explain the difference between first and second one?

[nippur72]

the first is rendered to a named import:

import { TagName } from "module_name";  // ES6 syntax
const TagName = require("module_name").TagName;  // commonjs syntax

the latter is rendered to a "module as a whole" import (can't remember how exactly it's called):

import * as TagName from "module_name";  // ES6 syntax
const TagName = require("module_name");  // commonjs syntax

To understand which to use, you should know how what you are importing was exported in the first place (this applies generally, not just for react-templates).

The only thing you should be aware is that react-templates itself does export as a "whole", so if you are importing from react-templates (stateless components or stateful render functions) you should use the latter syntax.