reactjsresources / react-webpack-babel Goto Github PK

Tried setting the Environment variable ENV to "debug" and putting ENV="debug" in a .env root file, still get this message: process.env.ENV is not defined, assuming 'prod' env

Hey I was trying to understand how the webpack auto reload is working.
I know your using a webpack-dev-server, but what part of your code is forcing the reload to happen when you edit a component?

Thanks in advance. Any resources is much appreciated.

I tried the following

git clone https://github.com/alicoding/react-webpack-babel.git
npm install
npm install --save bootstrap

Then I added a line to app.jsx:

import 'bootstrap/dist/css/bootstrap.min.css';

npm start gave me a bunch of errors:

ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff
Module parse failed: /Users/egustavson/projects/react/react-webpack-babel/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader?importLoaders=1!./node_modules/bootstrap/dist/css/bootstrap.min.css 6:3533-3586
 @ ./node_modules/bootstrap/dist/css/bootstrap.min.css
 @ ./src/app.jsx
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

I'm pretty much a noob, so let me know if my approach is wrong or if I just need to add loaders or what?

Thanks!

Specifically:

bundle.js & bundle.js.map

Happy to make a pull request if you'd prefer.

70% 1/1 build moduleshttp://localhost:8080/
webpack result is served from /
content is served from ./public
62% 45/51 build modulesContainer#eachAtRule is deprecated. Use Container#walkAtRules instead.
Container#eachRule is deprecated. Use Container#walkRules instead.
Container#eachDecl is deprecated. Use Container#walkDecls instead.
4907ms build modules
10ms seal
11ms optimize
13ms hashing
48ms create chunk assets
16ms additional chunk assets
890ms optimize chunk assets
1ms optimize assets
16ms emit

When I try to run build or dev I get this error (only listed build output)

$ npm run build

> [email protected] build /Users/cp/Code/proj/frontend/static/react
> NODE_ENV=production webpack -p --config webpack.production.config.js --progress --profile --colors

432ms build modules
1ms seal
2ms optimize
1ms hashing
3ms create chunk assets
1ms additional chunk assets
42ms optimize chunk assets
1ms optimize assets
2ms emit
Hash: a15466a376457c6f3383
Version: webpack 1.13.0
Time: 502ms
    Asset       Size  Chunks             Chunk Names
bundle.js  286 bytes       0  [emitted]  main
   [0] multi main 28 bytes {0} [built] [1 error]
       factory:0ms building:1ms = 1ms
    + 1 hidden modules

ERROR in ./index.jsx
Module build failed: SyntaxError: /Users/cp/Code/proj/frontend/static/react/index.jsx: Unexpected token (8:3)
   6 |  render() {
   7 |      return (
>  8 |          <div>Simple React + Babel + Bootstrap + Webpack</div>
     |          ^
   9 |      );
  10 |  }
  11 | }
    at Parser.pp.raise (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/util.js:89:8)
    at Parser.pp.parseExprAtom (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:517:12)
    at Parser.pp.parseExprSubscripts (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:272:19)
    at Parser.pp.parseMaybeUnary (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:252:19)
    at Parser.pp.parseExprOps (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:183:19)
    at Parser.pp.parseMaybeConditional (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:165:19)
    at Parser.pp.parseMaybeAssign (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:128:19)
    at Parser.pp.parseParenAndDistinguishExpression (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:590:26)
    at Parser.pp.parseExprAtom (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:476:19)
    at Parser.pp.parseExprSubscripts (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:272:19)
    at Parser.pp.parseMaybeUnary (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:252:19)
    at Parser.pp.parseExprOps (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:183:19)
    at Parser.pp.parseMaybeConditional (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:165:19)
    at Parser.pp.parseMaybeAssign (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:128:19)
    at Parser.pp.parseExpression (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:92:19)
    at Parser.pp.parseReturnStatement (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/statement.js:333:26)
    at Parser.pp.parseStatement (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/statement.js:107:19)
    at Parser.pp.parseBlockBody (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/statement.js:529:21)
    at Parser.pp.parseBlock (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/statement.js:510:8)
    at Parser.pp.parseFunctionBody (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:913:22)
    at Parser.pp.parseMethod (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/expression.js:882:8)
    at Parser.pp.parseClassMethod (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/statement.js:823:8)
    at Parser.pp.parseClassBody (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/statement.js:784:10)
    at Parser.pp.parseClass (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/statement.js:666:8)
    at Parser.pp.parseStatement (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/statement.js:102:19)
    at Parser.pp.parseExportDeclaration (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/statement.js:906:15)
    at Parser.pp.parseExport (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/statement.js:894:29)
    at Parser.pp.parseStatement (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/statement.js:141:81)
    at Parser.pp.parseBlockBody (/Users/cp/Code/proj/frontend/static/react/node_modules/babylon/lib/parser/statement.js:529:21)
 @ multi main

