rwieruch / advanced-react-webpack-babel-setup Goto Github PK
View Code? Open in Web Editor NEWThe advanced React, Webpack, Babel Setup. You want to get beyond create-react-app?
Home Page: https://www.robinwieruch.de
The advanced React, Webpack, Babel Setup. You want to get beyond create-react-app?
Home Page: https://www.robinwieruch.de
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
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"
4.35.3
to 4.36.0
.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.
append
option now supports the default placeholders in addition to [url]
"..."
when overriding options.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
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
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.
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!
Is it possible to add TS support?
title
prop in src/App.js componentis it possible to add css-modules support ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.