npm install
npm start
react-example's Introduction
react-example's People
Forkers
msuntharesan oseau tpizza erkkaha tidjungs rohanthewiz federico-hv nobey aretecode bang88 theagilestudio ptzagk minghe northdark abejfehr wyeo fjandin osdevisnot boomerchi kolohelios zeropie rootedsoftware superhimanshu22 wobytes hlian csuich2 zaitsev kinsomicrote tomitrescak a-neumann asfaltboy evan-boissonnot paganaye ahungry ericeasthopereact-example's Issues
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!!!...
HTML template not in body
Maybe I am missing something but should the root div and $bundles be inside the <body> tag?
index.html
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).
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
Typescript version?
Will be great to have a react seed project with great typescript support.
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?
endless loop in dev
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)
"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
Legacy dependencies
"gulp": "^3.9.1",
"gulp-server-livereload": "^1.9.2",
"run-sequence": "^1.2.2",
can be removed from package.json
, no?
Cannot GET /
Hi, running "yarn" and then "node fuse.js" leads to "Cannot GET /" when opening in the browser http://localhost:4444
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.
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() {
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?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.