Module not found: Can't resolve custom package [React Import] - reactjs

I am trying to create my very first node package, it was successfully publish and live on npmjs.com website but whenever i include it on a sample react project using create-react-app i get this following error
Here's how i import it
import IconTooltip from 'react-icons-tooltip';
Here's the error
Module not found: Can't resolve './react-icons-tooltip' in '/home/ubuntu/workspace/lasting/src/Components'
This is the Package package.json file
{
"name": "react-icons-tooltip",
"version": "1.0.4",
"description": "",
"main": "./lib/IconTooltip.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --progress --colors --p",
"transpile": "node_modules/.bin/babel ./src/index.js --presets babel-preset-es2015 --out-file lib/IconTooltip.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.10"
},
"dependencies": {
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}
webpack.config.js
const webpack = require("webpack");
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/build',
filename: 'IconToolTip.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
]
};
If i import the local the package seems to work fine
import IconTooltip from './lib/IconTooltip';
TIA!

I had that same problem before and that fixed it. I checked other modules and they all enter in index.js, is all I can say :)

Related

webpack --watch does not want to process react component inside my index.js

I'm an old hat coder but I'm new to react, and it looks like I need another pair of eyeballs. I'm trying to setup a very basic React app from scratch (for practice) and it fires up fine, but when I try to run webpack --watch it's giving me the following error:
Here's the error I'm getting:
ERROR in ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
| import App from "./components/App.js";
|
> ReactDOM.render(<App />, document.getElementById('root'));
|
Here's my webpack.dev.config file:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "index_bundle.js"
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
]
};
Here's my package.json file:
{
"name": "react-boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch --open",
"dev": "./node_modules/.bin/webpack-dev-server --mode development --config ./webpack.dev.config.js",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.3.3",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.0"
},
"dependencies": {
"react": "^16.8.3",
"react-dom": "^16.8.3"
}
}
Here's my .babelrc file:
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
And finally... my index.js file
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App.js";
ReactDOM.render(<App />, document.getElementById('root'));
Directory Structure
This ought to be pretty straight-forward but I guess I'm just not seeing something. I'd appreciate any help!!

Error: You may need an appropriate loader to handle this file type

Trying to set up a react web app but keep running into this error after trying to implement semantic-UI by putting import "semantic-ui-css/semantic.min.css"; in index.jsx.
I npm installed css-loader and style-loader as thats the error I was getting prior to this new error.
My guess is a webpack.config needs to be adjusted to handle the loaders differently but I'm unsure on how to proceed with this.
ERROR in ./node_modules/semantic-ui-css/themes/default/assets/fonts/outline-icons.woff
Module parse failed: C:\Users\Shawn\Documents\GitHub\Galavue\Galavue\node_modules\semantic-ui-css\themes\default\assets\fonts\outline-icons.woff Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./node_modules/css-loader/dist/cjs.js!./node_modules/semantic-ui-css/semantic.min.css 15:42-101
# ./node_modules/semantic-ui-css/semantic.min.css
# ./react-client/src/index.jsx
Package.json
{
"name": "galavue",
"version": "0.0.0",
"description": "Galavue",
"main": "server.js",
"author": "Shawn",
"scripts": {
"dev": "webpack -d --watch",
"start": "node ./server/index.js",
"build": "webpack -p",
"react-dev": "webpack -d --watch",
"server-dev": "nodemon server/index.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/www.github.com/shawnSFU.git"
},
"license": "ISC",
"bugs": {
"url": "https://github.com/www.github.com/shawnSFU/issues"
},
"homepage": "https://github.com/www.github.com/shawnSFU#readme",
"dependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"body-parser": "^1.17.2",
"express": "^4.15.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.85.0",
"webpack": "^3.4.1"
},
"devDependencies": {
"css-loader": "^2.1.0",
"style-loader": "^0.23.1"
}
}
webpack.config.js
//defines the entry and output points for our application
const path = require('path');
const SRC_DIR = path.join(__dirname, '/react-client/src');
const DIST_DIR = path.join(__dirname, '/react-client/dist');
const webpack = require('webpack');
module.exports = {
entry: `${SRC_DIR}/index.jsx`,
output: {
path: DIST_DIR,
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.json', '.css'],
},
module: {
rules: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.png$/,
loader: 'url-loader?limit=100000&minetype=image/png'
},
{
test: /\.jpg/,
loader: 'file-loader'
},
{
test: /\.jsx?/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
};
There are a few things you need to do. Ensure that you have use ~ for CSS imports from node_modules like:
import '~semantic-ui-css/semantic.min.css';
Second, this CSS file semantic.min.css also references *.woff files. I believe it is used for referencing external font files. You would need either url-loader or file-loader to handle those types of files. Sample loader configuration for url-loader would look like:
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
limit: 10000,
},
}
Further documentation:
url-loader
file-loader

