react-webpack-generators/generator-react-webpack

Yeoman generator for ReactJS and Webpack

generator-react-webpack's Issues

Build static pages with a middleware

Hi,

I think it would be interesting to have an option to build static pages. It's one of the stronger points of React and great for SEO and, also for have some relevant content in browsers with Javascript disabled.

thanks for all

Less build does not add less check in tests

It automatically adds it into the the webpack configs, might want to add to tests by default. Blows up grunt test command.

missing bower.json and it is failing

it loads without bower... but still gives error

Module not found : ReactProjectApp instead of a the application name + "App"

Hi!

I just got this generator, and the grunt serve command does output an error :

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./src/scripts/components/ReactTestApp.js in /home/remi/Dev/reactProject

BUT, in the js file in "/src/scripts/components/" was "ReactProjectApp", so I renamed it to "ReactTestApp" as my project name is reactTest and everything is fine now!

Maybe a "React" name conflict of something of this kind?

Generated paths in tests if subdirectory passed as arg are wrong.

Resolving paths in the require() for the component in tests for components generated with a subdirectory are wrong.

Default generated paths are broken

Apparently the components are generated under src/components but every config expects them to be under src/script/components/.

I'll submit a PR if I find the time!

Hyphenated project names are not removed from file naming logic

mkdir react-grunt-example && cd $_
yo react-webpack

Result:

React-grunt-exampleApp.js

Expect:

ReactGruntExampleApp.js

mainInput settings in package.json doest not match the default one

No big deal but when you run the default conf there is an error due to the mainInput value in package.json not matching ReactpackApp

React.findDOMNode is undefined

I was going through react docs and using react-webpack generator. While trying findDOMNode method, I found that React object is not having this method and thus console was showing 'undefined' error.

I tried the same with plain react application(http://jsfiddle.net/vishnudas_tekale/vv6vofaw/) and this method is available there.

'use strict';

var React = require('react/addons');
var ReactTransitionGroup = React.addons.TransitionGroup;

// CSS
require('../../styles/normalize.css');

var ReactWebpackDemoApp = React.createClass({
getInitialState: function() {
return {userInput: ''};
},
handleChange: function(e) {
this.setState({userInput: e.target.value});
},
clearAndFocusInput: function() {
// Clear the input
this.setState({userInput: ''}, function() {
// This code executes after the component is re-rendered
React.findDOMNode(this.refs.theInput).focus(); // This gives an undefined error
});
},
render: function() {
return (

Click to Focus and Reset

);
}
});

module.exports = ReactWebpackDemoApp;

// Reference http://facebook.github.io/react/docs/more-about-refs.html#completing-the-example

Incorrect style path when creating a component.

Follow the tutorial, after run yo react-webpack:component foo the generated code for importing less file is: require('styles/foo.less');, it should be require('../../styles/foo.less');. The issue also exists in the default component with the project name.

CSS Preprocessors

Would it be possible to add the option to use SASS or LESS instead of straight CSS?

normalize.css as npm package

Added normalize.css as dependency.
It would be more great: require('normalize.css/normalize.css');

jsxhint?

Is it possible to use jshintreact or jsxhint instead of ignoring the JSX parts of your code?

Update webpack and react-hot-loader to latest versions

Newest versions of both packages enables us to npm link React components and have hot reload work simultaneously in both child and parent!

I'll create a PR when I have some time.

Versions I tested with:

"webpack": "~1.8.4"
"react-hot-loader": "^1.2.5"

Syntax error

Create component with invalid JS var name:

$ yo react-webpack:component App-description

and inside component jsx file:

var App-description = React.createClass({
  render: function () {
    return (
        <div>
          <p>Content for App-description</p>
        </div>
      );
  }
});

Yep App-description is invalid variable name.

So may be throw some errors while creating component files?

npm install failed at building [email protected]

Error message:

`darwin-x64` exists; testing
module.js:355
  Module._extensions[extension](this, filename);
                               ^
Error: Module did not self-register.
    at Error (native)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/zhaomin/repos/rr/node_modules/sass-loader/node_modules/node-sass/lib/index.js:181:15)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
npm ERR! Darwin 14.1.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.0
npm ERR! npm  v2.6.0
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script 'node scripts/build.js'.
npm ERR! This is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/build.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls node-sass
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/zhaomin/repos/rr/npm-debug.log

I think node-sass is only used in sass-loader which requires node-sass to play sass files.
I will try an upgrade of sass-loader from 0.3.1 to 0.4.0.

Please, add JSS to the available styles.

JSS is nice. :D

Update to sass-loader 1.0.0

Update to React 0.13

Hot loader not reloading on save

When I save a JS(x) file or stylesheet, my webpack bundle gets rebuilt but the content doesn't change in the browser. I need to manually refresh the page.

I launch the server with the webpack-dev-server grunt task. Is there anything else I need to do to enable live reloading?

renaming the project

For every operation, one needs to write yo react-webpack, quite long I assume.
There is no workaround for alias name, so the only option is to rename the entire project.

