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]')
        }
      }
    ]
  }
}

Solution

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';

Comments

[Alocus]

Thank you very much for the investigation and explanation. I learnt something valuable.