Waypoint npm - Error: Can't resolve 'waypoint

Question

I have a vue project and installed waypoints

npm install waypoints

I try to import it

import waypoint from 'waypoints';

but get an error

Error: Can't resolve 'waypoints' in /Mypath

What am I doing wrong?

var webpack = require('webpack');
var path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
var WebpackNotifierPlugin = require('webpack-notifier');
var fs = require('file-system');
var CleanWebpackPlugin = require('clean-webpack-plugin');


module.exports = {
/*node: {
  fs: "empty"
},*/
    resolve: {
    alias: {
      'masonry': 'masonry-layout',
      'isotope': 'isotope-layout'
    }
  },

    entry: './main.js',
    devtool: 'source-map',
    output: {
        path: path.resolve(__dirname, './public/assets'),
        filename: 'bundle.[chunkhash].js',
    },

    module: {
        rules: [

         {  test: /\.js$/, 
                exclude: /node_modules/, 
                loader: "babel-loader?presets[]=es2015",

             },

            {
                test:/\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: [{loader:'css-loader?sourceMap'}, {loader:'sass-loader', options: {
                    sourceMap: true,

                }}],

                })
            },   



            {
                 test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },



        ]
    },  

    plugins: [
new CleanWebpackPlugin(['assets/*', 'css/*'], {
            root: '/Users/LEITH/sites/laravelleith/public',
            verbose: true,
            dry: false,
            exclude: ['360lockturret.jpg'],
            watch: true
    }),

        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin('app.[chunkhash].css'),
        new WebpackNotifierPlugin(),

        function() {
            this.plugin('done', stats =>{
                fs.writeFileSync(
                    path.join(__dirname, 'manifest.json'),
                    JSON.stringify(stats.toJson().assetsByChunkName)
                )

            });
        }

    ]

};

Dew

Are you using Babel and Webpack? – Gunlock

I am using webpack – Dew

Can I see your config? – Gunlock

You actually should use this github.com/scaccogatto/vue-waypoint ? – Crestfallen

Answer 1

Waypoints comes bundled in several flavours, even via NPM, but I couldn't work out if there's a default implementation or not. So that's why your typical import Waypoint from 'waypoints' directive doesn't work.

I resolved this for my "vanilla ES6 + Webpack" setup as follows:

import 'waypoints/lib/noframework.waypoints.min.js';

const waypoint = new Waypoint({
  element: document.getElementById('myScrollTarget'),
  handler: () => {}
});

Bonne

Answer 2

Basically @markedup is right, waypoints comes with various flavours, after installing waypoints if you look into /waypoints/lib/ folder you will see zepto|jquery|noframework.waypoints.js .

In this case you would require to import it as full path i.e.

import 'waypoints/lib/noframework.waypoints.min.js';

or

window.waypoint = require('waypoints/lib/noframework.waypoints');

Passmore