ccoenraets / es6-tutorial

ECMAScript 6 Tutorial

ES6 Tutorial

Start the tutorial here.

es6-tutorial's Issues

running npm install babel-core babel-loader babel-present-es2015 babel-present-react --save-dev reports an error404

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/babel-present-es2015 - Not found
npm ERR! 404
npm ERR! 404 'babel-present-es2015@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\TANYA RAWAL\AppData\Roaming\npm-cache_logs\2021-03-22T10_45_52_900Z-debug.log

This is the error i am facing. Can i get this error resolved?

Destructuring: defining mortgage

On Step 2, I don't understand where mortgage gets defined. Following the directions and copy/pasting the code exactly as is produces the following error in console:

Cannot read property 'toFixed' of undefined

It's on line 23 of main.bundle.js, which makes sense because we haven't defined mortgage yet.

What am I missing here?

Using modules

In the lesson using modules I get the error : 'import declarations may only appear at top level of module'. If I add the type = "module" to the script tag in the index file, the error doesn't show anymore but the script doesn't work anymore either. What's goin' on ??? ThX for a quick answer ! Yel

Instruction in Unit 2, part 1 needs to be more specific

In Unit 2, part 1, the user is instructed to "...replace all the occurrences of var with let. Don't change anything else yet." The user should be instructed to change every occurence of var, except the one on line 1 (declaration of calculateMonthlyPayment). Changing the 'var' on line 1 to 'let' will actually allow the application to work and will not trigger the monthlyRate ReferenceError in step 6.

Missing amortization table element

This is not an issue with the repository itself, but with the copy & paste code in the tutorial.

In the Using Classes section in step 4. Modify the calcBtn click event handler as follows:

The line document.getElementById("amortization").innerHTML = html; is referencing an element that is nonexistent.

Uncaught TypeError: Cannot set property 'innerHTML' of null

Adding a table#amortization element after the Monthly Rate header will fix it.

<h3>Monthly Rate: <span id="monthlyRate"></span></h3>
<table id="amortization"></table>

404 issue when uploading to GitHub Pages, due to error in node modules (maybe add node_modules to .gitignore file?)

When I try to upload the project to GitHub Pages, I get a 404 error when loading the index file, followed by an email from GitHub:

The page build failed for the master branch with the following error:
The variable {{a} on line 50 in node_modules/balanced-match/README.md was not properly closed with }}. For more information, see https://help.github.com/articles/page-build-failed-tag-not-properly-terminated/.
For information on troubleshooting Jekyll see:
https://help.github.com/articles/troubleshooting-jekyll-builds
If you have any questions you can contact us by replying to this email

I managed to fix this error after reading up on the following links. This is a common problem with Jekyll:
juliangruber/balanced-match#22
EarthlingInteractive/aframe-geo-projection-component@f06ab2e

I fixed the error by changing the .gitignore file to the following, (BEFORE uploading it as a new repository to GitHub):

