kentcdodds / es6-todomvc Goto Github PK
View Code? Open in Web Editor NEWThe vanillajs example converted to es6
Home Page: https://kcd.im/webpack-workshop-repo
License: MIT License
The vanillajs example converted to es6
Home Page: https://kcd.im/webpack-workshop-repo
License: MIT License
I did a fresh clone of the repo and ran npm install
and and getting peer dependency errors with regard to babel-loader
, karma-webpack
, and webpack-dev-server
.
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.4.0
npm ERR! npm v2.14.20
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants webpack@1 || ^2.1.0-beta
npm ERR! peerinvalid Peer [email protected] wants webpack@^1.4.0
npm ERR! peerinvalid Peer [email protected] wants webpack@>=2.0.3-beta <3
Running npm 2.14.20 and node 4.4.0.
I'm using mac this is what i get when running npm run setup:fem
npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "validate"
npm ERR! node v5.2.0
npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! @ validate: `npm-run-all --parallel lint build test`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ validate script 'npm-run-all --parallel lint build test'.
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 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm-run-all --parallel lint build test
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
Hello.
OS: Windows 10 Version 1709.
Node: 8.10.0
NPM: 5.6.0
Every time I use git checkout -f <branch-name>
command, the branch will change but I get this error:
Already on 'FEM/00-original-project'
Your branch is up-to-date with 'origin/FEM/00-original-project'.
module.js:549
throw err;
^
Error: Cannot find module 'E:\cygdrive\e\dev\vscode\webpack-deep-dive\es6-todomvc\.git\hooks\post-checkout'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Function.Module.runMain (module.js:693:10)
at startup (bootstrap_node.js:188:16)
at bootstrap_node.js:609:3
I also followed setup instruction for windows 10 and still I get the error.
Hi i have this error, after start webpack --env.dev , what can i do with this ?
I would be grateful for help
ERROR in c:\es6-todomvc\node_modules\extract-text-webpack-plugin\loader.js?{"omit":1,"remove":true}!c:\es6-todomvc\node_modules\style-loader\index.js!c:\es6-todomvc\node_modules\css-loader\index.js!c:\es6-todomvc\node_modules\todomvc-app-css\index.css doesn't export content
ERROR in c:\es6-todomvc\node_modules\extract-text-webpack-plugin\loader.js?{"omit":1,"remove":true}!c:\es6-todomvc\node_modules\style-loader\index.js!c:\es6-todomvc\node_modules\css-loader\index.js!c:\es6-todomvc\node_modules\todomvc-app-css\index.css doesn't export content
ERROR in c:\es6-todomvc\node_modules\extract-text-webpack-plugin\loader.js?{"omit":1,"remove":true}!c:\es6-todomvc\node_modules\style-loader\index.js!c:\es6-todomvc\node_modules\css-loader\index.js!c:\es6-todomvc\src\app.css doesn't export content
When I run npm run setup:fem.... seems lint fails....
My npm and node versions:
npm -v = 3.8.6
node -v = v6.0.0
23:40:29-yc03648~/workshop/webpack/es6-todomvc (master)$ npm run setup:fem
> @ setup:fem /Users/yc03648/workshop/webpack/es6-todomvc
> git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project
Branch FEM/07.1-deploy-surge set up to track remote branch FEM/07.1-deploy-surge from origin.
Switched to a new branch 'FEM/07.1-deploy-surge'
npm WARN [email protected] requires a peer of webpack@^1.4.0 but none was installed.
> @ validate /Users/yc03648/workshop/webpack/es6-todomvc
> npm-run-all --parallel lint build test
> @ lint /Users/yc03648/workshop/webpack/es6-todomvc
> eslint .
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
> @ test /Users/yc03648/workshop/webpack/es6-todomvc
> karma start
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
> @ prebuild /Users/yc03648/workshop/webpack/es6-todomvc
> rimraf dist
> @ build /Users/yc03648/workshop/webpack/es6-todomvc
> webpack --env.prod -p
build [== ] 10%
/Users/yc03648/workshop/webpack/es6-todomvc/src/app.js
1:8 error Unable to resolve path to module 'todomvc-app-css/index.css' import/no-unresolved
2:8 error Unable to resolve path to module './app.css' import/no-unresolved
4:19 error Unable to resolve path to module './helpers' import/no-unresolved
5:26 error Unable to resolve path to module './todo' import/no-unresolved
6:25 error Unable to resolve path to module './graph' import/no-unresolved
/Users/yc03648/workshop/webpack/es6-todomvc/src/bootstrap.js
2:41 error Unable to resolve path to module 'offline-plugin/runtime' import/no-unresolved
3:22 error Unable to resolve path to module './app' import/no-unresolved
4:19 error Unable to resolve path to module './helpers' import/no-unresolved
/Users/yc03648/workshop/webpack/es6-todomvc/src/controller.test.js
1:24 error Unable to resolve path to module './controller' import/no-unresolved
/Users/yc03648/workshop/webpack/es6-todomvc/src/graph/index.js
1:34 error Unable to resolve path to module '../todo' import/no-unresolved
/Users/yc03648/workshop/webpack/es6-todomvc/src/graph/render.js
1:19 error Unable to resolve path to module 'react' import/no-unresolved
2:22 error Unable to resolve path to module 'react-dom' import/no-unresolved
3:24 error Unable to resolve path to module 'rd3' import/no-unresolved
4:21 error Unable to resolve path to module 'lodash' import/no-unresolved
/Users/yc03648/workshop/webpack/es6-todomvc/src/store.js
1:22 error Unable to resolve path to module './helpers' import/no-unresolved
/Users/yc03648/workshop/webpack/es6-todomvc/src/todo.js
1:18 error Unable to resolve path to module './view' import/no-unresolved
2:24 error Unable to resolve path to module './controller' import/no-unresolved
3:19 error Unable to resolve path to module './model' import/no-unresolved
4:19 error Unable to resolve path to module './store' import/no-unresolved
5:22 error Unable to resolve path to module './template' import/no-unresolved
6:22 error Unable to resolve path to module './helpers' import/no-unresolved
/Users/yc03648/workshop/webpack/es6-todomvc/src/view.js
2:48 error Unable to resolve path to module './helpers' import/no-unresolved
✖ 22 problems (22 errors, 0 warnings)
npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/yc03648/.nvm/versions/node/v6.0.0/bin/node" "/Users/yc03648/.nvm/versions/node/v6.0.0/bin/npm" "run-script" "lint"
npm ERR! node v6.0.0
npm ERR! npm v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! @ lint: `eslint .`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ lint script 'eslint .'.
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 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! eslint .
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/yc03648/workshop/webpack/es6-todomvc/npm-debug.log
> @ postbuild /Users/yc03648/workshop/webpack/es6-todomvc
> cpy favicon.ico dist
ERROR: "lint" exited with 1.
npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/yc03648/.nvm/versions/node/v6.0.0/bin/node" "/Users/yc03648/.nvm/versions/node/v6.0.0/bin/npm" "run" "validate"
npm ERR! node v6.0.0
npm ERR! npm v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! @ validate: `npm-run-all --parallel lint build test`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ validate script 'npm-run-all --parallel lint build test'.
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 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm-run-all --parallel lint build test
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/yc03648/workshop/webpack/es6-todomvc/npm-debug.log
npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/yc03648/.nvm/versions/node/v6.0.0/bin/node" "/Users/yc03648/.nvm/versions/node/v6.0.0/bin/npm" "run" "setup:fem"
npm ERR! node v6.0.0
npm ERR! npm v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! @ setup:fem: `git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ setup:fem script 'git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project'.
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 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/yc03648/workshop/webpack/es6-todomvc/npm-debug.log
Two items that may help narrow down the issue:
npm WARN [email protected] requires a peer of webpack@^1.4.0 but none was installed.
I do see the webpack creating some bundles:
Hash: b068372baa672e06b4d7
Version: webpack 2.1.0-beta.20
Time: 1907ms
Asset Size Chunks Chunk Names
bundle.app.f664776ed4d591679617.js.map 2.59 kB 1, 2 [emitted] app
bundle.vendor.037e898b2f23ec84c376.js 138 bytes 0, 2 [emitted] vendor
bundle.manifest.9eb8de37e396657e9121.js 1.46 kB 2 [emitted] manifest
styles.vendor.037e898b2f23ec84c376.css 5.13 kB 0, 2 [emitted] vendor
bundle.vendor.037e898b2f23ec84c376.js.map 663 bytes 0, 2 [emitted] vendor
styles.vendor.037e898b2f23ec84c376.css.map 115 bytes 0, 2 [emitted] vendor
bundle.app.f664776ed4d591679617.js 2.22 kB 1, 2 [emitted] app
bundle.manifest.9eb8de37e396657e9121.js.map 13.6 kB 2 [emitted] manifest
index.html 3.5 kB [emitted]
sw.js 5.94 kB [emitted]
appcache/manifest.appcache 228 bytes [emitted]
appcache/manifest.html 58 bytes [emitted]
[2] multi vendor 28 bytes {0} [built]
+ 5 hidden modules
And directly after that output I receive my first error:
ERROR in ./bootstrap.js
Module build failed: Error: Cannot remove "babel-plugin-transform-es2015-modules-commonjs" from the plugin list.
at Object.<anonymous> (/Users/slaplante/workspace/frontendmasters/es6-todomvc/node_modules/babel-preset-es2015-webpack/index.js:35:11)
Many (but not all) of the chunks fail:
chunk {0} vendor, styles.vendor.css (vendor) 69 bytes [entry]
[0] ./~/todomvc-app-css/index.css 41 bytes {0} [built]
[2] multi vendor 28 bytes {0}
chunk {1} app (app) 1.73 kB [entry]
[1] ./src/bootstrap.js 1.73 kB {1} [built] [failed] [1 error]
chunk {2} src/view.js (src/view.js) 1.73 kB [entry] [rendered]
[16] ./src/view.js 1.73 kB {2} [built] [failed] [1 error]
chunk {3} src/todo.js (src/todo.js) 1.73 kB [entry] [rendered]
[15] ./src/todo.js 1.73 kB {3} [built] [failed] [1 error]
All of the errors that are reported are the same "Cannot remove...from plugin list" on the same plugin.
Based on gajus/babel-preset-es2015-webpack#10
I tried running
npm uninstall --save-dev babel-preset-es2015
both before and after changing back to the master branch, but the same errors are reported.
N.B. the setup:fem script is found in the master branch but the script changes you to another branch; ipso facto that script cannot be run twice without switching back to master.
Finally, npm itself reports this to me:
npm ERR! Failed at the @ build script 'webpack --env.prod -p'.
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 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --env.prod -p
as well as
npm ERR! Tell the author that this fails on your system:
npm ERR! npm-run-all --parallel lint build test
as well as
npm ERR! Tell the author that this fails on your system:
npm ERR! git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project
When I run npm run setup:fem
I get a lot of errors and setup fails:
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run-script" "lint"
npm ERR! node v6.8.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! @ lint: `eslint .`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ lint script 'eslint .'.
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 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! eslint .
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/apple/Documents/learning/webpack/es6-todomvc/npm-debug.log
ERROR: "lint" exited with 1.
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "validate"
npm ERR! node v6.8.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! @ validate: `npm-run-all --parallel lint build test`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ validate script 'npm-run-all --parallel lint build test'.
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 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm-run-all --parallel lint build test
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/apple/Documents/learning/webpack/es6-todomvc/npm-debug.log
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "setup:fem"
npm ERR! node v6.8.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! @ setup:fem: `git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ setup:fem script 'git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project'.
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 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
node version 6.8.1
npm version 3.10.8
I'm trying to generate the HTML through webpack as in CSS and js, but it seems something is missing ,
this webpack.config :
const {resolve} = require('path');
const webpackValidator = require('webpack-validator');
const OfflinePlugin = require('offline-plugin');
module.exports = webpackValidator({
debug: true,
context: resolve('./scripts'),
entry: './main.js',
output: {
filename: './scripts/bundle.js',
pathinfo: true,
},
// Change eval to source-map for production
devtool: 'eval',
module: {
loaders: [
{
test:/\.(jsx|js)$/,
exclude: /node_modules/,
loader: 'imports?jQuery=jquery,$=jquery,this=>window'
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: "style-loader!css-loader"
},
// ASSET LOADER
{ test: /\.(woff|woff2|ttf|eot)$/, loader: 'file' },
//IMAGE LOADER
{ test: /\.(jpe?g|png|gif|svg)$/i, loader:'file', exclude: /node_modules/ },
{ test: /\.html$/, loader: "html-loader", exclude: /node_modules/ }
]
},
resolve: {
extensions: ['', '.js', '.jsx','.css','.jpg']
},
plugins: [
new OfflinePlugin({
caches: {
main: [
'/images/icons/home2.svg',
'/images/hamburger.svg',
'/images/logo_grey.svg',
':rest:'
]
},
externals: [
'/',
'/images/icons/home2.svg',
'/images/hamburger.svg',
'/images/logo_grey.svg',
]
})
]
});
any advice?
The errors from npm-debug.log are as follows:
npm-debug.log
11 silly lifecycle @~setup:fem: Args: [ '/d /s /c',
11 silly lifecycle 'git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project' ]
12 silly lifecycle @~setup:fem: Returned: code: 1 signal: null
13 info lifecycle @~setup:fem: Failed to exec setup:fem script
14 verbose stack Error: @ setup:fem: git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (C:\Users\Kent\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:242:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess. (C:\Users\Kent\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:852:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid @
16 verbose cwd C:\Programming\Nodejs\es6-todomvc
17 error Windows_NT 10.0.10586
18 error argv "C:\Program Files\nodejs\node.exe" "C:\Users\Kent\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "setup:fem"
19 error node v6.3.1
20 error npm v3.10.5
21 error code ELIFECYCLE
22 error @ setup:fem: git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project
22 error Exit status 1
23 error Failed at the @ setup:fem script 'git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project
23 error You can get information on how to open an issue for this project with:
23 error npm bugs
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
Hi , I followed your frontend master course and I tried to implement webpack with offline plufing service worker to a gulp project , so but it is not working fine I posted the question on stackoverflow no answers , can I get any advice
http://stackoverflow.com/questions/39368597/webpack-offline-plugin-how-to-add-assets-to-sw-js
What I did:
nvm
and switched to v6
which was confirmed both by command -v nvm
, running nvm install node
, and then running nvm ls
which showed me that it was running v6
code
folder, ran git clone https://github.com/kentcdodds/starwars-names.git
cd
into that directorynpm run setup:fem
What I expected to happen:
http://localhost:8080
for a ToDo app to be thereWhat actually happened:
> [email protected] setup:fem /Users/admin/Code/Front End Masters/starwars-names
> git checkout FEM/00-scratch
Branch FEM/00-scratch set up to track remote branch FEM/00-scratch from origin.
Switched to a new branch 'FEM/00-scratch'
running ls
inside of the folder now shows nothing while before the npm run setup:fem
gave me:
CONTRIBUTING.md other webpack.config.babel.js
LICENSE package.json
README.md src
Hi,
Just forked your repo and tried to get it to work. I added your repo as an upstream remote. I then did a git fetch -all
. Then I did npm run setup:egghead
. This results in a message saying Exit status 1. I'm on node v6.2.2 and npm 3.9.5. Any thoughts on what could be wrong? This is the output I have in npm-debug.log
:
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'run',
1 verbose cli 'setup:egghead' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'presetup:egghead', 'setup:egghead', 'postsetup:egghead' ]
5 info lifecycle @~presetup:egghead: @
6 silly lifecycle @~presetup:egghead: no script for presetup:egghead, continuing
7 info lifecycle @~setup:egghead: @
8 verbose lifecycle @~setup:egghead: unsafe-perm in lifecycle true
9 verbose lifecycle @~setup:egghead: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/awesome/Sites/training/egg-webpack-production/node_modules/.bin:/usr/local/bin:/usr/local/bin:/usr/local/opt/php56/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/usr/local/mysql/bin/
10 verbose lifecycle @~setup:egghead: CWD: /Users/awesome/Sites/training/egg-webpack-production
11 silly lifecycle @~setup:egghead: Args: [ '-c',
11 silly lifecycle 'git checkout prelesson/polyfill-promises && npm install && mkdir dist && npm run validate' ]
12 silly lifecycle @~setup:egghead: Returned: code: 1 signal: null
13 info lifecycle @~setup:egghead: Failed to exec setup:egghead script
14 verbose stack Error: @ setup:egghead: `git checkout prelesson/polyfill-promises && npm install && mkdir dist && npm run validate`
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:245:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:852:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid @
16 verbose cwd /Users/awesome/Sites/training/egg-webpack-production
17 error Darwin 15.6.0
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "setup:egghead"
19 error node v6.2.2
20 error npm v3.9.5
21 error code ELIFECYCLE
22 error @ setup:egghead: `git checkout prelesson/polyfill-promises && npm install && mkdir dist && npm run validate`
22 error Exit status 1
23 error Failed at the @ setup:egghead script 'git checkout prelesson/polyfill-promises && npm install && mkdir dist && npm run validate'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error git checkout prelesson/polyfill-promises && npm install && mkdir dist && npm run validate
23 error You can get information on how to open an issue for this project with:
23 error npm bugs
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
I have the below webpack.config.js
, but keep getting error Config did not export an object
when running command npm run webpack --env.dev
Can you point to what I am doing incorrectly? Thanks.
const webpack = require('webpack');
module.exports = env => {
const addPlugin = (add, plugin) => add ? plugin : undefined;
const ifProd = plugin => addPlugin(env.prod, plugin);
const removeEmpty = array => array.filter(i => !!i);
return {
entry: getEntrySources(['whatwg-fetch', './src/entry.js']),
output: {
path: __dirname + '/.build/js',
filename: 'bundle.js',
},
devtool: 'cheap-module-source-map',
module: {
preLoaders: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loaders: [
'source-map',
],
},
],
loaders: [{
test: /\.less$/,
include: /src/,
loaders: [
'style',
'css',
'postcss?browsers=last 3 versions',
'less',
],
}, {
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'url?limit=8192',
'img',
],
}, {
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loaders: [
'react-hot',
'babel?presets[]=react,presets[]=es2015',
'eslint',
],
}, {
test: /\.json$/,
include: /lib|node_modules/,
loaders: [
'json',
],
},
],
},
plugins: removeEmpty([
ifProd(new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
},
})),
]),
};
};
function getEntrySources(sources) {
return sources;
}
Hi Kent,
Thanks for the awesome course! Helped me a lot moving from Gulp.
Just noticed $on(elem, type, cb, { once: true }) would not work as expected.
Future proof version 👍
/**
* Wrapper for `addEventListener`
*
* @param {HTMLElement} target
* @param {string} eventType
* @param {function} eventHandler
* @param {boolean|Object.<boolean>} options - useCapture OR
* {capture, once, passive}
*/
function $on(target, eventType, eventHandler, opt = false) {
target.addEventListener(eventType, eventHandler, opt);
}
TPHomeMac:starwars-names tphome$ npm run setup:fem
[email protected] setup:fem /Users/tphome/starwars-names
git checkout FEM/10.1-docs && npm install && npm run validate && rimraf .nyc_output coverage dist .git/hooks && git checkout FEM/00-scratch
Branch FEM/10.1-docs set up to track remote branch FEM/10.1-docs from origin.
Switched to a new branch 'FEM/10.1-docs'
(node:1386) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated [email protected]: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: cross-spawn no longer requires a build toolchain, use it instead!
npm WARN deprecated [email protected]: this package has been reintegrated into npm and is now out of date with respect to npm
npm WARN deprecated [email protected]: Please update conventional-changelog to >1.0.0. If you are running the cli, use conventional-changelog-cli
[email protected] install /Users/tphome/starwars-names/node_modules/fsevents
node-pre-gyp install --fallback-to-build
[fsevents] Success: "/Users/tphome/starwars-names/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" is installed via remote
[email protected] install /Users/tphome/starwars-names/node_modules/execSync
node install.js
[execsync v1.0.2] Attempting to compile native extensions.
[execSync v1.0.2]
Native code compile failed!!
[email protected] install /Users/tphome/starwars-names/node_modules/ghooks
node ./bin/module-install
I am seeing these issues:
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
Also another error at the end of the log file below when I tried to run npm start.
I am running Windows 10, 64bit.
node v6.3.1
npm v3.10.3
git v2.9.2
npm_log.txt
Hey - I am also having this issue - same as #9. Except it's on the egghead series. I've also tried cloning the master branch and doing npm install
then npm run validate
but that also gives the error
After cloning the workshop repo and checking out the workshop/07-coverage
branch, running npm run setup
exits with an error before testing and coverage completes.
I was still able to subsequently checkout the workshop/00-original-project
branch and run npm start
with no problems. However, any branch after that (as soon as webpack is introduced) will error on both npm start
and npm run validate
.
The test
script (as part of the validate
script) is throwing an error as a result of destructuring in the webpack configuration. As far as I know (read: as far as node.green knows), Node doesn't support the destructuring unless you're using v6.x
-- I'm running v4.4.1
(this is the problem).
I just thought I'd let you know, since a specific Node version wasn't in the prep instructions for the workshop -- and in the off-chance that you do consider this an issue, and want to modify the configuration file or the instructions for future workshops.
Getting things to run as expected, without changing to v6.x
:
// webpack.config.js
const {resolve} = require('path')
// becomes...
const resolve = require('path').resolve
Looking forward to the workshop!
In the https://github.com/kentcdodds/es6-todomvc/blob/lesson/hashing-chunks, you demonstrate how to do hashing with chunks. However, from what I understand, you need to specify a manifest with the commons chunk plugin. Otherwise, if you change the application code, the hash for the vendor file will change too even if you make no changes to the vendor file.
This guide explains it better than I can:
http://survivejs.com/webpack/building-with-webpack/splitting-bundles/
All
.Turns out, that is because we now have two Todo
instances (one for each filter), and the one created for the Completed
filter takes presedence. Meaning we see Completed
(rather than All
) Todos.
The bug comes from the fact that onLoad
is called when switching between filters, which in turn calls updateTodo
, which in turn creates a new Todo
instance each time, and a copy of all state. It also re-registers all event handlers, which will render according to their own state.
Fix: Change src/todo.js
, line 27 to todo = todo || new Todo('todos-vanillajs');
, so it won't create another Todo
instance, if one already exists.
I was looking into the Tree shaking with Webpack 2 lesson
, and I took into account the "presets": [["es2015", {modules: false}]]
change but when I run the npm run build:prod
is not doing the dead code elimination. The addClass function is still there. Is it necessary any extra step?
I'm using the lesson/treeshaking
branch and Node version 6.10.2
.
Just briefly looking at some of the code in this repository I see the pattern var that = this;
in a lot of places. If I'm not mistaken this can be eliminated with the use of ES6 arrow functions as they support lexical this right? If so, I'd be willing to work on a PR if that is something that would be considered.
One such example: https://github.com/kentcdodds/es6-todomvc/blob/master/src/view.js#L63 that could be made more "ES6"-like
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.