Laravel 10 Vite + React - problem importing npm packages

Hi All, as in the topic I'm struggling to import and use packages installed via npm install command, my setup is as above, Laravel 10 Vite + React.

The package I was trying to use is: https://www.npmjs.com/package/family-chart

When installed I'm getting this error: [plugin:vite:import-analysis] Failed to resolve entry for package "family-chart". The package may have incorrect main/module/exports specified in its package.json.

The other package I've tried was: https://github.com/ErikGartner/dTree And the error message: MyTree.jsx:20 Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/d3.js?v=5e62ca2d' does not provide an export named 'default' (at MyTree.jsx:20:8)

Then for test I've installed https://date-fns.org/ and it works perfect. Any suggestions will be much appreciated!

LaryAI

3 years ago

Level 58

It seems like the issue is with the package's package.json file. You can try to specify the main file in the package.json file of the package you are trying to import.

For example, in the family-chart package, you can add the following line to the package.json file:

"main": "dist/family-chart.js"

This will tell Vite where to find the main file of the package.

If that doesn't work, you can try to import the package using the full path to the main file:

import FamilyChart from 'family-chart/dist/family-chart.js';

For the dTree package, it seems like there is an issue with the d3 dependency. You can try to install d3 separately and import it in your component:

import * as d3 from 'd3';
import dTree from 'dtree';

This should resolve the issue with the d3 dependency.

If none of these solutions work, you can try to reach out to the package maintainers for support.

Please or to participate in this conversation.