Unsure what is wrong. Used Node 0.12.12 and 6.x. Both had the same error. The index looks fine except it's not being converted before node gets to it.

Hoping for someone to update this, or as soon as I got time I will do this.

You seem to be making everything perfectly simple, including explaining how to install webpack and the development server globally. But "npm run build" doesn't work unless I do "npm install" first. Seems like it would be simpler and easier to understand for newbies if the docs mentioned the need to do "npm install".

import 'bootstrap/dist/css/bootstrap.min.css';

Right now we don't have any unit test framework integrated. Maybe we can have jest here?

When there's an error in my source code, Webkit shows us the error in bundle.js instead of the line in the source code that needs to get fixed. This makes development extremely painful.

Reproducible by cloning the repo and changing app.jsx to the following:

import '../styles/index.scss';

export default class App extends React.Component {
  render() {
    return (
      <div styles={styles}>
        <h1>It Works!</h1>
        <p>This React asd just works including <span className="redBg">module</span> local styles.</p>
        <p>Enjoy!</p>
      </div>
    )
  }
}

See this screenshot to see what I'm talking about.

Hello,

Can I request a doc on how to deploy this app to heroku? I am trying your boilerplate step by step and I run npm run build. Then I follow heroku way of deploy a node.js app. in the website, it give me 404 error

and this error Failed to load resource: the server responded with a status of 404 (Not Found)

Can you please tell me how to deploy this correctly? thanks

I do not know what happened, but today at first there was an error from the babel old version of node JS. I updated from 7 to 8 node, now he swears at the server startup, what can advise?
console:

`D:\work\react-s>npm start

[email protected] start D:\work\react-s
webpack-dev-server --progress --profile --colors

10% building modules 1/1 modules 0 activeevents.js:182
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 127.0.0.1:8888
at Object.exports._errnoException (util.js:1016:11)
at exports._exceptionWithHostPort (util.js:1039:20)
at Server.setupListenHandle [as _listen2] (net.js:1307:14)
at listenInCluster (net.js:1355:12)
at doListen (net.js:1481:7)
at _combinedTickCallback (internal/process/next_tick.js:105:11)
at process._tickCallback (internal/process/next_tick.js:161:9)
at Function.Module.runMain (module.js:607:11)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: webpack-dev-server --progress --profile --colors
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Roaming\npm-cache_logs\2017-06-14T18_16_48_660Z-debug.log
`

log:
0 info it worked if it ends with ok 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', 1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'start' ] 2 info using [email protected] 3 info using [email protected] 4 verbose run-script [ 'prestart', 'start', 'poststart' ] 5 info lifecycle [email protected]~prestart: [email protected] 6 silly lifecycle [email protected]~prestart: no script for prestart, continuing 7 info lifecycle [email protected]~start: [email protected] 8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true 9 verbose lifecycle [email protected]~start: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\work\react-s\node_modules\.bin;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\Git\cmd;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files (x86)\Skype\Phone\;C:\Program Files (x86)\Brackets\command;C:\Program Files (x86)\Windows Kits\10\Windows Performance Toolkit\;C:\Program Files\nodejs\;C:\Users\User\AppData\Local\Microsoft\WindowsApps;C:\Users\User\AppData\Roaming\npm 10 verbose lifecycle [email protected]~start: CWD: D:\work\react-s 11 silly lifecycle [email protected]~start: Args: [ '/d /s /c', 11 silly lifecycle 'webpack-dev-server --progress --profile --colors' ] 12 silly lifecycle [email protected]~start: Returned: code: 1 signal: null 13 info lifecycle [email protected]~start: Failed to exec start script 14 verbose stack Error: [email protected] start: webpack-dev-server --progress --profile --colors14 verbose stack Exit status 1 14 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:283:16) 14 verbose stack at emitTwo (events.js:125:13) 14 verbose stack at EventEmitter.emit (events.js:213:7) 14 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14) 14 verbose stack at emitTwo (events.js:125:13) 14 verbose stack at ChildProcess.emit (events.js:213:7) 14 verbose stack at maybeClose (internal/child_process.js:897:16) 14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:208:5) 15 verbose pkgid [email protected] 16 verbose cwd D:\work\react-s 17 verbose Windows_NT 10.0.15063 18 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start" 19 verbose node v8.1.1 20 verbose npm v5.0.3 21 error code ELIFECYCLE 22 error errno 1 23 error [email protected] start:webpack-dev-server --progress --profile --colors 23 error Exit status 1 24 error Failed at the [email protected] start script. 24 error This is probably not a problem with npm. There is likely additional logging output above. 25 verbose exit [ 1, true ]

