fuse-box / react-example Goto Github PK

CSS 30.14% HTML 3.62% TypeScript 66.23%

react-example's Introduction

Fusebox and react without Babel

npm install
npm start

react-example's People

Contributors

Stargazers

Watchers

react-example's Issues

Doesn't recover after invalid jsx

git clone https://github.com/fuse-box/react-example
cd react-example
npm i
node fuse.js
# (optional) open in browser localhost:4444
# change App.jsx:19 </div> -> <div>
# rollback change
# try to open localhost:4444

https://gist.github.com/vird/bd9cadcca7ae0ec7ba0af42ccf4ecb06

Production Build without dev-server not working

When I commented out the fuse.dev() in the dist-Task, the produced output is not working. My dist-Task looks like this:

Sparky.task('dist', ['prod-env', 'config'], () => {
  // comment out to prevent dev server from running (left for the demo)
  // fuse.dev();
  return fuse.run();
});

The output in the index.html file in the dist directory which is produced is this one:

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
</head>

<body>
  <div id="root"></div>
  <script  type="text/javascript" src="/28e01eb1-api.js"></script>
  <script  type="text/javascript" src="/81fba5dd-vendor.js"></script>
  <script  type="text/javascript" src="/25e16468-app.js"></script>
</body>

</html>

But in the <script src=""> tag it has to be ./28e01eb1-api.js with a dot (.) to work.

If i commented in the run.dev() command, it works. So there seems to be a difference if I start it from a file or with the run.dev() command.

Also there is something left from the babel Plugin. In the fuse.js on line 6 there's still the BabelPlugin left. It seems to be unused.

Cannot GET /

Hi, running "yarn" and then "node fuse.js" leads to "Cannot GET /" when opening in the browser http://localhost:4444

"SyntaxError: unknown: Unexpected token" on fresh install

Hi, I cloned this example in order get started with FuseBox, but I got this issue when trying to node fuse.js

Am I missing something?

Here are the logs

20:11:59 : Launching dev server on port 4444
{ SyntaxError: unknown: Unexpected token (8:2)
  6 |
  7 | ReactDOM.render(
> 8 |   <App />, document.getElementById('root'));
    |   ^
  9 |
    at Parser.pp$5.raise (/Users/ugo/dev/qollect/node_modules/babylon/lib/index.js:4373:13)
    at Parser.pp.unexpected (/Users/ugo/dev/qollect/node_modules/babylon/lib/index.js:1716:8)
    at Parser.pp$3.parseExprAtom (/Users/ugo/dev/qollect/node_modules/babylon/lib/index.js:3683:12)
    at Parser.pp$3.parseExprSubscripts (/Users/ugo/dev/qollect/node_modules/babylon/lib/index.js:3427:19)
    at Parser.pp$3.parseMaybeUnary (/Users/ugo/dev/qollect/node_modules/babylon/lib/index.js:3407:19)
    at Parser.pp$3.parseExprOps (/Users/ugo/dev/qollect/node_modules/babylon/lib/index.js:3337:19)
    at Parser.pp$3.parseMaybeConditional (/Users/ugo/dev/qollect/node_modules/babylon/lib/index.js:3314:19)
    at Parser.pp$3.parseMaybeAssign (/Users/ugo/dev/qollect/node_modules/babylon/lib/index.js:3277:19)
    at Parser.pp$3.parseExprListItem (/Users/ugo/dev/qollect/node_modules/babylon/lib/index.js:4231:16)
    at Parser.pp$3.parseCallExpressionArguments (/Users/ugo/dev/qollect/node_modules/babylon/lib/index.js:3506:20)
  pos: 133,
  loc: Position { line: 8, column: 2 },
  _babel: true,
  codeFrame: '\u001b[0m \u001b[90m 6 | \u001b[39m\n \u001b[90m 7 | \u001b[39m\u001b[33mReactDOM\u001b[39m\u001b[33m.\u001b[39mrender(\n\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 8 | \u001b[39m  \u001b[33m<\u001b[39m\u001b[33mApp\u001b[39m \u001b[33m/\u001b[39m\u001b[33m>\u001b[39m\u001b[33m,\u001b[39m document\u001b[33m.\u001b[39mgetElementById(\u001b[32m\'root\'\u001b[39m))\u001b[33m;\u001b[39m\n \u001b[90m   | \u001b[39m  \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n \u001b[90m 9 | \u001b[39m\u001b[0m' }
└── default (5 files,  4.5 kB)
      index.jsx
      App.jsx
      App.css
      logo.svg
      index.css

    Bundle
    Size: 4.5 kB
    Time: 353ms

Thanks

it doesn't parse ES6 Class static methods

Hi guys,

I am very exciting with Fusebox performance! 👍. Great job! I am testing in a massive project and have a road bump with es6 static classes props.

Steps:

