0

I'm fairly new to React, Vite and Bootstrap, so I'm trying to get a basic app set up.

I essentially followed a mix of these tutorials:

I was able to succesfully make some of my own components and import react-bootstrap components into them. The Header component I made (see Header.jsx below) works great.

However, whenever I try to import other react-bootstrap components to use, for example:

import Form from 'react-bootstrap/Accordion';

I get this error:

[plugin:vite:import-analysis] Failed to resolve import "react-bootstrap/Accordion" from "src/components/Header.jsx". Does the file exist?

I'm confused because I don't know what could be different about the syntax, and I can find a package.json file under the node_modules/react-bootstrap/Accordion folder (see below).

enter image description here

Below is also my package.json file.

Header.jsx file

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import Image from 'react-bootstrap/Image';


function Header() {
  return (
    <Navbar fixed ="top" expand="lg" className="navbar-lightnavbar-custom bg-body-tertiary">
      <Container>
        <Navbar.Brand href="#home">
            <Image className ="logo d-inline-block align-top" alt="my logo" src="./src/assets/logo.png" thumbnail />
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto header-text-color">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Email</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default Header;

package.json

{
  "name": "energy-data-test-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "bootstrap": "^5.3.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.25.3",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "react-bootstrap": "^2.8.0",
    "sass": "^1.63.6",
    "vite": "^4.3.9"
  }
}

After some searching around for the error online, I think my issue has something to do with my dependencies and compatibility. Specifically, I saw this question which took me to the bootstrap/react-bootstrap compatibility table. It seems like my bootstrap v3.x and react-bootstrap v2.x versions should work together?

I tried uninstalling and reinstalling the npm packages (bootstrap and react-bootstrap), and also saving them with the --save-dev flag but that didn't seem to change anything. I also tried clearing my browser's cache, but again, no issue. It's weird to me because the components I already imported seem to continue to have no issue.

To be clear, I am not experiencing the issue described in this post-- instead, some components do import, and others do not.

Why are some components importing correctly and others are not? Could this be an issue with some of my other dependencies (e.g. eslint)?

Thank you in advance for your help!

dalbanhi
  • 1
  • Out of interest does `import Accordian from 'react-bootstrap/esm/Accordian'` work? – adsy Jun 30 '23 at 23:04
  • Edit: I meant "import Accordion from 'react-bootstrap/Accordion';" I had placed Form because I also tried it with Form, and it didn't work either. And no, @adsy, your solution didn't work either – dalbanhi Jul 01 '23 at 03:46
  • Hmm. Can you try deleting the vite cache folder in `node_modules/.vite` and reboot your dev server/rebuild? – adsy Jul 01 '23 at 12:49
  • That worked! Thank you so much! Could you explain to me (at least at a high level) what that solution sort of did or what my issue might have been so I do not repeat it? – dalbanhi Jul 01 '23 at 15:05
  • Nice! This shouldn't really happen that often. To speed up builds, Vite caches some already-built assets in this location. Theoretically, that's not a problem since Vite is supposed to know when things change that invalidate any cached copy. You've likely found some edge case around alias' such that vite didn't know it needed to clear its own cache, leaving it in an incoherent state. It has happened to me from time to time and its usually when you changed something in the vite config. – adsy Jul 04 '23 at 00:21
  • Hmm gotcha. I'll watch out for that from now on. I don't think I changed much in vite config but maybe I am misremembering. Thank you for all of your help! – dalbanhi Jul 05 '23 at 19:51

0 Answers0