Hi, Thanks for this, I get this in console log. I've pulled the latest:

Warning: React.render is deprecated. Please use ReactDOM.render from require('react-dom') instead.

Hi,
Right now all the react stuff is inside index.jsx
Any idea about how I can include a component (for eg. 'Basic' defined in '/views/basic.jsx') and render it ?

I tried using import statement (import Basic from './views/basic.jsx') in index.jsx, but it doesn't work.

Hi. Your repo is very usefull but I cant install it :(
My steps was :
1.- clone
2.- npm install
3.- npm start and the error after this command is:

root@abcde:/some_folder/react-webpack-babel# npm start
[email protected] start /some_folder/react-webpack-babel
webpack-dev-server --progress --profile --colors

sh: 1: webpack-dev-server: Permission denied

npm ERR! Linux 4.4.0-38-generic
npm ERR! argv "node" "/user/apps/node-v4.2.3-linux-x64/bin/npm" "start"
npm ERR! node v0.10.37
npm ERR! npm  v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `webpack-dev-server --progress --profile --colors`
npm ERR! Exit status 126
npm ERR! 
npm ERR! Failed at the [email protected] start script 'webpack-dev-server --progress --profile --colors'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-webpack-babel package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --progress --profile --colors
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs react-webpack-babel
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls react-webpack-babel
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /some_folder/react-webpack-babel/npm-debug.log

I have several months developing whit node and npm so my node and npm are correct!

node version:v4.2.3
npm version : 3.10.9
linux info : 14.04.1-Ubuntu

Thanks.

"Cannot find module 'utils/view-helper' from 'index.js'"

I added a alias in the webpack configs. "utils" is my alias in this case.

Is it possible to allow alias in tests?

Thanks

I'm using Chrome 56 on macOS 10.12 and can't get any type of sourcemaps to work for javascript or scss.

I updated to React 16 with React-router config. I cant open up a pull request for some reason.

Just wanted to make a note here about getting this to run in cloud9. In case you are not familiar, cloud9 is a cloud VM which can be used for development work. Cloning a repo into it is a great way to test things out and do dev work right in the browser.

The majority of the instructions were great, however there are two tweaks needed to get this repo to run in c9. To make it as easy as possible, I will include the full steps here that I followed to get it to run:

1. Sign up for cloud9 and start a new workspace of type nodeJS
2. Delete any files you don't need since space is limited
3. On the command line at the bottom of the screen run:
   git clone https://github.com/alicoding/react-webpack-babel.git
4. Once done, cd to the new directory:
   cd react-webpack-babel
5. Install the dependencies:
   npm install
6. Install webpack:
   npm i webpack-dev-server webpack -g
7. Open webpack.config.js and change line 8 to:
   'webpack-dev-server/client?https://' + process.env.HOST + ':' + process.env.PORT, // WebpackDevServer host and port
8. In the server window, give it a name of Webpack, change the Runner to Shell command, the CWD to the react-webpack-babel folder, and enter the Command:
   webpack-dev-server --progress --profile --colors --hot --host $IP --port $PORT
9. If all was done correctly, you should be able to click Run and have it run for you.

Steps 7 and 8 are required for Cloud9 since they assign an IP and PORT at runtime. Hope this helps!

Any chance to get help for this launch.json ?

https://github.com/Microsoft/vscode-chrome-debug

Hello,
don't know if I am doying something wrong, but I imported partial scss files into index.scss file and written few react components included into app.js and the styles doesn't aply to them. Is it some strange behaviour, or I have to include styles into every single react subcomponent?
What I might be doying wrong? I was inspecting elements and no rules are applied to html elements, but they can be found in bundle.js

my folder structure looks something like this:

├── src
│ ├── app.jsx
│ ├── components
│ │ ├── QuoteInputs.js
│ │ └── QuoteResult.js
│ ├── images
│ ├── index.jsx
│ ├── styles
│ │ ├── common
│ │ │ ├── base.scss
│ │ │ ├── mixins.scss
│ │ │ ├── overrides.scss
│ │ │ └── variables.scss
│ │ ├── components
│ │ │ └── QuoteInputs.scss
│ │ ├── index.scss
│ │ └── layouts
│ │ └── main.scss
│ └── template.html
├── webpack.config.js
├── webpack.loaders.js
├── webpack.production.config.js
└── yarn.lock

wut is this

from:
import 'bootstrap/dist/css/bootstrap.min.css';

to:
import 'css!../node_modules/bootstrap/dist/css/bootstrap.min.css';

otherwise works great, thanks.

Hello there, it would be also super cool if you guys had also a bootstrap integration example

Did not understand about importing styles. I'm iporing in the APP component index.scss in which I import the rest of the styles, but when then i start build, there is a conflict with the paths of the images in CSS.
Img folder is in src folder
I may use only css module styles and i need import any css to my component?

Hello everyone.

I would love it if you could help me integrate the AirBnb Eslint standards please :)

