Git Product home page Git Product logo

webpack-react-redux's Introduction

webpack-react-redux

A boilerplate for playing around with react, redux and react-router with the help of webpack.

Contains:

  • a working example of a filterable table which you can play around with (look below).
  • ES6 - 7 Support with Babel
  • Redux dev tools to help you keep track of the app's state
  • Routing
  • hot module replacement support so you can change modules or react components without having to reload the browser
  • a webpack production config so you can build the app and make it ready for production
  • Sass support, just import your styles wherever you need them
  • eslint to keep your js readable
  • much more...

Run the app

  1. npm install
  2. npm start

Once running, if you want to hide the redux dev monitor: CTRL+H

Yes, it takes a while to load the first time you open the app.

Is the hot module replacement really working?

Yup! Take a look:

The app updates without the browser having to reload. You don't lose state!

Build the app

npm run build

This will build the app into the "dist" directory in the root of the project. It contains the index.html along with the minified assets, ready for production.

It should look something like the above image.

I don't understand anything!

I went ahead and wrote a detailed series of posts on this project for you. I hope it helps you understand better:

Why doesn't it have async?

To keep it unopinionated. You choose what async library you want. If you want to check out a full example with async in it, check this simple todo-app that uses redux-sagas.

webpack-react-redux's People

Contributors

chriddyp avatar dehorser avatar efredine avatar helb avatar ilyoff avatar jpsierens avatar pipa avatar tushkiz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

webpack-react-redux's Issues

redux-devtools

Use the react-router 4 redux-devtools can not be used

npm run build fails

On OS-X, node 6.9.1, npm 3.10.8. Runs ok with the commits prior to the Jan 16 ones.

The error output:

Module build failed: ReferenceError: window is not defined
    at /Users/ericfredine/lighthouse/projects/react-tetris/node_modules/style-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/css-loader/index.js?modules&localIdentName=[name]---[local]---[hash:base64:5]!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/sass-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/app/styles/footer.scss:159:31
    at /Users/ericfredine/lighthouse/projects/react-tetris/node_modules/style-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/css-loader/index.js?modules&localIdentName=[name]---[local]---[hash:base64:5]!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/sass-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/app/styles/footer.scss:154:48
    at module.exports (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/style-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/css-loader/index.js?modules&localIdentName=[name]---[local]---[hash:base64:5]!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/sass-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/app/styles/footer.scss:176:69)
    at Object.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/style-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/css-loader/index.js?modules&localIdentName=[name]---[local]---[hash:base64:5]!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/sass-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/app/styles/footer.scss:54:37)
    at __webpack_require__ (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/style-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/css-loader/index.js?modules&localIdentName=[name]---[local]---[hash:base64:5]!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/sass-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/app/styles/footer.scss:21:30)
    at /Users/ericfredine/lighthouse/projects/react-tetris/node_modules/style-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/css-loader/index.js?modules&localIdentName=[name]---[local]---[hash:base64:5]!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/sass-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/app/styles/footer.scss:41:18
    at Object.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/style-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/css-loader/index.js?modules&localIdentName=[name]---[local]---[hash:base64:5]!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/sass-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/app/styles/footer.scss:44:10)
    at Module._compile (module.js:570:32)
    at Object.exec (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack-core/lib/NormalModuleMixin.js:88:7)
    at Object.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/extract-text-webpack-plugin/loader.js:97:22)
    at Compiler.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compiler.js:214:10)
    at /Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compiler.js:403:12
    at Compiler.next (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:67:11)
    at Compiler.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/extract-text-webpack-plugin/loader.js:78:5)
    at Compiler.next (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:69:14)
    at Compiler.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/CachePlugin.js:40:4)
    at Compiler.applyPluginsAsync (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:71:13)
    at Compiler.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compiler.js:400:9)
    at Compilation.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compilation.js:577:13)
    at Compilation.applyPluginsAsync (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:60:69)
    at Compilation.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compilation.js:572:10)
    at Compilation.next (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:67:11)
    at Compilation.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/optimize/UglifyJsPlugin.js:140:4)
    at Compilation.applyPluginsAsync (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:71:13)
    at Compilation.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compilation.js:567:9)
    at Compilation.applyPluginsAsync (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:60:69)
    at Compilation.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compilation.js:563:8)
    at Compilation.applyPluginsAsync (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:60:69)
    at Compilation.seal (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compilation.js:525:7)
    at Compiler.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compiler.js:397:15)

