Vite production build > Mappersmith is not a function

[mv-ics]

Hi everybody!

Thanks for the great project. I really love it, it solves a huge problem and works beautifully with Vue3 + Pinia.

While building for production, I run into a strange error. I don't understand what's wrong here, maybe somebody has seen this? When building in dev mode, all is fine. When building for production, I get TypeError: mappersmith is not a function. This is really fun, I already lost a lot of time on this.

Im am building with Vite (2.9) + VueJS (v3), for the build setup I started with a starter provided by the Vue CLI. So basic setup with typescript and all the default stuff, nothing fancy. Mappersmith is imported using

import forge, { configs } from 'mappersmith'

I need the configs to later set Fetch as the default gateway and configure it to use credentials on cross site requests. But actually not changing the default gateway doesn't change anything.

Also I already tried to build with a manual chunk for mappersmith, that also doesn't change anything.

Any ideas? I cant figure out what I'm missing here.

EDIT: Some more details. I'm really insecure who is to blame here, I'd suspect it's either the Vite configuration or the Typescript configuration. So for reference:

My tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "skipLibCheck": true
  },
  "references": [
    {
      "path": "./tsconfig.vite-config.json"
    }
  ]
}

And the tsconfig.vite-config.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["vite.config.*"],
  "compilerOptions": {
    "composite": true,
    "target": "ES2016",
    "module": "ES6",
    "moduleResolution": "Node",
    "importHelpers": true,
    "isolatedModules": true
  }
}

and finally the vite.config.ts

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  build: {
    target: 'es2016',
  },
})

Thanks for your help!

[mv-ics]

Maybe another thing: During the build mappersmith pops up, also in the final build there is a var mappersmith=, so I'd assume it probably is some issue with vite rather than the compiling itself.

[mv-ics]

Ok, after fiddling around some more, it looks like it's the default import that somehow breaks.

I switched to:

import { configs } from 'mappersmith'
import forge from 'mappersmith/mappersmith'

This works for me as I change the defaultGateway to Fetch anyway. As the default import wrapper is quite small, I don't see any reason why it should break. But anyway, here is a fix in case somebody else runs into this. Leaving this open in case somebody wants to investigate further, feel free to close. :-)

[klippx]

Hello! We really appreciate the kind words ❤️

I am sorry but we do not have any expertise in either Vite or Vue but we have changed stuff recently while moving to TS and how types are exported. In which version of mappersmith did you start seeing this issue?

[slavnycoder]

Yes, this problem still occurres.

import { configs } from 'mappersmith'
import forge from 'mappersmith/mappersmith'

this code solves it.