Could you help me with that?

Thank you.

Jules

If I import a css or sass file like so:

@import "~normalize.css/normalize";

... it works great with npm run start, however if I use npm run build it doesn't work and says:

ERROR in ./src/index.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve module '~normalize.css/normalize'

##Problem is that when I try to apply custom scss styles to already defined css framework class, they did not working unless they are added like:

import styles from '../../css/style.scss';
className={styles.item}

which delete current styles from my css framework..
My target:

import styles from '../../css/style.scss';

export default class Class extends React.Component {

  constructor() {
    super();
  }

  render() {
    return (
      <div className="item">
        <div className="image">
          <img src="" />
        </div>
        <div className="content">
          <span className="header"><span>
        </div>
      </div>
      );
    }
};

and scss

.item {
    .content {
        .header {
            text-transform: capitalize;
        }
    }
}

So I want to save all styles from css framework and just to extend or override with my own from scss

I always make mistakes according to the official document. Can I add a react-router in this configuration? thank you

After running npm run build, do I need to host index.html from a web server? Shouldn't I be able to open /public/index.html in a web browser and see 'It Works!'? All that appears is 'Loading...'. If I don't want to use a web sever, how can I reconfigure webpack?

1. Cloned the project
2. npm i
3. npm run dev (works great)
4. npm run build
5. opened /public/index.html in web browser but only 'Loading...' appears

Hi,

currently eslint-plugin-react is not listed package.json.
This leads to some problems with Atom not finding this module.
Manually adding eslint-plugin-react with npm i --save-dev eslint-plugin-react solves that problem.

Best regards,
Chris

https://github.com/gaearon/react-transform-boilerplate

Hi,

We are currently struggling with running the application under any subdirectory. From root works fine.
Tried different setups like publicPath etc, but nothing works.
What we had to do, is having an environment variable called BASE:

new webpack.DefinePlugin({
			'process.env': {
				NODE_ENV: '"production"',
				BASE: '"/ea"'
			}
		}),

And in all route definitions have something like this:

<Route path={process.env.BASE + "/blabla"} component={BLA} />
<Route path={process.env.BASE + "/blabla/blabla"} component={BLA2} />

However this seems like a dirty fix. Does anything have a complete example of getting this to work, along with a config for Apache html5 mode that also works?

Also tried using the override someone suggests by providing a baseName when creating the History, but having issue when using redux etc. But all these options sounds wrong to me, as it should be possible to deploy the application wherever you want, without having to hardcode any name into the application and do a rebuild.

Any help would be greatly appreciated!

