Missing "./vue" specifier in "@dpc-sdp/ripple-ui-forms" package

gvnn-gov commented 6 months ago

Environment

Operating System: Darwin
Node Version: v20.11.0
Nuxt Version: -
CLI Version: 3.11.1
Nitro Version: -
Package Manager: npm@10.2.4
Builder: -
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

I created a vue component

<script setup lang="ts">
import { RplFormDropdown } from "@dpc-sdp/ripple-ui-forms/vue";
</script>
<template>
  <RplFormDropdown
    id="dropdown-single"
    placeholder="Select"
  ></RplFormDropdown>
</template>

Describe the bug

Following the instructions at https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-forms#usage-vue I'm trying to import RplFormDropdown

import { RplFormDropdown } from "@dpc-sdp/ripple-ui-forms/vue";

But I receive an error

Error: [commonjs--resolver] Missing "./vue" specifier in "@dpc-sdp/ripple-ui-forms" package

And looking at https://github.com/dpc-sdp/ripple-framework/blob/d0ce9e2422a07d3a4ad37e639a2fb9e7c0c3543d/packages/ripple-ui-forms/package.json it is missing the vue export, that is present in the core library for example https://github.com/dpc-sdp/ripple-framework/blob/d0ce9e2422a07d3a4ad37e639a2fb9e7c0c3543d/packages/ripple-ui-core/package.json#L20

Additional context

No response

Logs

error during build:
Error: [commonjs--resolver] Missing "./vue" specifier in "@dpc-sdp/ripple-ui-forms" package
    at e (file:///web-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:47596:25)
    at n (file:///web-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:47596:627)
    at o (file:///web-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:47596:1297)
    at resolveExportsOrImports (file:///web-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:48286:20)
    at resolveDeepImport (file:///web-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:48305:31)
    at tryNodeResolve (file:///web-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:48030:20)
    at Object.resolveId (file:///web-app/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:47780:28)
    at file:///web-app/node_modules/rollup/dist/es/shared/node-entry.js:19775:40
    at async PluginDriver.hookFirstAndGetPlugin (file:///web-app/node_modules/rollup/dist/es/shared/node-entry.js:19675:28)
    at async resolveId (file:///web-app/node_modules/rollup/dist/es/shared/node-entry.js:18356:26)

Final checks

[X] Read the contribution guide.
[X] Check existing discussions and issues.

jeffdowdle commented 6 months ago

Hi Giovanni, thanks for raising this.

The short answer is that the docs for forms are incorrect and there's currently no way to import the form components into a plain Vue app.

It was our intention to try to make these components available to use outside of the SDP platform, however we've have had to focus our efforts the main SDP/nuxt offering.

Better documentation is a current priority for us and we hope to be able to provide better support for plain Vue form components in the future. We will fix the error in the forms README and keep you updated if the forms component become available.

gvnn-gov commented 6 months ago

Thanks a lot @jeffdowdle,

After digging into the code I found an alternative, but it's a bit of a hack. I have have added a resolve path in our vite config like this:

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@dpc-sdp/ripple-ui-forms/vue": path.resolve(
                __dirname,
                "node_modules/@dpc-sdp/ripple-ui-forms/src/components",
            ),
        },
    },
});

And then created a omponents.ts file that looks like this:

export { default as RplFormDropdown } from "@dpc-sdp/ripple-ui-forms/vue/RplFormDropdown/RplFormDropdown.vue";
export { default as RplFormLabel } from "@dpc-sdp/ripple-ui-forms/vue/RplFormLabel/RplFormLabel.vue";

This is a hack, but it allows me to use the components. The real solution would be replicating what's been done in core.

jeffdowdle commented 6 months ago

Glad you found a way forward @gvnn-gov! Will let you know when we properly export these and hopefully you can remove the alias in the future.

dpc-sdp / ripple-framework