node_modules/*
.idea/

may I suggest changing the .gitignore file, or to highlight this issue in the ES6-Tutorial instructions, incase someone else wants to upload it to GitHub pages.
edit: If the repository is already uploaded with node_modules you could untrack node_modules with the following git command at the repository folder:
git rm --cached node_modules -r

Babel 6 expects user to specify es2015 preset

Hey, I was following your tutorial and on step 3 about object destructuring, I kept getting an unexpected token error from the line let {monthlyPayment, monthlyRate} = calculateMonthlyPayment(principal, years, rate);

Figured out that Babel 6 wasn't transpiling es2015 by default. Fixed it by adding a .babelrc file, reference:

{
  "presets": ["es2015"]
}

Thanks for making this, it's been helpful.

npm run webpack throwing Option validation error

Following the tutorial @ http://ccoenraets.github.io/es6-tutorial/setup-webpack/, I'm getting an error when trying to run webpack.

ValidationError: config-loader

Options Validation Error

options.module should match some schema in anyOf
options.module['loaders'] is an invalid additional property

Not sure where to start with debugging this.

Running `npm install babel-preset-es-2015 --save-dev` returns a 404 error

In Step 2: Set Up Babel, part 4 'Type the following command to install the ECMAScript 2015 preset', running npm install babel-preset-es-2015 --save-dev returns a 404 error.

Full log:

1 verbose cli [ '/usr/bin/node',
1 verbose cli   '/usr/bin/npm',
1 verbose cli   'install',
1 verbose cli   'babel-preset-es-2015',
1 verbose cli   '--save-dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose npm-session dfa4b96f0b1a06e9
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 http fetch GET 404 https://registry.npmjs.org/babel-preset-es-2015 4494ms
8 silly fetchPackageMetaData error for babel-preset-es-2015@latest 404 Not Found: babel-preset-es-2015@latest
9 verbose stack Error: 404 Not Found: babel-preset-es-2015@latest
9 verbose stack     at fetch.then.res (/usr/lib/node_modules/npm/node_modules/pacote/lib/fetchers/registry/fetch.js:42:19)
9 verbose stack     at tryCatcher (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23)
9 verbose stack     at Promise._settlePromiseFromHandler (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:512:31)
9 verbose stack     at Promise._settlePromise (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:569:18)
9 verbose stack     at Promise._settlePromise0 (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:614:10)
9 verbose stack     at Promise._settlePromises (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:693:18)
9 verbose stack     at Async._drainQueue (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:133:16)
9 verbose stack     at Async._drainQueues (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:143:10)
9 verbose stack     at Immediate.Async.drainQueues [as _onImmediate] (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:17:14)
9 verbose stack     at runCallback (timers.js:756:18)
9 verbose stack     at tryOnImmediate (timers.js:717:5)
9 verbose stack     at processImmediate [as _immediateCallback] (timers.js:697:5)
10 verbose cwd /home/user/es6-tutorial
11 verbose Linux 4.14.14-1-MANJARO
12 verbose argv "/usr/bin/node" "/usr/bin/npm" "install" "babel-preset-es-2015" "--save-dev"
13 verbose node v9.4.0
14 verbose npm  v5.6.0
15 error code E404
16 error 404 Not Found: babel-preset-es-2015@latest
17 verbose exit [ 1, true ]
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node',
1 verbose cli   '/usr/bin/npm',
1 verbose cli   'install',
1 verbose cli   'babel-preset-es-2015',
1 verbose cli   '--save-dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose npm-session dfa4b96f0b1a06e9
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 http fetch GET 404 https://registry.npmjs.org/babel-preset-es-2015 4494ms
8 silly fetchPackageMetaData error for babel-preset-es-2015@latest 404 Not Found: babel-preset-es-2015@latest
9 verbose stack Error: 404 Not Found: babel-preset-es-2015@latest
9 verbose stack     at fetch.then.res (/usr/lib/node_modules/npm/node_modules/pacote/lib/fetchers/registry/fetch.js:42:19)
9 verbose stack     at tryCatcher (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23)
9 verbose stack     at Promise._settlePromiseFromHandler (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:512:31)
9 verbose stack     at Promise._settlePromise (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:569:18)
9 verbose stack     at Promise._settlePromise0 (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:614:10)
9 verbose stack     at Promise._settlePromises (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:693:18)
9 verbose stack     at Async._drainQueue (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:133:16)
9 verbose stack     at Async._drainQueues (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:143:10)
9 verbose stack     at Immediate.Async.drainQueues [as _onImmediate] (/usr/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:17:14)
9 verbose stack     at runCallback (timers.js:756:18)
9 verbose stack     at tryOnImmediate (timers.js:717:5)
9 verbose stack     at processImmediate [as _immediateCallback] (timers.js:697:5)
10 verbose cwd /home/user/es6-tutorial
11 verbose Linux 4.14.14-1-MANJARO
12 verbose argv "/usr/bin/node" "/usr/bin/npm" "install" "babel-preset-es-2015" "--save-dev"
13 verbose node v9.4.0
14 verbose npm  v5.6.0
15 error code E404
16 error 404 Not Found: babel-preset-es-2015@latest
17 verbose exit [ 1, true ]

I read in the Google search that I did using the error fetchPackageMetaData error for babel-preset-es2015@latest 404 Not Found: babel-preset-es-2015@latest that the present equivalent of babel-preset-es-2015 is babel-preset-env, which was initially preceded by babel-preset-latest and is recommended when you run npm install babel-preset-latest --save-dev.

So I've installed babel-preset-env as follows:
npm install babel-preset-env --save-dev

As a result, adding the code below to package.json means that running npm run babel returns an error as shown in the log further down. If possible it would be great to get some assistance as to how to adapt the code below to work with babel-preset-env.

    "babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
    "start": "http-server"
},

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'babel' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebabel', 'babel', 'postbabel' ]
5 info lifecycle [email protected]~prebabel: [email protected]
6 info lifecycle [email protected]~babel: [email protected]
7 verbose lifecycle [email protected]~babel: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~babel: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/user/es6-tutorial/node_modules/.bin:/home/user/.cargo/bin:/usr/local/sbin:/usr/local/bin:/usr/bin:/opt/adobe-air-sdk/bin:/usr/lib/jvm/default/bin:/usr/bin/site_perl:/usr/bin/vendor_perl:/usr/bin/core_perl
9 verbose lifecycle [email protected]~babel: CWD: /home/user/es6-tutorial
10 silly lifecycle [email protected]~babel: Args: [ '-c',
10 silly lifecycle   'babel --presets es2015 js/main.js -o build/main.bundle.js' ]
11 silly lifecycle [email protected]~babel: Returned: code: 1  signal: null
12 info lifecycle [email protected]~babel: Failed to exec babel script
13 verbose stack Error: [email protected] babel: `babel --presets es2015 js/main.js -o build/main.bundle.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)
13 verbose stack     at EventEmitter.emit (events.js:160:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:160:13)
13 verbose stack     at maybeClose (internal/child_process.js:943:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/user/es6-tutorial
16 verbose Linux 4.14.14-1-MANJARO
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "babel"
18 verbose node v9.4.0
19 verbose npm  v5.6.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] babel: `babel --presets es2015 js/main.js -o build/main.bundle.js`
22 error Exit status 1
23 error Failed at the [email protected] babel script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]