ERROR in ./src/index.jsx
Module not found: Error: Can't resolve 'react' in '/Users/stenmuchow/Work/react-webpack-babel/src'
@ ./src/index.jsx 3:13-29
@ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./src/index.jsx
Module not found: Error: Can't resolve 'react-dom' in '/Users/stenmuchow/Work/react-webpack-babel/src'
@ ./src/index.jsx 7:16-36
@ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./src/app.jsx
Module not found: Error: Can't resolve 'react' in '/Users/stenmuchow/Work/react-webpack-babel/src'
@ ./src/app.jsx 28:13-29
@ ./src/index.jsx
@ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./src/app.jsx
Module not found: Error: Can't resolve 'sass-loader' in '/Users/stenmuchow/Work/react-webpack-babel'
@ ./src/app.jsx 32:0-31
@ ./src/index.jsx
@ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./node_modules/react-hot-loader/lib/patch.dev.js
Module not found: Error: Can't resolve 'react' in '/Users/stenmuchow/Work/react-webpack-babel/node_modules/react-hot-loader/lib'
@ ./node_modules/react-hot-loader/lib/patch.dev.js 7:12-28
@ ./node_modules/react-hot-loader/lib/patch.js
@ ./node_modules/react-hot-loader/patch.js
@ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./node_modules/react-hot-loader/lib/AppContainer.prod.js
Module not found: Error: Can't resolve 'react' in '/Users/stenmuchow/Work/react-webpack-babel/node_modules/react-hot-loader/lib'
@ ./node_modules/react-hot-loader/lib/AppContainer.prod.js 13:12-28
@ ./node_modules/react-hot-loader/lib/AppContainer.js
@ ./node_modules/react-hot-loader/lib/index.prod.js
@ ./node_modules/react-hot-loader/lib/index.js
@ ./node_modules/react-hot-loader/index.js
@ ./src/index.jsx
@ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./node_modules/react-hot-loader/lib/AppContainer.dev.js
Module not found: Error: Can't resolve 'react' in '/Users/stenmuchow/Work/react-webpack-babel/node_modules/react-hot-loader/lib'
@ ./node_modules/react-hot-loader/lib/AppContainer.dev.js 11:12-28
@ ./node_modules/react-hot-loader/lib/AppContainer.js
@ ./node_modules/react-hot-loader/lib/index.prod.js
@ ./node_modules/react-hot-loader/lib/index.js
@ ./node_modules/react-hot-loader/index.js
@ ./src/index.jsx
@ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./node_modules/redbox-react/lib/index.js
Module not found: Error: Can't resolve 'react' in '/Users/stenmuchow/Work/react-webpack-babel/node_modules/redbox-react/lib'
@ ./node_modules/redbox-react/lib/index.js 18:13-29
@ ./node_modules/react-hot-loader/lib/AppContainer.dev.js
@ ./node_modules/react-hot-loader/lib/AppContainer.js
@ ./node_modules/react-hot-loader/lib/index.prod.js
@ ./node_modules/react-hot-loader/lib/index.js
@ ./node_modules/react-hot-loader/index.js
@ ./src/index.jsx
@ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./node_modules/redbox-react/lib/index.js
Module not found: Error: Can't resolve 'react-dom' in '/Users/stenmuchow/Work/react-webpack-babel/node_modules/redbox-react/lib'
@ ./node_modules/redbox-react/lib/index.js 22:16-36
@ ./node_modules/react-hot-loader/lib/AppContainer.dev.js
@ ./node_modules/react-hot-loader/lib/AppContainer.js
@ ./node_modules/react-hot-loader/lib/index.prod.js
@ ./node_modules/react-hot-loader/lib/index.js
@ ./node_modules/react-hot-loader/index.js
@ ./src/index.jsx
@ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

if make modification is keep refreshing

Hi,

I'm curious that why webpack.optimize.DedupePlugin is not include in production config?

Thanks for awesome work.

npm run lint

[email protected] lint C:\Users\fabian.clain\Desktop\react-webpack-babel-master
eslint --ext js --ext jsx src || exit 0

react-webpack-babel-master\src\index.jsx
10:11 error 'App' is already declared in the upper scope no-shadow

✖ 1 problem (1 error, 0 warnings)

We shouldn't be committing the changes to public directory right? But I see no reference of it in a rather comprehensive .gitignore. Was this on purpose?

Hi.
Please remove the Bootstrap from the project.
This package not all need, and those who need can put it separately.

Hello,
I've been banging my head for two hours about this until I discovered that if there is any folder inside the src one that starts with public* then webpack or babel (not sure) will throw an error like this:

ERROR in ./src/publicSection/PublicLayout.jsx
Module parse failed: /my/path/src/publicSection/PublicLayout.jsx Unexpected token (7:12)
You may need an appropriate loader to handle this file type.
...

I guess this has something to do with the jsx section in webpack.loaders.js where inside the exclude field I can see a public regex.
I guess this is wrong because probably you wanted to exclude anything within a public folder BUT outside src, isn't it? Also the regex doesn't match public exactly, it will match anything starting with public.

I don't have much experience with webpack and babel to fix this myself

Thanks a lot for this, everything development wise works wonderfully!