generator-react is already taken. Can anyone think about a cool and short name?

What is the best way to include 3rd party library

I was wondering if I'm using this generator, what is the best way to include the 3rd party library like "jquery" ?

I'm trying to use bower, but I need to do "bower install" inside the "src/scripts/components" directory, and then do a "alias" inside the webpack.config file, and even thought it works, but I want to know what is the recommended ways of doing this ?

Thanks

Can Bootstrap be provided as an option?

Thank author. I like the react-webpack very much. It's awesome. However, it took me quite a long time to get bootstrap into my project. Is it possible to have bootstrap loaded as an option, like the way react-router is provided? Or, is there an easy way to load bootstrap? thanks

react-webpack:component asset path is not properly created...

yo react-webpack:component Panels/Main
...
styles/Component
create src/scripts/components/Panels/Main.js
create test/spec/components/Panels/Main.js
create src/styles/Panels/Main.sass
...

in components/Panels/Mail.js
...
require('../../styles/Main.sass'); //<--- this does not work
it should be
require('../../../styles/Panels/Main.sass'); //<--- works!

Content flash?

I'm using this generator to explore React. I'm new to both yeoman and React, so let me know if I can add more detail or if I should move this issue elsewhere.

With a clean install (yo react-webpack; bower install; npm install; grunt serve), there's an unstyled content flash when opening up the app. Is this an issue with the generator?

Client-side routing

Would be cool if there was a React router that was in npm installable and was set up out-of-the-box by the generator

access to node_modules or bower_components during development (webpack-dev-server)...

Not knowing were to exactly ask this question as it involves:
react-webpack
react-bootstrap
grunt
webpack-dev-middleware
whether to use bower or npm modules, etc...

after a great start:
yo react-webpack
yo react-webpack:component foo
grunt serve...

How do I allow access to the node_modules or bower_components directory in the index.html file?

