[v0.8.x]: cannot import in complex webpack-based workflows

[tagliala]

Hello,

I already have a PR for this, but I'm opening an issue for tracking purposes

After upgrading to v0.8.1, I was receiving an error related to a "missing export of .".

Since it is time consuming to provide a reproducible test case, I can point to some of the most recent issues related to the addition of exports to package.json:

• Choices-js/Choices#1184
• Choices-js/Choices#1184 (comment)

Ref: https://webpack.js.org/guides/package-exports/

I will submit a PR

[frustak]

Hello, I encountered an issue while using the "frappe-gantt" package with Vite. The error message I received was:

[ERROR] Failed to resolve entry for package "frappe-gantt". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." specifier in "frappe-gantt" package [plugin vite:dep-scan]

To resolve this, I modified the "exports" section in the package.json like this:

"exports": {
    ".": {
        "require": "./dist/frappe-gantt.umd.js",
        "import": "./dist/frappe-gantt.umd.js"
    }
}

This change seems to have solved the issue! However, I'm not sure if this is related to this issue or not.

[tagliala]

"import": "./dist/frappe-gantt.umd.js"

Isn't supposed to be the es module file, as in #441?

I'm not sure if this is related to this issue or not.

I'm confident it is, but I'm not a javascript developer

[frustak]

You're right, both options seem to work, and using the es module feels more appropriate in this context.

[tagliala]

@frustak can you please check if "frappe-gantt": "tagliala/gantt#chore/import-directive-webpack" works out of the box for you? I'll then remove the draft status on the PR

[frustak]

Yes, it works out of the box for me.

[a-h]

Is there a workaround for this until the PR is merged?

[tagliala]

Did you try my fork?

#439 (comment)

[a-h]

I wasn't sure how to do that. I can't see an NPM package for it, and wasn't sure how npm.lock files etc. would work.

I was hoping there would be a way to tell vite to use the other import mechanism.

[tagliala]

I wasn't sure how to do that. I can't see an NPM package for it, and wasn't sure how npm.lock files etc. would work.

Should be possible in this way:

In package.json

-  "frappe-gantt": "^0.8.0"
+  "frappe-gantt": "tagliala/gantt#chore/import-directive-webpack"

or, according to your package manager

npm add choices.js@tagliala/gantt#chore/import-directive-webpack

I don't know if there are ways in the host application package.json to override export directives.

Maybe imports?

https://nodejs.org/api/packages.html#subpath-imports

[a-h]

Thanks for your help. Adding a resolve section to my vite.config.ts also seemed to work:

  resolve: {
    alias: {
      'frappe-gantt': 'node_modules/frappe-gantt/dist/frappe-gantt.es.js',
    },
  },

With this in place, I can tell it to bypass the package.json and load the es directly. For the CSS, I could copy the CSS from the dist directory, and add import './frappe-gantt.css' to the app/root.tsx.

This seems to have the same effect as your fork.

[safwansamsudeen]

Thanks for your feedback here folks!