When I do a npm run build, however, once it completes the site doesn't work. I've tried a simple Express.js server of my own, a simple Python one, nothing. I don't see any script errors, nor network load errors and can see all required files being loaded. I don't think the main app file is run because if I add a simple interval, it never runs. The code IS in the bundle, just not executed.

Any idea why? Assuming this is a webpack issue.

Hi, I have install npm install semantic-ui --save and I got "You may need an appropriate loader to handle this file type" for font files and png file? Is there some remedy for this?

Hello, I love what you did with the hot reload of components, I was juste wondering if you intent to do the same for styles?

let me know if you need help on that

It's look like the hot reloading is not working when I changed ex app.jsx.

I see messages in the console then I've changed the component, but there are not updates in browser.

try to update styles and HR work fine with them

have you the same behavior?

Is it possible to watch filechange in test files and trigger test command?

Hi,

I have been using this starter template for a while now and I love it. Today I started a new project and I with latest changes I am unable to import css files the way I used to.

I'm getting this error

ERROR in ./src/index.css
Module parse failed: D:\Aditya\FCC\React\Calculator\src\index.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (D:\Aditya\FCC\React\Calculator\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp.unexpected (D:\Aditya\FCC\React\Calculator\node_modules\acorn\dist\acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (D:\Aditya\FCC\React\Calculator\node_modules\acorn\dist\acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (D:\Aditya\FCC\React\Calculator\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (D:\Aditya\FCC\React\Calculator\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (D:\Aditya\FCC\React\Calculator\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (D:\Aditya\FCC\React\Calculator\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (D:\Aditya\FCC\React\Calculator\node_modules\acorn\dist\acorn.js:1597:21)
    at Parser.pp$3.parseExpression (D:\Aditya\FCC\React\Calculator\node_modules\acorn\dist\acorn.js:1573:21)
    at Parser.pp$1.parseStatement (D:\Aditya\FCC\React\Calculator\node_modules\acorn\dist\acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (D:\Aditya\FCC\React\Calculator\node_modules\acorn\dist\acorn.js:638:25)
    at Parser.parse (D:\Aditya\FCC\React\Calculator\node_modules\acorn\dist\acorn.js:516:17)
    at Object.parse (D:\Aditya\FCC\React\Calculator\node_modules\acorn\dist\acorn.js:3098:39)
    at Parser.parse (D:\Aditya\FCC\React\Calculator\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (D:\Aditya\FCC\React\Calculator\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (D:\Aditya\FCC\React\Calculator\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
 @ ./src/index.jsx 7:13-35

I see that correct css loaders are pushed in the loaders array but I still get this error.

I am, however, able to import CSS files using fundamental webpack style like

import styles from 'style!css!./index.css';

instead of

import styles from './index.css';

Although it would be cool if I don't have to apply the loaders everytime I import css.

Wondering if this is specifically an issue with my setup or what.

My idea is to build my JSX components in ES6, but most open sourced components out there are in JS, so I need a webpack setup that handles both. Would the file extension be different? Do you handle this now? Thanks

ERROR in ./index.jsx
Module build failed: ReferenceError: [BABEL] /home/brw314/react/react-webpack-babel/index.jsx: Unknown op
tion: /home/brw314/react/react-webpack-babel/.babelrc.presets
at Logger.error (/home/brw314/node_modules/babel-core/lib/transformation/file/logger.js:58:11)
at OptionManager.mergeOptions (/home/brw314/node_modules/babel-core/lib/transformation/file/options/o
ption-manager.js:126:29)
at OptionManager.addConfig (/home/brw314/node_modules/babel-core/lib/transformation/file/options/opti
on-manager.js:107:10)
at OptionManager.findConfigs (/home/brw314/node_modules/babel-core/lib/transformation/file/options/op
tion-manager.js:168:35)
at OptionManager.init (/home/brw314/node_modules/babel-core/lib/transformation/file/options/option-ma
nager.js:229:12)
at File.initOptions (/home/brw314/node_modules/babel-core/lib/transformation/file/index.js:147:75)
at new File (/home/brw314/node_modules/babel-core/lib/transformation/file/index.js:137:22)
at Pipeline.transform (/home/brw314/node_modules/babel-core/lib/transformation/pipeline.js:164:16)
at transpile (/home/brw314/node_modules/babel-loader/index.js:12:22)
at Object.module.exports (/home/brw314/node_modules/babel-loader/index.js:71:12)
@ multi main