cwlsn / rinse-react

🚿 Rinse, React, repeat. A boilerplate to build a React component library.
https://rinsejs.io/
MIT License
158 stars 43 forks source link

Parse error unexpected token #33

Open ppanthony opened 5 years ago

ppanthony commented 5 years ago

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>
|    );
| };
ummahusla commented 5 years ago

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"
    ]
}
ppanthony commented 5 years ago

@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?

ummahusla commented 5 years ago

@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

ummahusla commented 5 years ago

@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.