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?
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.
Related
I'm trying to import a very simple component from a library into a Next.js app.
I have stripped down my library to the bare minimum. It contains the following src/components/index.js:
import React from 'react'
const Container = ({ children }) => <div>{children}</div>
export { Container }
In my Next.js app, I created a pages/index.js that contains the following:
import React from 'react'
import { Container } from 'mylib'
class HomePage extends React.Component {
render() {
return <Container>Hello</Container>
}
}
export default HomePage
mylib is a local npm package which I have installed in my Next.js app using npm i ../mylib. It has a standard webpack config:
const path = require('path')
module.exports = {
entry: {
components: './src/components/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
libraryTarget: 'commonjs2'
},
mode: "production",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
}
],
},
};
and then the package.json points to dist/components.js as the main file.
The following does work:
In my Next.js app, replace return <Container>Hello</Container> with return <div>Hello</div> (while keeping the import { Container } in place)
Refresh the page in the server (I'm running Next's dev server)
Restore the use of <Container> (the opposite of step 1)
Save the file --> hot-reload in the browser with the Container properly displayed (I added a className to be sure)
At this point, if I refresh the browser, I get the following error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
which suggests I made a bad import/export, but I don't know where. And the error only occurs on the server-side.
What did I do wrong?
Container should be a default export, so this:
import React from 'react'
const Container = ({ children }) => <div>{children}</div>
export { Container }
should be this:
import React from 'react'
const Container = ({ children }) => <div>{children}</div>
export default Container
You could also one-line the Container component like this:
import React from 'react'
export default Container = ({ children }) => <div>{children}</div>
I created my react Project A using Create-React-app. Then I bundle it them with Webpack and saved in my Git account.
Now I create another project(Called it Project B)in different directory. Download Project A directly from git. And trying to use it like so:
import React from 'react';
import ReactDOM from 'react-dom';
import { Main } from 'project-A/dist/main'
ReactDOM.render(<Main />, document.getElementById('root'));
I am getting an error like following:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
The webpack from Project A looks like this:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const nodeExternals = require("webpack-node-externals");
module.exports = [
{
/*Client Side*/
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: {
loader: "html-loader",
options: { minimize: true }
}
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,"css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename:"./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename:"[id].css"
})
]
}
]
I have research through the github and tried to change the name import, it still does not work.
Project A's component looks like this:
App.js:
render() {
return (
<div>
{this.renderCodeAuthCard()}
{this.renderConfirmCard()}
{this.renderVerifyCard()}
</div>
);
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Apparently webpack is not exporting the bundle file that is created in Project A. Since the import yields "undefine".
I am trying to find a way to export my webpack bundle file and use it in another project.
Any help will be appreciated
Its because you are not exporting any thing from index.js of Project A. The libraries installed by npm export functions from index.js.
I am working on a React application where in I am having img tag with hard coded image path like below in render function
import '../css/styles.scss';
import React from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
import { List } from './list';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="container">
< img src="images/logo.png" alt=""/>
);
}
}
const root = document.getElementById('app-container');
ReactDom.render(<App />, root);
When I run application with webpack-dev-server, application runs fine and I can see image o webpage. However when i run application using webpack command, it generates build folder and and when I run application; I can't see image in webpage.
my webpack.config.js is :
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
resolve(__dirname, 'src', 'js/app.js'),
],
output: {
filename: '[name].[hash].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader?sourceMap&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'sass-loader?sourceMap'
]
}
},
plugins: [
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
template: resolve(__dirname, 'src', 'index.html')
})
]
}
I understand we can use file-loader in webpack to generate image folder in build folder and use import image from "__path to image"
However is there any way to serve direct image path mention in render function above ?
Thanks in advance
One solution is to use CopyWebpackPlugin. This will copy your images from your src folder to build folder. Then your app can resolve the relative urls.
var CopyWebpackPlugin = require('copy-webpack-plugin');
....
plugins: [
new CopyWebpackPlugin([
{ from: './src/images', to: 'images' },
]),
]
one solution is you have to install url-loader.This is command
npm install --save-dev url-loader
then add following code in webpack.config file in your rules section.
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=25000'
},
next import your image in your APP component.
import logo from 'images/logo.png';
and pass logo in img tag.Like this
< img src={logo} alt=""/>
import '../css/styles.scss';
import React from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
import { List } from './list';
import logo from 'images/logo.png';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="container">
< img src={logo} alt=""/>
);
}
}
const root = document.getElementById('app-container');
ReactDom.render(<App />, root);
I just simply want to export and import a child component into my rot-directory (App.js) and render it out in the browser, but I get this error message in terminal "Module not found: Error: Cannot resolve 'file' or 'directory'". I don't understand what I typed wrong or why I cannot import my child to my App.js.
Have tried to solve this problem but with no results. I've been testing this in my "App.js" to get a more explicit name but not working:
import { ContactsList } from './ContactsList';
I've also tried typing this in my "ContactsList.js" but with no result:
export default class ContactsList extends React.Component {}
I'am a beginner so excuse me for my knowledge but I really want to learn this and the power of react. Please help me for better understanding!
--------App.js---------
import React from 'react';
import ReactDOM from 'react-dom';
import ContactsList from './ContactsList';
class App extends React.Component {
render() {
return (
<div>
<h1>Contacts List</h1>
<ContactsList />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
--------ContactsList.js---------
import React from 'react';
import ReactDOM from 'react-dom';
class ContactsList extends React.Component {
render() {
return (
<ul>
<li>Joe 555 555 5555</li>
<li>Marv 555 555 5555</li>
</ul>
)
}
}
export default ContactsList;
--------webpack.config.js---------
module.exports = {
entry: './src/App.js',
output: {
path: __dirname,
filename: 'app.js'
},
module: {
loaders: [{
test:/\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
};
In your ContactsList.js file, use a <div> to wrap the <ul>
Also in your webpack config file. Can you try to use loader : "babel-loader" instead of loader: 'babel'(Don't forget to install the babel-loader package)
Also remove the query part and try to create a separate .babelrc file with the following settings:
{
"presets" : [
"react",
"es2015"
]
}
Hope this can solve your problem
According to es6 module mechanism the default module should be
imported without {}
import ContactsList from './ContactsList';
and export like
export default class ContactsList extends React.Component {}
But I guess you are trying babel on .jsx extension however it seams
you are using ContactsList.js
Just change the to .jsx to .js in
--webpack.config.js
module.exports = {
entry: './src/App.js',
output: {
path: __dirname,
filename: 'app.js'
},
module: {
loaders: [{
test:/\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
};
Hope it works
You need to do some changes on webpack.config.js file. first replace
test:/\.jsx?$/,
with
test: /\.(js|jsx)$/,
Secondly import modules as follows
import ContactsList from 'path-of-the-file';
But you need to provide the actual path. to get the path correct there are many plugins available depending on the text editors we use. i am using https://github.com/sagold/FuzzyFilePath
I'm trying to build a React app using some simple methods of building views and components. When I run my webpack dev server I get the following error output:
Module parse failed: /Directory/To/router.js Unexpected token (26:2)
You may need an appropriate loader to handle this file type.
The line it complains about is when I first define my Router handler...
<Route handler={App}>
My full router.js is set as such:
// Load css first thing. It gets injected in the <head> in a <style> element by
// the Webpack style-loader.
import css from './src/styles/main.sass';
import React from 'react';
import { render } from 'react-dom';
// Assign React to Window so the Chrome React Dev Tools will work.
window.React = React;
import { Router } from 'react-router';
Route = Router.Route;
// Require route components.
import { App } from './containers/App';
import { Home } from './containers/Home';
import { StyleGuide } from './containers/StyleGuide';
import { Uploader } from './containers/Uploader';
const routes = (
<Route handler={App}>
<Route name="Home" handler={Home} path="/" />
<Route name="StyleGuide" handler={StyleGuide} path="/styleguide" />
<Route name="Uploader" handler={Uploader} path="/uploader" />
</Route>
)
Router.run(routes, function(Handler) {
return ReactDOM.render(<Handler/>, document.getElementById('app'));
});
In my .babelrc file I have my presets defined with react and es2015
My development webpack looks like this:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://0.0.0.0:8080',
'webpack/hot/only-dev-server',
'./src/router'
],
devtool: 'eval',
debug: true,
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
resolveLoader: {
modulesDirectories: ['node_modules']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'public')
},
// CSS
{
test: /\.sass$/,
include: path.join(__dirname, 'public'),
loader: 'style-loader!css-loader!sass-loader'
}
]
}
};
I've already tried to research this problem. I'm not finding any solutions to this specific instance. I'm curious to find why this is acting like this.
Edit 1
I managed to solve my problem by changing the directory name to my actual source directory and not in public/. But after correcting my mistake I stumbled upon two other errors dealing with my components, perhaps?
I now receive two errors in the browser:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
TypeError: _reactRouter.Router.run is not a function. (In '_reactRouter.Router.run', '_reactRouter.Router.run' is undefined)
I've found that this is commonly caused by not importing/exporting some things correctly. It's either coming from my router.js or my components that share their structure as below:
import React from 'react';
import { Link } from 'react-router';
const Uploader = React.createClass({
//displayName: 'Uploader',
render() {
return (
<div>
<h1>Uploader</h1>
</div>
)
}
});
export default Uploader;
You are exporting Uploader as default but importing it as a named export:
export default Uploader;
import { Uploader } from './containers/Uploader';
// instead do
import Uploader from './containers/Uploader';
Your Router configuration is a bit strange. What version of react-router are you using? Usually you can wrap your <Route> config into a <Router>. See the docs.