Module not found: Error: Cannot resolve module 'babel-loader' in 'C:\Users\durgat\reactApp'

{
"name": "reactApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0"
}
}
Please help me to solve this issue , i am still getting this issue after doing many changes like , i degraded the babel to lowest version & i installed npm using this command and also i did many changes but there is no result.
And webpack.config.js file
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
i think this could help as i dont know what is webpack file configration
but you can give it try in your webpack file
resolveLoader: {
root: path.join(__dirname, 'node_modules')
}
please share your webpack.config file

How to enable watch for webpack MERN?

I'm making MERN (with React in Front-end and Express in Back-end) based application from a scratch. And I want webpack to reload page every time I save files. But it's not working.
My webpack.config.js
const path = require('path');
const entryFile = path.resolve(__dirname, 'src', 'client', 'app.js');
const outputDir = path.resolve(__dirname, 'public');
module.exports = {
entry: ['babel-polyfill', entryFile],
output: {
filename: 'bundle.js',
path: outputDir
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(scss|css)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader'
}
]
}
]
}
};
my package.json
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "babel-node src/server/app.js",
"prestart": "webpack --mode development"
},
"repository": {
"type": "git",
"url": "git+https://github.com/2u4u/share-book.git"
},
...
"dependencies": {
"express": "^4.16.3",
"webpack": "^4.17.1",
"webpack-dev-server": "^3.1.5"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^1.0.0",
"node-sass": "^4.9.3",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"sass-loader": "^7.1.0",
"style-loader": "^0.22.1",
"webpack-cli": "^3.1.0",
"webpack-command": "^0.4.1"
}
}
I tried to add watch: true in the end of webpack config, but it's not starting server then. Where is the problem?
UPD: Can problem be in server/app.js?
import express from 'express';
import path from 'path';
const app = express();
const publicPath = path.resolve(__dirname, '..', '..', 'public');
app.use(express.static(publicPath));
app.listen(3000, () => {
console.log(`NEW one MERN Boilerplate listening on port 3000 and looking in folder ${publicPath}`);
});
Add -- hot in your dev script it should work if you’re using webpack v4. Otherwise you can add hot module in your webpack config.
The following should be your devDependencies
"dependencies": {
"webpack": "^4.17.1",
"webpack-dev-server": "^3.1.5"
},
and make changes in your "start and "prestart" script:
"prestart": webpack-dev-server --mode development --config webpack.config.js --open --hot
"start": "babel-node nodemon src/server/app.js",
You can directly add watch to prestart script in package.json
"prestart": "webpack --mode development" --watch --hot
OR
add devserver in webpack.config.js file something like below
devServer: {
contentBase: './public',
hot: true,
watch: true
}
"prestart": "webpack --mode development --watch"
Simple and easy. This has to be ran into one terminal, the server in another one.

Webpack error: Can't resolve 'fbjs/lib/EventListener'

I'm trying to add react to my existing web app. I successfully installed all required npm modules but after running npm run wbp command I got a lot of errors like:
ERROR in ./node_modules/react-dom/cjs/react-dom.production.min.js
Module not found: Error: Can't resolve 'fbjs/lib/EventListener'
ERROR in ./node_modules/react/cjs/react.production.min.js
Module not found: Error: Can't resolve 'object-assign'
Webpack version:
Version: webpack 4.1.1
My webpack.config.js:
const path = require('path');
module.exports = {
entry: path.join(__dirname, '/wwwroot/js/stats.jsx'),
output: {
path: path.join(__dirname, 'wwwroot/js/'),
filename: 'admin.js'
},
resolve: {
extensions: ['.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: ['#babel/preset-react', '#babel/preset-env']
}
}
]
}
};
My package.json:
{
"name": "WebSite",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack --display-error-details --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.0.0-beta.40",
"#babel/preset-env": "^7.0.0-beta.40",
"#babel/preset-react": "^7.0.0-beta.40",
"babel-loader": "^8.0.0-beta.0",
"cjs": "0.0.11",
"fbjs": "^0.8.16",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.10"
}
}
I tried to solve this problem with manual mapping path to fbjs but without success. What am I doing wrong?
UPD: webpack --display-error-details --mode development generated admin.js for me but also showed me error. Browser console shows me react.development.js:17 Uncaught Error: Cannot find module "object-assign" error in this case
Finally I got it working:
My package.json:
{
"name": "WebSite",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack --display-error-details --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.11",
"webpack-config": "^7.0.0"
}
}
My webpack.config.js:
const path = require('path');
module.exports = {
entry: path.join(__dirname, 'wwwroot/js/Admin/stats.jsx'),
output: {
path: path.join(__dirname, 'wwwroot/js/Admin'),
filename: 'admin.js'
},
resolve: {
extensions: ['.jsx', '.js']
},
module: {
rules: [{
test: /\.jsx?$/,
loader: 'babel-loader',
query:
{
presets:['react']
}
}]
},
};

Resources