My current solution was to use a grunt task to copy the files from the ./node_modules/... directory to the src/styles/vendor/... directory.
...
copy: {
dev: {
files: [
{
src: [__dirname + '/node_modules/bootstrap/dist/css/bootstrap.min.css' ],
dest: '<%= pkg.src %>/styles/vendor/bootstrap.min.css'
}
]
},
...

The problem surfaced when I began using react-bootstrap as I did not just want to include the bootstrap cdn for development.

This could definitely pollute the src tree with an unnecessary number of assets. Would you suggest a better approach?

App doesn't start and aliases are broken (Alias PR)

The alias PR #62 broke the generator.

After generating the app nothing starts because of a missing comma on line 36 in _webpack.dist.config.js.

The default app is broken too because alias feature isn't working with ./src/styles and the default App crashes.

It's working if I change it to:

alias: {
  'styles': '../../../src/styles',
  'components': '../../../src/scripts/components/'
}

but I hope there is a better way I still haven't figured out.

Error here:

Module not found: Error: Cannot resolve 'file' or 'directory' /src/styles/normalize.css in /my-path/src/scripts/components
@ ./src/scripts/components/MyNameApp.js 9:0-31

Awesome generator btw!
Keep up the good work

Create basic backend logic in generator.

As we talked in comments.

Duplicate .editorconfig

It looks like there are two .editorconfig:
https://github.com/newtriks/generator-react-webpack/search?utf8=%E2%9C%93&q=indent_size

and it looks like the one with indent_size=4 is the one in use.

error while generating project

$ yo react-webpack
gives me the following error:
npm ERR! notarget No compatible version found: jsx-loader@'petehunt/jsx-loader'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.0.0"]
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! System Linux 3.11.0-15-generic
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "install"
npm ERR! node -v v0.10.25
npm ERR! npm -v 1.3.24
npm ERR! code ETARGET

Remove Karma default install and add as an option

Also add Jest as an option (or simply replace with Jest?).

CSS scaffolding

Would be nice to add a CSS require for each component added so people know where to put CSS. For instagram we do:

require('./ComponentName.css')

replace 6to5 with babel

Likely just a search-and-replace, but the --es6 support now triggers a warning with npm since 6to5 was renamed

grunt test doesn't work - PhantomJS times out waiting for tests

Being new to nodejs tools, I've run out of rope trying to resolve this problem, so I'm posting here as a last resort as I don't know which package is causing the problem.

In a nutshell Karma (or Jasmine? I don't know) doesn't run the tests and PhantomJS times out (Chrome just sits there indefinitely). There are some hints around the web that it might be a webpack problem, but I've tried some tweaks without success. Webpack prints this:

Version: webpack 1.3.0-beta5
Time: 15ms
Asset  Size  Chunks       Chunk Names
webpack: bundle is now VALID.
webpack: bundle is now invalid.

I can't find what 'bundle is now invalid' means.

I'm using the Karma spec generated by this generator and I've upped the versions of all packages to the latest, but it still doesn't help. I've documented this at http://stackoverflow.com/questions/24119506/karma-jasmine-times-out-without-running-tests

Any ideas would be really appreciated.

Installing jQuery?

Sorry about the noob question, but I haven't used Yeoman/Grunt/Webpack before. I'm trying to install jQuery in my project so I can do the whole var $ = require('jquery'); thing.

This leads to grunt serve giving the following error:
Module not found: Error: Cannot resolve module jquery in <my file...>

I've looked around for other webpack generators but I'm afraid to use them in case they break my project.

Is there a way of installing/using jQuery with the react webpack?

Thanks,
Ed.

Loss of .jsx extension

Looks like #38 merged pull request has moved reactSuffix from .jsx to .js, breaking some user build rules or code editor conf based on the extension.

Example: scripts/component/main.js is still a JSX file but with the .js extension.

Any particular reason for this change? /cc @andrewliebchen

grunt build fails to find components (in webpack:dist task)

Everything works just fine with the webpack-dev-server (running 'grunt serve'). But, when I run 'grunt build' it processes one of my components that contains another component (both in the src/scripts/components directory):

/**
* @jsx React.DOM
*/

'use strict';

var React = require('react/addons');
var Playground = require('./Playground');

The error I get is:

ERROR in ./src/scripts/components/MetadoorApp.jsx
Module not found: Error: Cannot resolve 'file' or 'directory' ./Playground in /Users/gigi/Documents/dev/js/metadoor/src/scripts/components
./src/scripts/components/MetadoorApp.jsx 8:17-40
Warning: Task "webpack:dist" failed. Use --force to continue.

Aborted due to warnings.

There is a Playground.jsx component in this directory and it is working just fine with the webpack dev server.

I'm not sure if I'm doing something wrong or if it's some webpack configuration issue, but the error message is definitely incorrect.

Missing comma

In generated project in file webpack.dist.config.js in line 36 a comma at the end of the line is missing.

Update React to 0.12.X

Update README.md with proper reference to Jasmine

Original URL http://pivotal.github.io/jasmine/ is dead. I believe it should be changed to http://jasmine.github.io/1.3/introduction.html (or whichever version you use).

Support JSX live-editing in development mode

Are you interested in adding JSX live editing for React components? It's as simple as adding a loader before jsx-loader in Webpack config and tweaking Webpack config to enable Hot Module Replacement.

I can work up a pull request if you'd like to have this.

directory structure

In one of the recent changes, the structure changed from:

-src
    -scripts
        -components

to

-src
    -components

If someone has started a project with earlier version, and then updated it, and now he tries to use the component generator, the new comp will be added to the wrong directory. The solution should have a some settings for where to save things.
Any way, that's not such a big deal. Just wanted to mention the problem

Question: /src/scripts/main.js in gitignore

More of a question than an actual issue: Why is there /src/scripts/main.js in the last line of the .gitignore for the generated app? I'm not seeing that this is file being generated or otherwise available.

Can't have camelCase component names

If I try to create a component:

yo react-webpack:component ContentBrowser

The file/object created is called Contentbrowser

Remove Grunt default install and add as an option

Have Grunt installed as an option during running of Yeoman.

Suggestion: Webpack require should resolve jsx by default

I had to add:

  resolve: {
    extensions: ['', '.js', '.jsx']
  },

To my webpack config so that jsx files could be easily require without being explicit about extension names. I'm still a noob at most of this but it seems like this may be handy for others.

Duplicative Routes

Why is this written like this:

var Routes = (
  <Route handler={<%= scriptAppName %>}>
    <Route name="/" handler={<%= scriptAppName %>}/>
  </Route>
);

as opposed to just:

var Routes = (
  <Route path="/" handler={<%= scriptAppName %>} />
);

adding fuller version of a component with a flag, and alias

I'm thinking of adding an optional flag when using component generator, something like --full, that will boilerplate the most used react stages etc, that I find myself tediously writing every time.
This is even more useful when using Reflux (btw, just added a pull request with Reflux support)

It should be something like this:

'use strict';

var React = require('react/addons');
//if (architecture=== 'reflux')   
  var Reflux = require('reflux');
  //var Actions = require('actions/...');

//if (stylesLanguage === 'sass')   
 require('styles/componentName.sass');

var  componentName = React.createClass({
//if (architecture=== 'reflux')   
    mixins: [Reflux.ListenerMixin],

  getInitialState: function () {
        return {   };
   },

  componentDidMount: function () {
  },

  render: function () {
    return (
        <div>
          <p>Content for componentName </p>
        </div>
      );
  }
});

discussion

1. I use getInitialState and componentDidMount, and reflux stuff all the time, what's yours boiler-plated code?
2. what will be a proper name for this option (e.g --full)
3. I think react-webpack:component is quite a lot of text. We can create an alias. like react-webpack:cmp or react-webpack:c - what do you think will be suitable? (and what about react-webpack:action and react-webpack:store?)

Slow React Tests

Hey guys, are you with this problem too? A single test is taking more than 3 seconds to complete.