Skip to content
This repository was archived by the owner on Feb 24, 2023. It is now read-only.
This repository was archived by the owner on Feb 24, 2023. It is now read-only.

Vue & Vite: lodash modules have no default #237

Open
@HerrHansen

Description

@HerrHansen

Setup
vue: "^3.2.25"
with vite

  1. I installed "vue-agile": "^2.0.0" via npm i vue-agile
  2. I initialized it in main.js
  3. I get fatal error in console, app won't load

Error in console

settings.js:5 Uncaught SyntaxError: The requested module '/node_modules/lodash.orderby/index.js?v=e65522c4' does not provide an export named 'default'

Initialization in main.js

//main.js
... other imports
import VueAgile from 'vue-agile';

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient);
  },
  render: () => h(App),
});

app.use(VueAgile);

Expected behavior
A running app.

Screenshots
If applicable, add screenshots to help explain your problem.
Bildschirmfoto 2022-03-04 um 10 16 37

Solution
It is a vite issue.

Found a solution here: nuxt/vite#56

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3001,
  },
  optimizeDeps: {
    include: [
      'lodash.throttle' // if it is inlcuded here, error is gone 🐓
    ]
  },
  ...
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions