Not resolving imported dependencies

[rr326]

I'm really struggling to get Vite to properly import some compiled code from a shared library.

error in browser.

Uncaught SyntaxError: The requested module '/@fs/Users/rrosen/dev/windmap/shared_lib/dist/index.js' does not provide an export named 'restApiTest' (at Test.vue:4:29)

Note - it DOES provide that export. 

... index.js
const restApi_js_1 = require("./restApi.js");

Object.defineProperty(exports, "restApiTest", {
    enumerable: true,
    get: function() {
        return restApi_js_1.restApiTest;
    }
});

Note 2 - VScode /  intellisense  & tsc all resolve these imports properly

root_project/
    node_modules/
        windmap_shared_lib/
            dist/
                index.js
                index.d.ts
                (other files)
    frontend/
        vite.config.ts
        src/
            App.vue
                components/
                    Test.vue

I think what might be happening is that it isn't importing the linked files (like restApi.js) which actually has the source code. But it IS in the dist folder. This is all included as a node workspace. And this works for other node apps in my monorepo. Maybe because this is browser based?

I've tried a few different things in the vite.config.ts file, but nothing seems to work.

I'm at wit's end. Thanks for any tips.

[hi-ogawa]

It looks like windmap/shared_lib/dist/index.js is cjs inside monorepo, so you might need to explicitly set it to optimizeDeps.include for browsers to import it.

See https://vitejs.dev/guide/dep-pre-bundling.html#monorepos-and-linked-dependencies

However, this requires the linked dep to be exported as ESM. If not, you can add the dependency to optimizeDeps.include and build.commonjsOptions.include in your config.

[rr326]

@hi-ogawa Thanks. I've experimented with a lot of the optimizeDeps options with no success.

curernty I have the following. i tried three different paths (all at once here, and individually) just in case. No luck on any.

Any other ideas?

export default defineConfig({
    optimizeDeps: {
        include: [
            "../shared_lib/dist/*.js",
            "windmap_shared_lib",
            "windmap_shared_lib/dist/*.js",
        ]
    },
    plugins: [
        vue(),
        viteExternalsPlugin({
            "pg-hstore": "pg-hstore",
        })
    ],
    define: {
        API_SERVER_PORT: apiServerPort,
    },
})

[hi-ogawa]

I suppose you cannot provide a full reproduction, but at least sharing your "System Info" and "Used Package Manager" would help like we require in https://github.com/vitejs/vite/issues/new?assignees=&labels=pending+triage&projects=&template=bug_report.yml
Also, how do root_project/package.json and root_project/frontend/package.json look like?

[rr326]

@hi-ogawa I wound re-creating a repo from scratch and got it to work, and used it to debug my existing repo. It was a bunch of configurations that all needed to work together.

I've cleaned up that repo here: https://github.com/rr326/testvite

I don't know if it would be useful to expose this repo somewhere in vite-land where other people with similar problems might find it. For a beginner, like me, you really need to understand the interaction of several configuration options in package.json, tsconfig.json, and vite - in multiple folders. Tricky.

Thanks for your help.