rwieruch / advanced-react-webpack-babel-setup

The advanced React, Webpack, Babel Setup. You want to get beyond create-react-app?

advanced-react-webpack-babel-setup

Advanced React with Webpack Setup. How to set it up yourself:

• Minimal React + Webpack Setup
• Advanced Webpack Setup
• ESLint + ESLint + React + Prettier + ESLint

Features

• React 16
• Webpack 5
• Babel 7
• Hot Module Replacement
• Dev + Production Builds
• Dist Folder Managagement by Webpack
• Common and environment specific Webpack Configuration
• Composition of Webpack Configuration
• Source Maps
• Environment Variables
• Webpack Add-Ons
• ESLint + Prettier

DIY Add-Ons

• SVG Icons
• CSS Modules
• Fonts Support
• Images Support
• Docker

Alternatives

• Minimal React Webpack Babel Setup

Installation

• git clone [email protected]:rwieruch/advanced-react-webpack-babel-setup.git
• cd advanced-react-webpack-babel-setup
• npm install
• npm start
• visit http://localhost:8080/

advanced-react-webpack-babel-setup's Issues

What is Element type on Route ?

hello

I just wondered what is element attribute doing you used on

<Route path={routes.PROGRAMMING} element={<Programming />} />

i searched the doc and i found nothing about it!

thank you!

An in-range update of webpack is breaking the build 🚨

The devDependency webpack was updated from 4.35.3 to 4.36.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v4.36.0

Features

• SourceMapDevToolPlugin append option now supports the default placeholders in addition to [url]
• Arrays in resolve and parser options (Rule and Loader API) support backreferences with "..." when overriding options.

Commits

The new version differs by 42 commits.

• 95d21bb 4.36.0
• aa1216c Merge pull request #9422 from webpack/feature/dot-dot-dot-merge
• b3ec775 improve merging of resolve and parsing options
• 53a5ae2 Merge pull request #9419 from vankop/remove-valid-jsdoc-rule
• ab75240 Merge pull request #9413 from webpack/dependabot/npm_and_yarn/ajv-6.10.2
• 0bdabf4 Merge pull request #9418 from webpack/dependabot/npm_and_yarn/eslint-plugin-jsdoc-15.5.2
• f207cdc remove valid jsdoc rule in favour of eslint-plugin-jsdoc
• 31333a6 chore(deps-dev): bump eslint-plugin-jsdoc from 15.3.9 to 15.5.2
• 036adf0 Merge pull request #9417 from webpack/dependabot/npm_and_yarn/eslint-plugin-jest-22.8.0
• 37d4480 Merge pull request #9411 from webpack/dependabot/npm_and_yarn/simple-git-1.121.0
• ce2a183 chore(deps-dev): bump eslint-plugin-jest from 22.7.2 to 22.8.0
• 0beeb7e Merge pull request #9391 from vankop/create-hash-typescript
• bf1a24a #9391 resolve super call discussion
• bd7d95b #9391 resolve discussions, AbstractMethodError
• 4190638 chore(deps): bump ajv from 6.10.1 to 6.10.2

There are 42 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Failed to compile.

Typing npm start after installation result in a compilation fail.

`
C:\Users\pitik\Desktop\advanced-react-webpack-babel-setup> npm start

[email protected] start C:\Users\pitik\Desktop\advanced-react-webpack-babel-setup
webpack-dev-server --config build-utils/webpack.config.js --env.env=dev
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from ./dist
× ｢wdm｣: Hash: 7d13dd8472c7c42ef282
Version: webpack 4.34.0
Time: 1032ms
Built at: 2019-06-25 16:41:41
Asset Size Chunks Chunk Names
bundle.js 926 KiB main [emitted] main
index.html 213 bytes [emitted]
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost (webpack)/hot/dev-server.js ./src/index.js 52 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.04 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.77 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.63 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^./log$] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.34 KiB {main} [built]
[./src/index.js] 554 bytes {main} [built] [failed] [1 error]
+ 20 hidden modules
ERROR in ./src/index.js
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Cannot find module 'eslint/lib/formatters/stylish'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.module.exports (C:\Users\pitik\Desktop\advanced-react-webpack-babel-setup\node_modules\eslint-loader\index.js:199:26)
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 407 bytes {0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Failed to compile.
`

Config:
Windows10 64B
NODEJS version 10.15.3
npm v6.4.1

Add TypeScript support

Is it possible to add TS support?

• remove prop-types from code and package.json
• add minimalistic typescript support
• add type safety for title prop in src/App.js component

JSX

Great template, however the babel doesn't seem to support JSX as ReactJS is a bigger user

ERROR in ./src/contexts/AuthProvider/AuthProvider.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: advanced-react-webpack-babel-setup/src/contexts/AuthProvider/AuthProvider.js: Support for the experimental syntax 'jsx' isn't currently enabled (21:9):

19 |
20 | return (

21 | <AuthContext.Provider value={{state, setState}}>
| ^
22 | {children}
23 | </AuthContext.Provider>
24 | )

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.

Add css-modules support

is it possible to add css-modules support ?

Use CSS without Modules?

Sorry for disturbing again, but I really need this.

In your series, you use CSS Modules, more like as a component import styles from "./style.css" then reference it with
className={styles.title}

I want to use it straight away without importing it as a component.
Like
import "./style.css"
className="title"