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)
                )

            });
        }

    ]

};

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)
                )

            });
        }

    ]

};

• javascript
• import
• npm
• ecmascript-6
• vue.js

Share Follow edited Apr 7, 2017 at 16:31 LeBlaireau asked Apr 7, 2017 at 16:26 LeBlaireauLeBlaireau 17.5k3434 gold badges115115 silver badges197197 bronze badges 4

• Are you using Babel and Webpack? – Andrew Li Commented Apr 7, 2017 at 16:27
• I am using webpack – LeBlaireau Commented Apr 7, 2017 at 16:29
• Can I see your config? – Andrew Li Commented Apr 7, 2017 at 16:29
• You actually should use this github./scaccogatto/vue-waypoint ? – Anthony Kong Commented Apr 9, 2017 at 3:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

Waypoints es 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: () => {}
});

Basically @markedup is right, waypoints es 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');