V-calendar: "export 'default' (imported as 'VCalendar') was not found in 'v-calendar'

[shockie]

Hi,

I was upgrading my code from 0.9.7 to 1.0.1 and as soon as I get on the 1.0.x version, the default importing as a Vue plugin stops working.

Simplified code:

import Vue from 'vue'
import VCalendar from 'v-calendar'
Vue.use(VCalendar)

As soon as I try to import v-calendar webpack will throw the error: "export 'default' (imported as 'VCalendar') was not found in 'v-calendar'

It will also error out if I try to import named exports like import { setupCalendar} from 'v-calendar

[JonathanWexler]

Looks like the default export change between these version from:
export default VCalendar;
https://github.com/nathanreyes/v-calendar/blob/v0.9.6/src/lib.js#L32

to:

export default function install
https://github.com/nathanreyes/v-calendar/blob/master/src/lib.js#L15

I'm going to stay with v0.9.7 for now

[2Seok0]

hi..
I have the same problem.

how to downgrade v-calendar ??

my version : "v-calendar": "^1.0.1"

I want to downgrade to v0.9.7

[2Seok0]

Succeeded.
thank you

[martijnfeld]

I've had the same issue. The problem was solved when I removed this plugin from the transpiledependencies list in the vue config. I've had it listed there because of issue #303 . Haven't tested in IE yet.

[neontuna]

For folks struggling with this, I'm able to use 1.0.0 beta 22. Be sure your version is set to 1.0.0-beta.22 and not ^1.0.0-beta.22 as 1.0.1 seems to introduce this issue and will install as the latest minor version.

[tchret]

@neontuna yes! thanks

[unikitty37]

The code given in the installation instructions works for me with a new app created with vue create appname, but it fails with the above error when creating an app with rails new appname --webpack=vue, so it seems that something is now not compatible with the way Rails loads things.

Unfortunately, I need to use this in a Rails app.

Does anyone have a hint as to where I can look? My babel.config.js is below — is there something that v-calendar needs that I'm missing?

module.exports = function(api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.'
    )
  }

  return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]
    ].filter(Boolean),
    plugins: [
      'babel-plugin-macros',
      '@babel/plugin-syntax-dynamic-import',
      isTestEnv && 'babel-plugin-dynamic-import-node',
      '@babel/plugin-transform-destructuring',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true
        }
      ],
      [
        '@babel/plugin-proposal-object-rest-spread',
        {
          useBuiltIns: true
        }
      ],
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false,
          regenerator: true,
          corejs: false
        }
      ],
      [
        '@babel/plugin-transform-regenerator',
        {
          async: false
        }
      ],
    ].filter(Boolean)
  }
}

[nathanreyes]

Would anyone be able to try 1.0.7-beta.0 to see if this remedies the issue?

[unikitty37]

Still not working, I'm afraid:

import VCalendar from 'v-calendar'

Vue.use(VCalendar, {
  locale: 'en-GB',
  firstDayOfWeek: 2,
  popover: { placement: 'right' },
})

gives

