Why is a transform-react-jsx required

[sebald]

I was wondering why this example requires the BabelPlugin, since TypeScript can transpile JSX by itself.

Removing the plugin and using a custom tsconfig.json that sets "jsx" property to "react" works (at least it compiles), but the output seems to be broken. Opening the app in the browser is not possible -> http://localhost:4444/default/index.jsx

Is it not possible for FuseBox to compile JSX without any plugins?

[ada-lovecraft]

I'm not affiliated with the project, but I think a decent answer is:

The more features fuse-box supports "out of the box" means more technical debt that has to be taken on. The js community is -incredibly fast- paced, so taking on the endeavour of supporting jsx "in-house", as opposed to letting other people set the standards for it, and supplying a pluggable interface -into- fusebox, would mean having to play catchup all the time.

[nchanged]

hi @sebald you can check this seed it uses typescript.

@8-uh thanks for your input, Our mission is to make developer's life easier, is all.

[ada-lovecraft]

@nchanged I've been playing with fuse-box for about 30 minutes... and I already have an electron + react + babel + css-modules + HMR build up and running.

A thing I spent a full week trying to figure out (without relying on boilerplates and generators) last week.

I'd say you're doing a fine job of making my life easier. 👍

[nchanged]

@8-uh Glad to hear that!

[sebald]

The more features fuse-box supports "out of the box" means more technical debt that has to be taken on. The js community is -incredibly fast- paced, so taking on the endeavour of supporting jsx "in-house", as opposed to letting other people set the standards for it, and supplying a pluggable interface -into- fusebox, would mean having to play catchup all the time.

I don't quite follow. There should be no extra work required to support JSX since FuseBox already supports TypeScript. Meaning, all "extra work" to support JSX is already done by the TypeScript team.

@nchanged Thanks for pointing me to this example. Just a personal note: I think examples using other task runner/bundlers (in this example gulp) if not absolutely necessary disguises the simplicity that comes with using FuseBox and some folks might think that (e.g.) gulp is required, where actually a simple node fuse.js added not the npm scripts suffice. 🙂

The issue I had was completely on my side, because I didn't get the "can't find index.jsx" file error message that was thrown on run time. I thought if something is wrong with the build FuseBox will let me know on compile time, but I guess that will change in the future.

This is what I ended up with as a configuration for using React with TypeScript. Freakin awesome!!!

const fsbx = require("fuse-box");

// Create FuseBox Instance
let fuseBox = new fsbx.FuseBox({
    homeDir: "src/",
    sourceMap: {
        bundleReference: "sourcemaps.js.map",
        outFile: "./build/sourcemaps.js.map",
    },
    outFile: "./build/out.js",
    plugins: [
        fsbx.SVGPlugin(),
        fsbx.CSSPlugin()
    ]
});

fuseBox.devServer(">index.tsx");

Thanks @nchanged for all the hard work you put into this project ❤️ I will definitely tinker a bit more with it and maybe replace our webpack setup with it! Don't tell Mr. Larkin!

[nchanged]

@sebald thank you for your support!

Regarding gulp, I agree, don't like it either. We should have our own task runner =)

[sebald]

@nchanged Please don't! 😄 No need to reinvent the wheel. The current API + maybe a CLI is more than enough.

[AngelMunoz]

@sebald could you share a repo with your settings? having a hard time with ReactDOM.render is not a function 😢
edit: trying to use typescript

[AngelMunoz]

nevermind, made it work, but had to import react and react-dom as

import * as React from 'react'
import * as ReactDOM from 'react-dom'

[sebald]

@AngelMunoz I did use this repo. Just changed the fuse.js to the above mentioned configuration. But the configuration changed since then, so I do not know if my configuration is still valid.

[AngelMunoz]

@sebald yeah I meant tsconfig and other stuff, weird things were happening, but it seems the way I was importing

import ReactDOM from 'react-dom';
import React from 'react';
// or import React, { Component } from 'react';

is not working at least for me
thanks!

[sebald]

Since TypeScript adheres to the ESModule specification you have to import like

import * as React from 'react';
import * as ReactDOM from 'react-dom';