get a fresh copy of the react sample
open file /src/App.jsx
add a defaultProps static block to the class:

    static defaultProps = {
      nada : 'nadaaaaa'
    }

you get the error:
app ->

{ SyntaxError: unknown: Unexpected token (9:24)
7 |
8 | class App extends Component {

9 | static defaultProps = {
| ^
10 | nada : 'nadaaaaa'
11 | }
12 |
at Parser.pp$5.raise (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:4452:13)
at Parser.pp.unexpected (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:1761:8)
at Parser.pp$1.parseClassProperty (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:2571:50)
at Parser.pp$1.parseClassBody (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:2516:34)
at Parser.pp$1.parseClass (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:2406:8)
at Parser.pp$1.parseStatement (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:1843:19)
at Parser.pp$1.parseBlockBody (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:2268:21)
at Parser.pp$1.parseTopLevel (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:1778:8)
at Parser.parse (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:1673:17)
at parse (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:7180:37)
pos: 216,
loc: Position { line: 9, column: 24 },
_babel: true,
codeFrame: '\u001b[0m \u001b[90m 7 | \u001b[39m\n \u001b[90m 8 | \u001b[39m\u001b[36mclass\u001b[39m \u001b[33mApp\u001b[39m \u001b[36mextends\u001b[39m \u001b[33mComponent\u001b[39m {\n\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 9 | \u001b[39m static defaultProps \u001b[33m=\u001b[39m {\n \u001b[90m | \u001b[39m \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n \u001b[90m 10 | \u001b[39m nada \u001b[33m:\u001b[39m \u001b[32m'nadaaaaa'\u001b[39m\n \u001b[90m 11 | \u001b[39m }\n \u001b[90m 12 | \u001b[39m \u001b[0m' }
Acorn error: Unexpected token (9:24)
File: /Users/leonardo/aajs/fuse2/react-example/src/App.jsx

7
8 class App extends Component {
9 static defaultProps = {
10 nada : 'nadaaaaa'
11 }
12
13 render() {

endless loop in dev

all i did was install and start , and updated the ts version 3.4.5

HTML template not in body

Maybe I am missing something but should the root div and $bundles be inside the <body> tag?
index.html

Not able to run the project

Hi,
I downloaded this project (version 1.0.0) and executed commands (on Windows 7, Node v7.5.0):

npm install
node fuse.js
node server has started without any errors but when I open the project in latest Chrome(http://localhost:4444/) and the result was:
white screen
errors in dev console:
- Uncaught TypeError: Cannot read property 'connect' of undefined
- GET http://localhost:4444/fusebox-hot-reload 404 (Not Found)

I had the same problem trying to run the other seed projects (vuejs, angular 2) with the same effect.
Am I doing something wrong?

new fuse.ts doesn't run as per instructions :/

$ npm install
npm WARN [email protected] requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

audited 867 packages in 4.079s
found 0 vulnerabilities

node fuse.ts
/Users/pavel.savchenko/github/react-example/fuse.ts:1
import { fusebox, sparky } from "fuse-box";
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:720:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:839:10)
    at internal/main/run_main_module.js:17:11

No valid versions available for pinkie-promise

❯ npm install
npm ERR! code ENOVERSIONS
npm ERR! No valid versions available for pinkie-promise

gone it is... https://www.npmjs.com/package/pinkie-promise

I think this example is a good sell for ts & fuse-box

If I understand the tsconfig correctly, you've basically replaced babel with ts AND made ts stop complaining. More people should know about this as it lets them code as if they we're in babel (and not get any ide complains/build errors), but add a ts file (maybe just some interfaces to get good hinting) here and there. This is like the incremental adoption sell from flow. I'd recommend making this example more prominent (maybe a blog post) and explaining it's benefits/inner workings in detail. (tsc may be faster/less bloated/easier to config than babel as well). I think that would get a lot more people to try out fuse-box and ts (and we can shift the standards to our liking...muwahah).

flow typesystem support

Hi, sorry if it's a noob question but I've added some flow code and I get an error when I run it

Aconr error: unexpected token (9:6)
var a: number[] = [2,3,4];

generally flow works out the box with react, because the babel react preset supports flow by default, I changed the babel preset from latest to react but seems doesnt work neither

thank you so much, I'm really enjoying fuse-box over webpack!!!...

sry, I cann`t run it

/Users/admin/react-example/node_modules/fuse-box/Utils.js:68
function uglify(contents, { es6 = false, ...opts } = {}) {
                                         ^^^

SyntaxError: Unexpected token ...
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/admin/react-example/node_modules/fuse-box/CacheBreaker.js:5:17)

Why is a `transform-react-jsx` required

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?

Typescript version?

Will be great to have a react seed project with great typescript support.

fuse-box / react-example Goto Github PK

react-example's Introduction

Fusebox and react without Babel

react-example's People

Contributors

Stargazers

Watchers

Forkers

react-example's Issues

Recommend Projects

Recommend Topics

Recommend Org