ERROR in ./app/styles/filterableTable.scss
Module build failed: ReferenceError: window is not defined
    at /Users/ericfredine/lighthouse/projects/react-tetris/node_modules/style-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/css-loader/index.js?modules&localIdentName=[name]---[local]---[hash:base64:5]!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/sass-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/app/styles/filterableTable.scss:159:31
    at /Users/ericfredine/lighthouse/projects/react-tetris/node_modules/style-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/css-loader/index.js?modules&localIdentName=[name]---[local]---[hash:base64:5]!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/sass-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/app/styles/filterableTable.scss:154:48
    at module.exports (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/style-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/css-loader/index.js?modules&localIdentName=[name]---[local]---[hash:base64:5]!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/sass-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/app/styles/filterableTable.scss:176:69)
    at Object.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/style-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/css-loader/index.js?modules&localIdentName=[name]---[local]---[hash:base64:5]!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/sass-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/app/styles/filterableTable.scss:54:37)
    at __webpack_require__ (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/style-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/css-loader/index.js?modules&localIdentName=[name]---[local]---[hash:base64:5]!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/sass-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/app/styles/filterableTable.scss:21:30)
    at /Users/ericfredine/lighthouse/projects/react-tetris/node_modules/style-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/css-loader/index.js?modules&localIdentName=[name]---[local]---[hash:base64:5]!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/sass-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/app/styles/filterableTable.scss:41:18
    at Object.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/style-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/css-loader/index.js?modules&localIdentName=[name]---[local]---[hash:base64:5]!/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/sass-loader/index.js!/Users/ericfredine/lighthouse/projects/react-tetris/app/styles/filterableTable.scss:44:10)
    at Module._compile (module.js:570:32)
    at Object.exec (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack-core/lib/NormalModuleMixin.js:88:7)
    at Object.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/extract-text-webpack-plugin/loader.js:97:22)
    at Compiler.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compiler.js:214:10)
    at /Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compiler.js:403:12
    at Compiler.next (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:67:11)
    at Compiler.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/extract-text-webpack-plugin/loader.js:78:5)
    at Compiler.next (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:69:14)
    at Compiler.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/CachePlugin.js:40:4)
    at Compiler.applyPluginsAsync (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:71:13)
    at Compiler.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compiler.js:400:9)
    at Compilation.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compilation.js:577:13)
    at Compilation.applyPluginsAsync (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:60:69)
    at Compilation.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compilation.js:572:10)
    at Compilation.next (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:67:11)
    at Compilation.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/optimize/UglifyJsPlugin.js:140:4)
    at Compilation.applyPluginsAsync (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:71:13)
    at Compilation.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compilation.js:567:9)
    at Compilation.applyPluginsAsync (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:60:69)
    at Compilation.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compilation.js:563:8)
    at Compilation.applyPluginsAsync (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/tapable/lib/Tapable.js:60:69)
    at Compilation.seal (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compilation.js:525:7)
    at Compiler.<anonymous> (/Users/ericfredine/lighthouse/projects/react-tetris/node_modules/webpack/lib/Compiler.js:397:15)

Open dist/index.html in browser, I got a blank page.

I cloned the project from master, When npm start, I can see the page. But when I execute the command, npm run build, It produce the dist/index.html and css/jss. But When I access the index.html from browser, I can not see anything. It's blank.

Trouble integrating with the 'thunk' middleware

I want to use thunk middleware so that I can work with APIs and return a function as an action instead of being limited to static objects as actions and synchronous calls. Integrating the thunk middleware leads to errors when trying to use it.

Steps to reproduce error:

  1. In the project directory root, open terminal and type 'npm install redux-thunk --save'
  2. Also type in 'npm install isomorphic-fetch --save'
  3. Create a FetchData.js file in the actions with the following:
import fetch from 'isomorphic-fetch';
import filterTable from '../actions/index.js';

export function fetchData() {
    return function(dispatch) {
        return fetch('https://www.googleapis.com/youtube/v3/channels?part=contentDetails&mine=true')
            .then(
                response => response.json(),
                error => console.log('An error occured.', error)
            )
            .then(function(json) {
                console.log(json);
                dispatch(filterTable('a'));
            });
    };
}
  1. In index.js add the following line to the top:
    import fetchData from './actions/FetchData';
  2. Below const store = configureStore(); add the following line:
    store.dispatch(fetchData());

The error that I get isUncaught TypeError: (0 , _FetchData2.default) is not a function when starting the app. It is as if it is trying to create a second version of the function I want to import.

npm start

$ npm start

[email protected] start C:\My_Projects\AQ-R\webpack-react-redux
node server

