CODEWITHSUNDEEP
webpack
user1503606
user1503606

Reputation: 4290

Webpack can't import certain npm libraries

I am switching my whole setup over from grunt to webpack, I previous included libraries in my grunt file like this.

https://www.npmjs.com/package/counterup

module.exports = function(grunt) {

  grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      watch: {
          scripts: {
              files: ['js/*.js'],
              tasks: ['concat:dist1', 'uglify:dist2min']
          },
      },
      concat: {
          options: {
              separator: '\n',
              sourceMap: true
          },
          dist1: { 
              src: [
                  'node_modules/counterup/jquery.counterup.js',
              ],
              dest: 'dist/dist.js'
          },
      },
      uglify: {
          dist2min: {
              options: {
                  mangle: false,
                  drop_console: false
              },
              files: {
                  'dist/bundle.min.js': ['dist/bundle.js']
              }
          }
      },
  });

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.registerTask('default', ['watch', 'concat:dist1', 'concat:dist2', 'uglify:dist2min', 'cssmin:dist3min']);

};

This worked fine I just included the code in my document and could work with it.

I am new to webpack and I am trying the following with an import statement.

import $ from 'jquery';
import 'counterup'; 

$(document).ready(function() {

    $('.counter').counterUp({
    delay: 10,
    time: 1000
});

});

I get

You may need an appropriate loader to handle this file type.

I have watched a few different tutorials and can't figure out what I am doing wrong I have also tried a few different countup libraries all with the same results.

Can someone tell me where I am going wrong?

Thanks

Upvotes: 0

Views: 308

Answers (1)

Cuong Vu
Cuong Vu

Reputation: 3723

I'm not sure what's wrong, but the countUp jQuery plugin is too old, and was not updated for so long.
You can use countUp.js instead. Here is the working example of countUp.js with Webpack 4. webpack.config.js

const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const CleanPlugin = require('clean-webpack-plugin');
module.exports = {
  mode: 'production',
  entry: {
    app: './src/index.js',
  },
  output: {
    filename: '[name].[hash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CleanPlugin(['./dist']),
    new HtmlPlugin({
      title: 'test',
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
};

src/index.js

import CountUp from 'countup.js';
$('body').html('<span id="counter">1,234,567.00</span>');
var numAnim = new CountUp('counter', 24.02, 99.99);
if (!numAnim.error) {
  numAnim.start();
} else {
  console.error(numAnim.error);
}

Upvotes: 1

Related Questions