[Bug]: Failed to resolve entry for package "@materializecss/materialize

[axelf]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

Hi,
i want to use materialize in a laravel / vite project.

Current Behavior

After importing the package in my app.js
import { Sidenav } from '@materializecss/materialize';

i got this message:
Failed to resolve entry for package "@materializecss/materialize". The package may have incorrect main/module/exports specified in its package.json.

Expected behavior

Import this module without error messages

Possible Solutions or Causes

No response

Steps to reproduce

No response

Your Environment

• Version used: 2.0.3
• Browser Name and version: Firefox 122
• Operating System and version (desktop or mobile): macOS Sonoma 14.2.1
• Additional information you want to tell us:

[danice]

Hello,
Materialize-docs is an example of using materialize from a vite project. Can you provide an example project to test this issue?

Thanks!

[axelf]

@danice i made i git repository: https://github.com/axelf/materialize-vite
You can downlaod the code and after a npm install and npm run dev you see the error:

[axelf]

This is working: import { M } from "@materializecss/materialize/dist/js/materialize.js";
This is the path of the main entry of the package json.
But why isimport { M } from "@materializecss/materialize"; not working?

It is working, but this says the editor if i hover over the import statement:

Could not find a declaration file for module '@materializecss/materialize/dist/js/materialize.js'. '/myproject/node_modules/@materializecss/materialize/dist/js/materialize.js' implicitly has an 'any' type. If the '@materializecss/materialize' package actually exposes this module, try adding a new declaration (.d.ts) file containing declare module '@materializecss/materialize/dist/js/materialize.js';ts(7016) module "/myproject/node_modules/@materializecss/materialize/dist/js/materialize"

[danice]

it's because the package has also this entry that takes preference in the import:
"module": "src/index.ts",

This "module" was not causing problems when importing the library using webpack and it make it work when using it as a workspace (as in materialize-docs).

I think we should replace "src/index.ts" here by the ".d.ts" that your comment says. But we should check that it keeps the library working when used from webpack and as a workspace.

[axelf]

@danice thank you for helping me out.

For now should i leave the import as it is import { M } from "@materializecss/materialize/dist/js/materialize.js and ignore the error in my code editor? I don't mind the marking in the editor and it works like this for now