使用react-collapsible编译失败，求助Spring+React项目前端问题

Hey there! As someone new to React, it’s totally normal to hit snags like this when working with third-party components. Let’s walk through the most common fixes for your compile failure issue:

1. Fix the Component Import Path #

Your current import targets the raw source file inside the package, which can cause compilation issues (since the package’s built files are what you should be using). Change your import line from:

import Collapsible from "react-collapsible/src/Collapsible";

To:

import Collapsible from "react-collapsible";

2. Ensure the Package is Installed #

Double-check that you actually installed the react-collapsible dependency in your project. Run this command in your terminal if you haven’t already:

npm install react-collapsible --save
# Or if you use Yarn:
yarn add react-collapsible

3. Fix JSX Syntax & Missing Export #

Looking at your code snippet, the <p>... tag isn’t closed properly, and you’re missing the component export—both are common rookie mistakes that break compilation. Here’s the corrected full code:

import React, { Component } from 'react';
import { Link } from "react-router-dom";
import '../index.css';
import Collapsible from "react-collapsible";

class Author extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Collapsible trigger="Start here">
        <p>Your collapsible content goes here!</p>
      </Collapsible>
    );
  }
}

// Don't forget to export the component so it can be used elsewhere!
export default Author;

4. Verify React Version Compatibility #

React-Collapsible requires React 16.8 or higher (for hooks support under the hood). Check your package.json file to confirm your react and react-dom versions meet this requirement. If not, update them with:

npm update react react-dom

If you still see errors, take a close look at the exact message in your terminal—it’ll spell out exactly what’s wrong (like a missing module, typo, or version mismatch). That’s the fastest way to narrow down the issue!

内容的提问来源于stack exchange，提问作者Janek Podwysocki