找不到发布的React组件模块

Question

I published a React component to NPM and when trying to use it in another project I am not able to find the module!

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

I was having trouble with creating a Webpack bundle which I could import from when developing. I believe it is because I am making ES6 class notations but trying to compile so that I can import? I was able to "fix" it. But now I'm having trouble using it.

Here is my React component's 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"]
  }
};

Here is my entry JS file for the component, index.js a good example of how I'm making the classes in my React component:

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>
      );
    }
}

And here is the App.js in my project trying to consume the published React component that I pulled from NPM:

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;

What am I doing wrong with my bundling and exporting of the React component? Or am I just importing it wrong?

Answer 1

Just installed your package and it turns out to be a bad publish.

When you import a package from node_modules, node/webpack finds the directory, reads a package.json file in it, then imports the file indicated by the main field in package.json. If any of those steps fail your import will fail to resolve.

Your package.json says "main": "dist/index.js" but there's no dist directory in the release, only a lib directory.

Changing the field to "main": "lib/index.js" would probably work, but there's other issues as well. Your dependencies are all over the place. devDependencies are packages need only by developers working on the package. It's used for build tools, testing tools, linters, etc. dependencies are need for the package to work correctly. The difference is that dependnecies of a dependency will be installed when you install a package, but devDependencies of a dependency won't be installed.

In your case, you need react and react-dom in dependencies and everything else in devDependnecies . Also npm is always installed globally and you don't need it in your package.json at all.

I'd recommend you look up a guide for maintaining an open source package and/or check how an existing one is set up. It's not too hard to understand but there's a lot of things you should know that you just don't care about when developing an app.