I created my own React component and published it for use. I just finished minifying for distribution and routing that through webpack. (Babel used to just transpile and copy all files to dist).

however I now can't seem to import it for my projects anymore.

I install like: npm i react-subreddit-posts

and then import like:

import SubredditPosts from 'react-subreddit-posts';

And then get this error:

Module not found: Can't resolve 'react-subreddit-posts'

so I must be exporting the module wrong or minifying it wrong???

Here is the source code:

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

Here is what is in node_modules after install through npm:

I can export it just fine from the src, but not when it's published and distributed!

Package.json:

{ "name": "react-subreddit-posts", "version": "1.0.12", "description": "React component for displaying subreddit posts in different styles", "main": "dist/main.js", "repository": { "type": "git", "url": "https://github.com/stcalica/react-subreddit-posts" }, "directories": { "example": "example" }, "scripts": { "test": "jest", "start": "webpack-dev-server --mode development", "transpile": "rm -rf dist && webpack", "prepublishOnly": "npm run transpile", "compile": "webpack --config ./webpack.config.js --progress" }, "jest": { "setupTestFrameworkScriptFile": "./test/setupTest.js" }, "keywords": [ "react", "reddit" ], "author": "Kyle Calica", "license": "ISC", "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.3", "babel-jest": "^23.0.1", "babel-loader": "^7.1.4", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-es2015-arrow-functions": "^6.22.0", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.11", "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", "html-webpack-plugin": "^3.2.0", "jest": "^23.1.0", "react": "^16.4.0", "react-dom": "^16.4.0", "react-test-renderer": "^16.4.1", "style-loader": "^0.21.0", "uglifyjs-webpack-plugin": "^1.2.5", "webpack": "^4.12.0", "webpack-cli": "^3.0.8", "webpack-dev-server": "^3.1.4" }, "dependencies": {} }

webpack.config.js