Javascript can'；找不到已发布的组件模块

我向NPM发布了一个React组件，当我尝试在另一个项目中使用它时，我无法找到该模块

Module not found: Can't resolve 'react-subreddit-posts' in '/Users/kyle.calica/Code/exmaple/app/src'

我在创建开发时可以导入的Web包包时遇到了问题。我相信这是因为我正在制作ES6类符号，但试图编译以便导入？我能够“修复”它。但现在我在使用它时遇到了麻烦

这是我的React组件的

webpack.prod.config.js

const path = require("path");

module.exports = {
  mode: 'production',
  entry: path.join(__dirname, "src/index.js"),
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: "commonjs2"
    },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["react"],
              plugins: ["transform-class-properties"]
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  }
};

下面是我的组件条目JS文件，

index.JS

是我如何在React组件中创建类的一个很好的示例：

import React, { Component } from 'react';
import ListContainer from './ListContainer';
import ListItemComponent from './ListItemComponent';

const redditAPI = 'https://www.reddit.com/r/';

export default class SubredditPosts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      redditPosts: [],
      isLoading: true
    };
  }

  componentDidMount() {
    const uri = `${redditAPI}${this.props.subreddit}.json`;
    fetch(uri)
      .then(data => data.json())
      .then(this.handlePosts)
      .catch(err => console.error(err));
  }

  handlePosts = (posts) => {
    const apiPosts = posts.data.children.map((post, index) => {
      return {
        key: index,
        title: post.data.title,
        media: this.getMediaFromPost(post),
        link: post.data.url
      };
    });

    this.setState({
      redditPosts: apiPosts,
      isLoading: false
     });
  }

  getMediaFromPost = (post) => {
    const extension = post.data.url.split('.').pop();

    if (post.data.hasOwnProperty('preview') &&  !extension.includes('gif')) {
      return post.data.preview.images[0].source.url;
    }

    //do not use includes! because of Imgur's gifv links are not embeddable
    if (extension === 'gif' || extension.includes('jpg') ||  extension.includes('jpeg')) {
      return post.data.url;
    }

    //if can't load media then place placeholder
    return this.props.placeholder;
  }

    render() {
      return(
        <ListContainer display={this.props.display}>
        { !this.state.isLoading && this.state.redditPosts.map(post => (
          <ListItemComponent
            display={this.props.display}
            key={post.key}
            link={post.link}
            media={post.media}
            title={post.title}
            height={this.props.height}
            width={this.props.width}
          />
        ))}
        </ListContainer>
      );
    }
}

我捆绑和导出React组件的错误是什么？

---

还是我只是输入错误

刚刚安装了您的软件包，结果是发布失败

从node_模块导入包时，node/webpack会找到目录，读取其中的package.json文件，然后导入package.json中

main

字段指示的文件。如果这些步骤中的任何一个失败，您的导入将无法解决

你的package.json上写着

“main”：“dist/index.js”

，但版本中没有dist目录，只有lib目录

将字段更改为

“main”：“lib/index.js”

可能会起作用，但还有其他问题。你的依赖到处都是

devdependency

是开发人员只需要使用的包。它用于构建工具、测试工具、过梁等。

依赖项是软件包正常工作所必需的。不同之处在于，安装软件包时将安装依赖项的
dependencies
，但不会安装依赖项的
devDependencies

在您的情况下，您需要在
依赖项中使用react和react dom，以及
devdependencies
中的所有其他内容。此外，npm总是在全球范围内安装，您根本不需要在package.json中安装它

我建议您查阅一份关于维护开源软件包的指南和/或检查现有软件包是如何设置的。这并不难理解，但在开发应用程序时，有很多事情你应该知道，但你并不关心。
它是否存在于你的node_modules文件夹中？@Volodymyr是的。我亲眼见过。我尝试使用绝对路径，但得到一个警告，您不能在我的源文件夹之外执行此操作——我的示例应用程序使用
create-react-app
btw还可以查看如何使用
npm-link
（尽管我确实建议您使用纱线）在本地测试对npm包的更改，而不必在每次更改时发布。谢谢！我以为我还在用
import/export
搞乱ES6类。所以我的目标是建立一个不依赖任何其他东西的项目。我不知道我的
依赖关系
是如何与我的
依赖关系
混在一起的，我肯定会解决这个问题。是的，我会试着找一个好的导游。我会看看这些改变是否能解决任何问题，我会在这里报告，并将你的答案标记为真棒！非常感谢。自从我的重构，我打破了很多与网页和我的建设。现在我知道我还有别的东西弄坏了，但至少这让我重新走上正轨！非常感谢你！我可能会在这里用我找到的任何资源来评论这个问题。很抱歉以后会有垃圾邮件。我想你是说
build
dir而不是
lib
，我没有
lib
目录。
import React, { Component } from 'react';
import SubredditPosts  from 'react-subreddit-posts';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
        <div class="row">
        <SubredditPosts
          subreddit="aww"
          display="tile"
          placeholder="some_link_image_url_OR_image_path"
          width="250px"
          height="250px"
          />
        </div>
      </div>
    );
  }
}

export default App;