Parcel: React Guide?

[NullVoxPopuli]

I tried parcel index.jsx it gave:

Server running at http://localhost:1234
🚨  webapp/source/index.jsx: Unexpected token ] in J    at JSON.parse (<anonymous>)
    at Object.load (/home/me/.config/yarn/global/node_modules/parcel-bundler/src/utils/config.js:35:17)
    at <anonymous>
^C

granted, it's not a valid html file.

the file I currently use with webpack is linked via script tag to webpack's output js.

I tried using a script tag to my jsx entrypoint, but that didn't work either.

This was just with the default install, and 0 config.

[matheussampaio]

It's possible to use jsx? How?

[devongovett]

jsx is a supported file extension. you just need to setup babel in your project by adding a .babelrc, and install babel-preset-react

[NullVoxPopuli]

this is my existing .babelrc

{
  "presets": [
    "env",
    "stage-0",
    "react",
  ],
  "plugins": [
    "transform-decorators-legacy",
    "transform-runtime"
  ],
  "env": {
    "production": {
      "plugins": [
        ["babel-plugin-remove-attribute", {
          "attribute": "data-test",
        }]
      ]
    }
  }
}

:-\

[reicheltp]

Hi @NullVoxPopuli
I've created a minimal React example. Take a look: https://github.com/reicheltp/parcel-react-example

[wemyss]

Is there an examples repo/document somewhere to put examples so new starters can find them easily / understand what is needed to get parcel to work in their stack?

[mjackson]

Another example is here https://github.com/jaredpalmer/react-parcel-example

[devongovett]

I'm thinking of adding a "recipes" section or something to the docs, for e.g. react and other common frameworks. Might be something someone could countribute :)

[queicherius]

Just chiming in that a react example with hot reloading would be super neat since that is the only thing that the competition (create-react-app) can't easily provide. Some opportunity here. :)

[matheussampaio]

Hot reloading would be neat! 😄

[albinotonnina]

This is my first test with Parcel, React and hot-reload altogether:
https://github.com/albinotonnina/hot-parcel-react
It's based on the example @mjackson linked that for me didn't work. Component would get unmounted, not preserving the state, at every change.

I am not so sure about what I did here, because:

• Didn't need any module.hot method
• Actual Hot reload only after first save on a file. First time I get the component unmounted.
• I needed to add require('react-hot-loader/patch') at the first line of the app because of a warning from react hot loader:

React Hot Loader: It appears that "react-hot-loader/patch" did not run immediately before the app started. Make sure that it runs before any other code. For example, if you use Webpack, you can add "react-hot-loader/patch" as the very first item to the "entry" array in its config. Alternatively, you can add require("react-hot-loader/patch") as the very first line in the application code, before any other imports.

I may have messed a bit with it.
Anyway, great stuff @devongovett

[devongovett]

Nice work @albinotonnina! Want to write up a small tutorial for the Parcel website with some code and explanations? The pages are just markdown files here: https://github.com/parcel-bundler/website.

[albinotonnina]

@devongovett I would like to. My solution smells a bit though! Let me see if I can do better

[jakoblind]

I wrote a guide on how to create a minimal React app using Parcel.

[NullVoxPopuli]

I think I found the root of my problem.
This project imports css into js... which, not sure if parcel should support that, cause I think it's a stupid pattern. :-\

some errors I've gotten:

after commenting all the styles out:

another caveat I found is that all pathing is apparently relative to the dist directory -- rather than relative to the index.html -- kinda weird.

[davidnagli]

@webular is having the same issue in #56… his example looks a lot more minimal

[davidnagli]

I figured out why @NullVoxPopuli is getting this bug!!! The .babelrc he’s using has a syntax error…

It’s not a problem with Parcel

There are 2 trailing commas which cause JSON.parse() to throw an error:

{
  "presets": [
    "env",
    "stage-0",
    “react” ,<—————HERE (unnecessary comma)
  ],
  "plugins": [
    "transform-decorators-legacy",
    "transform-runtime"
  ],
  "env": {
    "production": {
      "plugins": [
        ["babel-plugin-remove-attribute", {
          “attribute”: “data-test” ,<—————HERE (unnecessary comma)
        }]
      ]
    }
  }
}

Here’s the corrected version:

{
    "presets": [
        "env",
        "stage-0",
        "react"
    ],
    "plugins": [
        "transform-decorators-legacy",
        "transform-runtime"
    ],
    "env": {
        "production": {
            "plugins": [
                ["babel-plugin-remove-attribute", {
                    "attribute": "data-test"
                }]
            ]
        }
    }
}

Try to use the corrected .babelrc above, and see if the error goes away

[davidnagli]

We need to add a try/catch around the JSON.parse() in /src/utils/config.js:35:17 to through a better error whenever we encounter a syntax error with the users .babelrc

[devongovett]

@jakoblind nice work! Want to make a PR to https://github.com/parcel-bundler/website with that guide?

Would be nice to have an additional section about setting up hot module reloading with react-hot-loader as well.

[albinotonnina]

@devongovett should I put my solution? Would you have a look at it again?
https://github.com/parcel-bundler/parcel/issues/19#issuecomment-349494197

[jamiebuilds]

Moving to #15

[davidnagli]

@thejameskyle How does this issue have anything to do with #15??? They are completely different issues!!!

[jamiebuilds]

It was a typo, calm down.

-> https://github.com/parcel-bundler/website/pull/15

[davidnagli]

oh haha, that explains it...

[yamitzky]

@davidnagli .babelrc accepts JSON5, so I think trailing comma is not a syntax error. parcel fails if JSON5-flavored .babelrc exists in node_modules.

[yamitzky]

I made a PR to handle JSON5 https://github.com/parcel-bundler/parcel/pull/256