rinse-react

rinse-react copied to clipboard

Not sure if this is something I'm doing, but I've just uploaded rinse to github, and npm installed it in my project. Anyone any ideas, or settings I may need in order to get the separate component library to get properly pulled in?

Currently getting the following Babel error:

Module parse failed: Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
| const Button = () => {
|    return (
>      <Button>test</Button>
|    );
| };

I have similar issue but my component library is bundled with rollup instead of the webpack. I get this issue

./node_modules/@xyz/xyz-ui-components/src/HelloWorld.tsx 6:12
Module parse failed: Unexpected token (6:12)
You may need an appropriate loader to handle this file type.
|     render() {
|         return (
>             <div>
|                 <h1>Hello World!</h1>
|                 <style jsx>{`

I've tried to install additional babel plugins, but haven't found the solution yet.

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        "styled-jsx/babel",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-export-default-from"
    ]
}

@ummahusla - Has your babelrc file got typescript in there? This project out of the box is just dealing with .JS extension , it'd guess that's what you need to look at try adding

"@babel/typescript" to the preset?

@ppanthony Yeah, tried to play around it:

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript",
        "@babel/preset-react"
    ],
    "plugins": [
        "styled-jsx/babel",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-export-default-from"
    ]
}

Wit hthe babelrc above I get the same results

@ppanthony Found this gem: https://www.npmjs.com/package/create-react-library, a bit of the configuration and reading issues, was able to setup and publish library with hours (scss, ts, jest, etc everything works straight outta the box). The only thing what is missing storybook.