Can you use es6 import alias syntax for React Components?
Try to import this way
import {default as StyledLibrary} from 'component-library';
I suppose you export
export default StyledLibrary
Your syntax is valid. JSX is syntax sugar for React.createElement(type) so as long as type is a valid React type, it can be used in JSX "tags". If Button is null, your import is not correct. Maybe Button is a default export from component-library. Try:
import {default as StyledButton} from "component-library";
The other possibility is your library is using commonjs exports i.e. module.exports = foo
. In this case you can import like this:
import * as componentLibrary from "component-library";
Update
Since this is a popular answer, here a few more tidbits:
export default Button -> import Button from './button'
const Button = require('./button').default
export const Button -> import { Button } from './button'
const { Button } = require('./button')
export { Button } -> import { Button } from './button'
const { Button } = require('./button')
module.exports.Button -> import { Button } from './button'
const { Button } = require('./button')
module.exports.Button = Button -> import { Button } from './button'
const { Button } = require('./button')
module.exports = Button -> import * as Button from './button'
const Button = require('./button')
User-Defined Components Must Be Capitalized
https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized
change your code to
import { Button as StyledButton } from 'component-library';
....bah...bah....bah
<StyledButton {...this.props}></StyledButton>
Careful with capitalisation. Best to always CamelCase.
One:
import Thing from "component";
One with alias:
import {Thing as OtherThing} from "component";
One with alias plus other defaults:
import {Thing as OtherThing}, Stuff, Fluff from "component";
More detailed example
import
{Thing as StyledButton},
{Stuff as Stuffing},
{Fluff as Fluffy},
Wool,
Cotton
from "component";