Chapter 23 Webpack Advanced - countup not working + solution

[Shaunson26]

A hoy!

I was having troubles with getting countup.js to work. I believe it had to do with 2 things: the import countup package code, and the CountUp function itself.

packer::scaffold_widget("countup") # not everything opened in RStudio, .js in VS Code
packer::bundle()
devtools::load_all()
countup("Hello widgets!") # works

Add the countup.js stuffs

packer::npm_install("countup", scope = "prod") 

# Copy counter code from book to count.js
file.create('srcjs/modules/count.js')
# + book code

# Replate import line and return code in ./srcjs/widgets/countup.js
# + import { CountUp } from 'countup.js';
# + counter(el.id, x.message);
# - import { asHeader } from '../modules/header.js';
# - el.innerHTML = asHeader(x);

packer::bundle() # Error

An npm error?

# running command '"C:\Program Files\nodejs\npm" run production' had status 1
# ...
# ERROR in ./srcjs/modules/count.js 1:0-37
# Module not found: Error: Can't resolve 'countup.js' in path\to\counter\srcjs\modules
# ...

Solution (for me)

• Need to remove curly braces and reference countup as a package name

# Update srcjs/modules/count.js
# + import CountUp from 'countup';
# - import { CountUp } from 'countup.js';

packer::bundle()

However, widget does not work (properly). countup.js reference makes be believe it should though? A single number provided will count up to that number ..

countup(12345)
# Widget result = NaN

• Use the 'to' and 'from' parameters

# Update srcjs/modules/count.js
# + var countUp = new CountUp(id, 0, value);
# - var countUp = new CountUp(id, value);

packer::bundle()
countup(12345)

Works now ...