Failed to import vuejs library

Question

I am making a tiny vuejs library to learn how to create it. Let us call it swing, and so the file is structured.

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

I moved this library to github and published it before npm. I installed it in my application using

 npm install --save vuejs-swing 

I see that it is installed in the package.json and node_modules , but when I do this:

 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 

Obviously, it is not insured, so the configuration problem should be

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 award to those who can provide the tools, configs necessary for publishing the package in npm, and will be able to impress / use it.

Answer 1

Follow these steps:

• Make sure your output folder is not ignored by git (should not be in the .gitignore file)
• Build your production package (run Webpack)
• In package.json specify the main file ./output/index.min.js and NOT on ./src/swing.js

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

Do not force users of the package to create sources (run Webpack) for you, you need to point them to a pre-packaged javascript file.

As a side note, the vuejs-swing package is not published publicly on npm as it is now. I do not know if you changed the package name or worked in a private repository.