Unable to import a vuejs library

Question

I am making a tiny vuejs library just to learn how to make one. Let's call it swing and this is how the file is structured.

The conf/, dist/, test/ files are empty

I have pushed this library to github and published it to npm. I installed it into my app using

npm install --save vuejs-swing

I can see it's installed in package.json and node_modules folder, but when I do:

import swing from 'vuejs-swing'

I get this error:

 ERROR  Failed to compile with 1 errors                                                                                11:42:41 AM

This dependency was not found:

* vuejs-swing in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/c
omponents/HelloWorld.vue

To install it, you can run: npm install --save vuejs-swing

It is obviously intalled so it must be a configuration issue

This is my webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  module: {
    rules: [
      // use babel-loader for js files
      { test: /\.js$/, use: 'babel-loader' },
      // use vue-loader for .vue files
      { test: /\.vue$/, use: 'vue-loader' }
    ]
  },
  // default for pretty much every project
  context: __dirname,
  // specify your entry/main file
  entry: {
    app: './src/swing.js',
    
  },
  output: {
    // specify your output directory...
    path: path.resolve(__dirname, 'output'),
    // and filename
    filename: 'index.min.js'
  },
  resolve: {
    // this is optional, but it lets you import .vue files without the .vue extension.
    extensions: ['.js', '.json', '.vue']
  }
}



if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

EDIT:

I will award the bounty to whomever who can provide the tools, configs necessary to publish a package in npm and be able to impor/use it.

user_1133405 · Answer

Follow these steps:

Make sure your output folder is not ignored by git (shouldn't be in the .gitignore file)
Build your package for production (run Webpack)
In your package.json point the main file to ./output/index.min.js and NOT to ./src/swing.js

{
  "name": "vuejs-swing",
  "version": "0.1.2",
  "main": "./output/index.min.js",
  // ...
}

Don't except your package's users to build the sources (run Webpack) for you, you need to point them to a pre-packaged javascript file.

As a side note, the package vuejs-swing is not publicly published on npm as for now. I don't know if you changed the package name or working on a private repository.

Unable to import a vuejs library

EDIT:

1 Answers