events.js:160
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 127.0.0.1:3000
at Object.exports._errnoException (util.js:1026:11)
at exports._exceptionWithHostPort (util.js:1049:20)
at Server._listen2 (net.js:1257:14)
at listen (net.js:1293:10)
at net.js:1403:9
at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:81:10)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: node server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node server'.
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 webpack-react-redux-react-router package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node server
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs webpack-react-redux-react-router
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls webpack-react-redux-react-router
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\My_Projects\AQ-R\webpack-react-redux\npm-debug.log

Build Failed for the following error

ERROR in ./app/index.js
Module build failed: ReferenceError: Symbol is not defined
at plugin (/Users/yinz/Downloads/webpack-react-redux-react-router-master/node_modules/react-hot-loader/lib/babel/index.js:86:23)
at Function.memoisePluginContainer (/Users/yinz/Downloads/webpack-react-redux-react-router-master/node_modules/babel-core/lib/transformation/file/options/option-manager.js:109:13)
at Function.normalisePlugin (/Users/yinz/Downloads/webpack-react-redux-react-router-master/node_modules/babel-core/lib/transformation/file/options/option-manager.js:142:32)
at /Users/yinz/Downloads/webpack-react-redux-react-router-master/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:30
at Array.map (native)
at Function.normalisePlugins (/Users/yinz/Downloads/webpack-react-redux-react-router-master/node_modules/babel-core/lib/transformation/file/options/option-manager.js:154:20)
at OptionManager.mergeOptions (/Users/yinz/Downloads/webpack-react-redux-react-router-master/node_modules/babel-core/lib/transformation/file/options/option-manager.js:228:36)
at OptionManager.init (/Users/yinz/Downloads/webpack-react-redux-react-router-master/node_modules/babel-core/lib/transformation/file/options/option-manager.js:373:12)
at File.initOptions (/Users/yinz/Downloads/webpack-react-redux-react-router-master/node_modules/babel-core/lib/transformation/file/index.js:221:65)
at new File (/Users/yinz/Downloads/webpack-react-redux-react-router-master/node_modules/babel-core/lib/transformation/file/index.js:141:24)
at Pipeline.transform (/Users/yinz/Downloads/webpack-react-redux-react-router-master/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/yinz/Downloads/webpack-react-redux-react-router-master/node_modules/babel-loader/index.js:38:20)
at Object.module.exports (/Users/yinz/Downloads/webpack-react-redux-react-router-master/node_modules/babel-loader/index.js:131:12)
@ multi main

Server file

Not an issue as such. But a suggestion.
It's a pretty good, clean and good base point for customising-adding complex stuffs. But only things I found missing in this repo is that server(express/node) file. When you do npm run build, it does creates the bundled files in a dist folder but routes won't work with them and server is needed to serve those files. Correct me if I'm wrong.
(I'm not talking about the ./server.js file which is using webpackDevServer because it's only for development purposes.)

Cheers

I just download the demo and follow the instructions with no additional changes but when generate the dist and try to run the index.html I have an error

screen shot 2018-02-14 at 11 25 39 pm
Is on the link href where I get the error.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>React Redux React-Router with Webpack Boilerplate</title>
    <meta name="description" content="React Redux React-Router with Webpack Boilerplate">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/main-f730bf670e05d7e400dd.min.css" rel="stylesheet"></head>

<body class="view-login">
    <div id="root"></div>
<script type="text/javascript" src="/main-f730bf670e05d7e400dd.min.js"></script></body>

</html>

issue with fonts config and missing 'file-loader' dependency

First of all, cool boilerplate!

I got this error, when I added fonts to the boilerplate

