Dependency Not found even defined in package.json and node_modules

Question

I use vue.js and vue-cli to create a project.

vue init webpack my-project

I am trying to create a component using http://photo-sphere-viewer.js.org/ , thus I installed it using

npm install --save photo-sphere-viewer

Then it was downloaded in node_modules and appears in the package.json under dependencies as

"photo-sphere-viewer": "^3.2.3",

And I tried to import in a component, VR-Pano.vue, inside the script tag using

import PhotoSphereViewer from 'photo-sphere-viewer';

And

var PhotoSphereViewer = require('photo-sphere-viewer');

But when I run npm run dev

This dependency was not found:

photo-sphere-viewer in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/VR-Pano.vue

I tried: npm cache clean && npm update -g

Did some researches on webpack, but didn't really know what's going on as I am not too familiar with webpack. I was expecting it to be a simple process, but I suspect something isn't setup properly for my webpack or I did something very stupid.

Here is my webpack.base.conf.js

 var path = require('path') var utils = require('./utils') var config = require('../config') var vueLoaderConfig = require('./vue-loader.conf') function resolve (dir) { return path.join(__dirname, '..', dir) } module.exports = { entry: { app: './src/main.js' }, // target: 'electron-main', output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } }, module: { rules: [ { test: /\\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } }, { test: /\\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] }, { test: /\\.(png|jpe?g|gif|svg)(\\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('[path][name].[ext]') } }, { test: /\\.(woff2?|eot|ttf|otf)(\\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] } } 

Answer 1

I took this debugging opportunity to learn more about npm and webpack.

It looks like the creators of photo-sphere-viewer did not specify where their "main" file was, the file that gets returned when you import or require . I think by default npm looks for index.js at the project root. But a lot of times, package creators put their distribution files under a dist or lib directory. The photo-sphere people did this, but did not specify the location in their package.json . The solution is to add

"main":"./dist/photo-sphere-viewer.min.js"

to the photo-sphere-viewer package.json file. Make sure to add a trailing comma if you're not putting it at the very end. Also i would recommend filing an issue on their Github, this seems like a bug..

Alternatively, you can also do

import PhotoSphereViewer from 'photo-sphere-viewer/dist/photo-sphere-viewer.min.js';