Why "main" in Package.json is "src/index.js" and not "dist/vue-chartjs.js"

[Shaharking]

Hey,
I had problem my app didn't work because my webpack didn't compile the libary in node_modules,
by changing your Package.json main property value from "src/index.js" to "dist/vue-chartjs.js"
it started back to work.

My question why you would do something like this?

[apertureless]

Hello @Shaharking

• What error did got thrown? I tested it with webpack and had no problems.
• What version of vue are you running?
• What version of webpack are you running?
• Have you tried to delete your node modules folder and npm install again?

Well I changed the entry point to src/index.js related to #49

The dist file, is a bundled file, where chart.js and vue.js got bundled into a module. Which also caused sometimes errors, because vue-chartjs would run into it own vue.js instance.

So you would basically have two versions of vue running, the one which is bundled into the dist file and the one you are running locally. And because most people would use vue-chart.js rather in a build system, like webpack, browserify etc. you would bundle the file by yourself.

The dist file, actually would be only usefull, if you would load it directly in your browser.

[Shaharking]

-The error that got thrown was:
"Unexpected token import"
-Using vue 2.1
-webpack 1.14.0
-Yes

How do i make webpack compile the src files before importing them?

[apertureless]

Do you have a webpack config generated by vue-cli or a custom one?
Can you post you webpack config?

The problem seems to be related to you loaders.

[Shaharking]

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')

var env = process.env.NODE_ENV
// check env & config/index.js to decide whether to enable CSS source maps for the
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.vue', '.json'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }
  },
  resolveLoader: {
    fallback: [path.join(__dirname, '../node_modules')]
  },
  module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: [
          path.join(projectRoot, 'src')
        ],
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: [
          path.join(projectRoot, 'src')
        ],
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: [
          path.join(projectRoot, 'src')
        ],
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  eslint: {
    formatter: require('eslint-friendly-formatter')
  },
  vue: {
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
    postcss: [
      require('autoprefixer')({
        browsers: ['last 2 versions']
      })
    ]
  }
}
`
`
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrors = require('friendly-errors-webpack-plugin')

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

module.exports = merge(baseWebpackConfig, {
  module: {
    loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  // eval-source-map is faster for development
  devtool: '#eval-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new FriendlyErrors()
  ]
})

[apertureless]

Can you post your package.json ? So I can see which babel version you got etc. ?

It may be nessasary that you add babel-presets to your config and maybe include the node_modules folder. I think in webpack 2 they are not excluded anymore. That may be the reason why I had no problems with the current vue-cli webpack config.

Temporary fix would be to import from the dist import {Line} from 'vue-chartjs/dist/vue-chartjs' or set an alias you you do for vue.

[Shaharking]

packages.json

{
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src"
  },
  "dependencies": {
    "bluebird": "^3.4.7",
    "moment": "^2.17.1",
    "truncate": "^2.0.0",
    "vue": "^2.1.0",
    "vue-chartjs": "^2.3.3",
    "vue-material": "^0.6.3",
    "vue-router": "^2.1.3",
    "vuejs-datepicker": "^0.6.0",
    "whatwg-fetch": "^2.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.25.0",
    "eslint": "^3.7.1",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-html": "^1.3.0",
    "eslint-config-standard": "^6.1.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "friendly-errors-webpack-plugin": "^1.1.2",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "json-loader": "^0.5.4",
    "semver": "^5.3.0",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "shelljs": "^0.7.4",
    "url-loader": "^0.5.7",
    "vue-loader": "^10.0.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  }
}

.babelrc

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "plugins": [ "istanbul" ]
    }
  }
}

[apertureless]

Seems that only webpack 2 has native es6 module support. It looks like that for webpack 1 you need a commonjs build. However I am not a webpack pro 🙈

So I would guess, you should go with the alias method and create an alias to the bundled dist file.

Unless you find a better workaround.

btw. I guess you have node 6 +?

[apertureless]

It's fixed with [email protected]

There is a fallback to the umd module for older build system.
And for webpack 2 and rollup there is an es version.

However if you encounter problems with two vue instances, you can directly import the es version of use an alias.

import {Line} from `vue-chartjs/es`