ERROR in ./app/styles/fonts/icomoon.svg?jkr1b8
Module parse failed: C:\Users\Tushar\Documents\Projects\temp\react-test\app\styles\fonts\icomoon.svg?jkr1b8 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 (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp.unexpected (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\acorn\dist\acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\acorn\dist\acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\acorn\dist\acorn.js:1597:21)
    at Parser.pp$3.parseExpression (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\acorn\dist\acorn.js:1573:21)
    at Parser.pp$1.parseStatement (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\acorn\dist\acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\acorn\dist\acorn.js:638:25)
    at Parser.parse (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\acorn\dist\acorn.js:516:17)
    at Object.parse (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\acorn\dist\acorn.js:3098:39)
    at Parser.parse (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (C:\Users\Tushar\Documents\Projects\temp\react-test\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
 @ ./~/css-loader!./~/sass-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]!./app/styles/fonts.scss 6:373-410

this was due to webpack loader config for fonts, which I fixed updating the configuration
Here's my new configuration

[
  { test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
  { test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/, loader: 'file' }
]

The old configuration would only support pattern like

  • fontawesome.woff2?v=4.3.1 and not
  • fontawesome.woff2?v=4.3 or icomoon.svg?jkr1b8#icomoon

after fixing this I started getting another error

ERROR in ./~/css-loader!./~/sass-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]!./app/styles/fonts.scss
Module not found: Error: Cannot resolve module 'file' in C:\Users\Tushar\Documents\Projects\temp\react-test\app\styles
 @ ./~/css-loader!./~/sass-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]!./app/styles/fonts.scss 6:82-119 6:142-179

this was due to file-loader module was missing

Raising a pull requests for this

Thanks

JSX files

not really the issue but I would like to use JSX files instead JS,
could you help me out to change webpack.config.js file ?

npm install failed for node sass on windows 10

Hi,
I am facing this issue when performing npm install, particularly for node-sass module.

gyp verb check python checking for Python executable "python2" in the PATH gyp verb whichfailed Error: not found: python2 gyp verbwhichfailed at getNotFoundError (C:\pocs\webpack-react-redux\node_modules\which\which.js:13:12) gyp verbwhichfailed at F (C:\pocs\webpack-react-redux\node_modules\which\which.js:68:19) gyp verbwhichfailed at E (C:\pocs\webpack-react-redux\node_modules\which\which.js:80:29) gyp verbwhichfailed at C:\pocs\webpack-react-redux\node_modules\which\which.js:89:16 gyp verbwhichfailed at C:\pocs\webpack-react-redux\node_modules\isexe\index.js:42:5 gyp verbwhichfailed at C:\pocs\webpack-react-redux\node_modules\isexe\windows.js:36:5 gyp verbwhichfailed at FSReqWrap.oncomplete (fs.js:152:21) gyp verbwhichfailed python2 { Error: not found: python2 gyp verbwhichfailed at getNotFoundError (C:\pocs\webpack-react-redux\node_modules\which\which.js:13:12) gyp verbwhichfailed at F (C:\pocs\webpack-react-redux\node_modules\which\which.js:68:19) gyp verbwhichfailed at E (C:\pocs\webpack-react-redux\node_modules\which\which.js:80:29) gyp verbwhichfailed at C:\pocs\webpack-react-redux\node_modules\which\which.js:89:16 gyp verbwhichfailed at C:\pocs\webpack-react-redux\node_modules\isexe\index.js:42:5 gyp verbwhichfailed at C:\pocs\webpack-react-redux\node_modules\isexe\windows.js:36:5 gyp verbwhichfailed at FSReqWrap.oncomplete (fs.js:152:21) gyp verbwhichfailed stack: 'Error: not found: python2\n at getNotFoundError (C:\\pocs\\webpack-react-redux\\node_modules\\which\\which.js:13:12)\n at F (C:\\pocs\\webpack-react-redux\\node_modules\\which\\which.js:68:19)\n at E (C:\\pocs\\webpack-react-redux\\node_modules\\which\\which.js:80:29)\n at C:\\pocs\\webpack-react-redux\\node_modules\\which\\which.js:89:16\n at C:\\pocs\\webpack-react-redux\\node_modules\\isexe\\index.js:42:5\n at C:\\pocs\\webpack-react-redux\\node_modules\\isexe\\windows.js:36:5\n at FSReqWrap.oncomplete (fs.js:152:21)', gyp verbwhichfailed code: 'ENOENT' } gyp verb check python checking for Python executable "python" in the PATH gyp verbwhichsucceeded python C:\Users\Prashant Alhat\AppData\Local\Programs\Python\Python36-32\python.EXE gyp verb check python versionC:\Users\Prashant Alhat\AppData\Local\Programs\Python\Python36-32\python.EXE -c "import platform; print(platform.python_version());" returned: "3.6.4\r\n"

webpack will recompile on file change on OS X, but not on Linux

I am attempting to use hot-reload. On OS X 10.12, when I run npm start, open localhost:3000, and then change App.js, webpack will successfully recompile changes and hot-reload the changes in the browser. But this will fail on Ubuntu 16.04, which does not recompile when when App.js is changed. It appears that webpack-dev-server does not detect changes to App.js

yarn build

main.min.js

{"undefined"!=typeof REACT_HOT_LOADER&&(REACT_HOT_LOADER.register(a,"About","C:/Users/win/Desktop/wrr/app/components/About.js"),REACT_HOT_LOADER.register(u,"default","C:/Users/win/Desktop/wrr/app/components/About.js"))})()},

can remove REACT_HOT_LOADER?

HMR not working

Just clone the repo, ran npm install and then npm start. HMR not working.

Launch to heroku

any thoughts how I can deploy to heroku?

I keep getting this error:
"-----> Build failed
remote:
remote: Outdated Yarn lockfile"

I already updated the yarn file using "yarn install" still get the same error...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.