ERROR in ./app/javascript/packs/application.js 198:8-17
"export 'default' (imported as 'VCalendar') was not found in 'v-calendar'
    at HarmonyImportSpecifierDependency._getErrors (/usr/local/docker-src/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
    at HarmonyImportSpecifierDependency.getErrors (/usr/local/docker-src/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (/usr/local/docker-src/project/node_modules/webpack/lib/Compilation.js:1463:22)
    at hooks.finishModules.callAsync.err (/usr/local/docker-src/project/node_modules/webpack/lib/Compilation.js:1258:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/usr/local/docker-src/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
    at AsyncSeriesHook.lazyCompileHook (/usr/local/docker-src/project/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (/usr/local/docker-src/project/node_modules/webpack/lib/Compilation.js:1253:28)
    at hooks.make.callAsync.err (/usr/local/docker-src/project/node_modules/webpack/lib/Compiler.js:672:17)
    at _done (eval at create (/usr/local/docker-src/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at _err0 (eval at create (/usr/local/docker-src/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:20:22)
    at _addModuleChain (/usr/local/docker-src/project/node_modules/webpack/lib/Compilation.js:1185:12)
    at processModuleDependencies.err (/usr/local/docker-src/project/node_modules/webpack/lib/Compilation.js:1097:9)
    at processTicksAndRejections (internal/process/task_queues.js:79:9)

Trying separate imports

import Calendar from 'v-calendar/lib/components/calendar.umd'
import DatePicker from 'v-calendar/lib/components/date-picker.umd'

document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: '[data-behaviour="vue"]',
    name: 'project',
    components: {
      Calendar,
      DatePicker,
      …

produces similar:

ERROR in ./app/javascript/packs/application.js 264:18-28
"export 'default' (imported as 'DatePicker') was not found in 'v-calendar/lib/components/date-picker.umd'
    at HarmonyImportSpecifierDependency._getErrors (/usr/local/docker-src/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
    at HarmonyImportSpecifierDependency.getErrors (/usr/local/docker-src/project/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (/usr/local/docker-src/project/node_modules/webpack/lib/Compilation.js:1463:22)
    at hooks.finishModules.callAsync.err (/usr/local/docker-src/project/node_modules/webpack/lib/Compilation.js:1258:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/usr/local/docker-src/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
    at AsyncSeriesHook.lazyCompileHook (/usr/local/docker-src/project/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (/usr/local/docker-src/project/node_modules/webpack/lib/Compilation.js:1253:28)
    at hooks.make.callAsync.err (/usr/local/docker-src/project/node_modules/webpack/lib/Compiler.js:672:17)
    at _done (eval at create (/usr/local/docker-src/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at _err1 (eval at create (/usr/local/docker-src/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:32:22)
    at _addModuleChain (/usr/local/docker-src/project/node_modules/webpack/lib/Compilation.js:1185:12)
    at processModuleDependencies.err (/usr/local/docker-src/project/node_modules/webpack/lib/Compilation.js:1097:9)
    at processTicksAndRejections (internal/process/task_queues.js:79:9)

Webpack version is 4.43.0, brought in by this:

"@rails/[email protected]":
  version "5.1.1"
  resolved "https://registry.yarnpkg.com/@rails/webpacker/-/webpacker-5.1.1.tgz#3c937aa719e46341f037a3f37349ef58085950df"
  integrity sha512-ho5Stv9naZgG4HbHNFPqbA1OLPJyj6QXfgAc7VGCu4kkMe/RnVFLoLJFW6TZ9wYelKodBjRA2tKKiCaugv0sZw==
  dependencies:
    "@babel/core" "^7.9.0"
    "@babel/plugin-proposal-class-properties" "^7.8.3"
    "@babel/plugin-proposal-object-rest-spread" "^7.9.0"
    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
    "@babel/plugin-transform-destructuring" "^7.8.8"
    "@babel/plugin-transform-regenerator" "^7.8.7"
    "@babel/plugin-transform-runtime" "^7.9.0"
    "@babel/preset-env" "^7.9.0"
    "@babel/runtime" "^7.9.2"
    babel-loader "^8.1.0"
    babel-plugin-dynamic-import-node "^2.3.0"
    babel-plugin-macros "^2.8.0"
    case-sensitive-paths-webpack-plugin "^2.3.0"
    compression-webpack-plugin "^3.1.0"
    core-js "^3.6.4"
    css-loader "^3.4.2"
    file-loader "^6.0.0"
    flatted "^2.0.1"
    glob "^7.1.6"
    js-yaml "^3.13.1"
    mini-css-extract-plugin "^0.9.0"
    node-sass "^4.13.1"
    optimize-css-assets-webpack-plugin "^5.0.3"
    path-complete-extname "^1.0.0"
    pnp-webpack-plugin "^1.6.4"
    postcss-flexbugs-fixes "^4.2.0"
    postcss-import "^12.0.1"
    postcss-loader "^3.0.0"
    postcss-preset-env "^6.7.0"
    postcss-safe-parser "^4.0.2"
    regenerator-runtime "^0.13.5"
    sass-loader "^8.0.2"
    style-loader "^1.1.3"
    terser-webpack-plugin "^2.3.5"
    webpack "^4.42.1"
    webpack-assets-manifest "^3.1.1"
    webpack-cli "^3.3.11"
    webpack-sources "^1.4.3"

[gregoryfm]

Hi @unikitty37 did you sort this out? I'm also using rails and vue

[unikitty37]

Afraid not — I've switched the project to use Buefy rather than just importing Bulma manually, so I'm using Buefy's calendar component now.

[gregoryfm]

Okay, I'll try another alternative as well. Thanks

[unikitty37]

Having said that — I've just run into some limitations with Buefy's calendar component, so I've installed v-calendar, and it now works ¯\_(ツ)_/¯

When I say "I've switched the project to use Buefy", though, part of that was switching from the all-in-one Rails app (rails new appname --webpack=vue) to a separate Rails backend and Vue frontend (vue create appname) — so nothing I hadn't already noted in https://github.com/nathanreyes/v-calendar/issues/505#issuecomment-623123275. It must be something to do with the way Rails loads things, but I'm afraid I can't come up with anything more helpful 🙁

[gregoryfm]

Here's an all-in-one project too. In the end we switched to using vue2-datepicker and that helped us with more features, like week switch.

Thanks.