Develop Reference

Custom NPM UI Library, Module not found

I have created a base NPM package that I will be loading all of my UI elements from the past couple of years. I created the package and uploaded it to NPM. However, when I install the package onto another project and try to use a button, I receive an error: Module not found: Can't resolve 'ui-library-lofidevelopment' in 'C:\Users\Scott Selke\Documents\Personal_projects\test\test\src'
I have tried messing around with webpack, thinking that might be the problem. I have also updated all dependencies to make sure there were no breaking errors. In my local setup, I am able to access the code no problem. However when installed from NPM the package does not work.
My test app with ui-library-lofidevelopment installed via npm:
import React from 'react';
import logo from './logo.svg';
import { Button } from 'ui-library-lofidevelopment';
import './App.css';
function App() {
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>
<Button text={"fuck you this worked"} />
</header>
</div>
);
}
export default App;
My package.json file:
{
"name": "ui-library-lofidevelopment",
"version": "1.0.6",
"description": "",
"main": "./dist/lib/index.js",
"scripts": {
"start": "./node_modules/.bin/parcel src/docs/index.html",
"build": "webpack --mode=production",
"build:docs": "./node_modules/.bin/parcel build src/docs/index.js -d dist/docs/"
},
"author": "Scott Selke",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"parcel-bundler": "^1.12.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
My webpack.config.js file:
const path = require('path');
// const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: path.resolve(__dirname, 'src/lib/index.js'),
output: {
path: path.resolve(__dirname, './build/lib'),
filename: 'index.js',
library: '',
libraryTarget: 'commonjs'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: "file-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
}
]
},
resolve: {
extensions: ['.scss', '.js', '.json', '.png', '.gif', '.jpg', '.svg'],
},
plugins : [
// new HtmlWebPackPlugin({
// template: "./src/index.html",
// filename: "./index.html"
// }),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
I expected that the npm package would install and be available. However I received the error Module not found.

Ok, So my solution was this:
I had my webpack output set as
output: {
path: path.resolve(__dirname, './build/lib'),
filename: 'index.js',
library: '',
libraryTarget: 'commonjs'
},
and my main in package.json set to :
"main": "./dist/lib/index.js",
Hence the two did not line up.

ReactJS loading in other application returns Module parse failed ERROR in index.js

I'm using a pretty new JS dev environment (here for details) and according to this documentation React is pretty easy to implement into other JS frameworks.
In my index.js file which is at the root of my directory, I have the following code:
import React, { Component } from "react";
import ReactDOM from "react-dom";
function Button() {
return <button id="btn">Say Hello</button>;
}
ReactDOM.render(
<Button />,
document.getElementById('container'),
function() {
$('#btn').click(function() {
alert('Hello!');
});
}
);
and when i go to run fly server I get the following error:
ERROR in ./index.js Module parse failed: Unexpected token (8:9) You
may need an appropriate loader to handle this file type. | | function
Button() { | return Say Hello; | } |
Here is my package.json file:
{
"name": "fly-example",
"version": "1.0.0",
"description": "fly example app",
"main": "index.js",
"dependencies": {
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.11",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"style-loader": "^0.21.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
},
"scripts": {
"test": "mocha"
},
"repository": {
"type": "git",
"url": "none"
},
"keywords": [
"fly",
"app"
],
and my webpack.config:
const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");
module.exports = {
entry: "./index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { presets: ['env'] }
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
resolve: { extensions: ['*', '.js', '.jsx'] },
output: {
publicPath: bundlePath,
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname,'public'),
port: 3000,
publicPath: "http://localhost:3000/dist"
},
plugins: [ new webpack.HotModuleReplacementPlugin() ]
};
.babelrc file:
{
"presets": ["env", "react"]
}
Still fairly new to React, but I love building apps in it, but I really want to learn how to integrate it into other JS frameworks so I can use it more broadly.
Is there something I'm missing in the package.json file or the webpack.config? I have done quite a bit of looking around but haven't found much.
Thanks for your help in advance!

Try specifying babel-loader under use.loader. See below:
const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");
module.exports = {
entry: "./index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
}
options: { presets: ['env'] }
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
resolve: { extensions: ['*', '.js', '.jsx'] },
output: {
publicPath: bundlePath,
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname,'public'),
port: 3000,
publicPath: "http://localhost:3000/dist"
},
plugins: [ new webpack.HotModuleReplacementPlugin() ]
};
Instead of writing the webpack configuration by yourself, I'd recommend using create-react-app, it is simpler. Also make sure you import jquery.
Try and let me know if this works !

Cannot import react, Uncaught SyntaxError, Unexpected Identifier

I have a following problem. I setted up a React in my ASP.NET Core application as always, but now I have one irritating problem and I don't know how to fix it.
When I try to import react from 'react', nothing import. In Chrome Developer Tools I see a red underline under the sentene: "import React from 'react';".
I tried to change babel presets to another, change a webpack.config.js file but nothing works. Maybe you will have an idea, where is a bug? Here is my files:
.babelrc
{
"presets":["env", "react"]
}
package.json
{
"name": "MyApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.10",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"node-sass": "^4.7.2",
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.1.1",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {}
}
webpack.config.js
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
devtool: 'source-map',
entry: './ClientApp/index.js',
output: {
publicPath: "/js/",
path: path.join(__dirname, "wwwroot", "js"),
filename: "index-bundle.js"
},
devServer: {
contentBase: "./dist"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 50000,
name: 'assets/[name]_[hash].[ext]'
}
}
]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin("./bundle.css")
]
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './Shared/styles/styles.scss';
import SignIn from './Sign/Shared/Components/Sign'
class App extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
<div>
<SignIn />
</div>
}
}
ReactDOM.render(<App/>, document.getElementById('App'))
I will be very glad for your help.

import is a es2015 feature and I see no es2015 preset in .babelrc. See: https://www.npmjs.com/package/babel-preset-es2015

Add presets into babel-loader.
Change webpack.config.js in this way.
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use : {
loader : 'babel-loader',
options : {
presets : ['env', 'react'],
}
}
},

Try this : transform-es2015-modules-amd , This plugin transforms ES2015 modules to Asynchronous Module Definition (AMD). in .babelrc file
{
presets: ["env", "react"],
plugins: ["transform-es2015-modules-amd"]
}
more at transform-es2015-modules-amd

This can also occur if you run:
node index.js
instead of
npm start
See also: npm start vs node app.js

ReactDOM.render() Not Working - You may need an appropriate loader to handle this file type

I have been following a course on Udemy.com and have run into a problem that I am unable to fix. I have webpack installed as well as babel and followed the instructions through a second time to double check that I didn't make a mistake.
When trying to run this code in my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>HELLO!</div>, document.getElementById('root')
);
I get the Error:
ERROR in ./app/index.js
Module parse failed: /Users/Kyle/Documents/React Native Workspace/es6Project/app/index.js Unexpected token (5:2)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
| <div>HELLO!</div>, document.getElementById('root')
| );
|
# multi (webpack)-dev-server/client?http://localhost:3000 ./app/index.js
Here is my package.json:
{
"name": "es6Project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"babel": {
"presets": [
"es2015",
"es2016",
"es2017",
"react"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.0.0",
"react-bootstrap": "^0.31.3",
"react-dom": "^16.0.0",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
Here is my webpack.config.js:
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: ['./app/index.js'],
output: {
path: __dirname + '.build',
filename: 'bundle.js'
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
module: {
loaders: [
{
loader: 'babel-loader',
test: /\.jsx?$/,
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
}
}
})
],
devServer: {
port: 3000,
contentBase: './build',
inline: true
}
}

Your webpack configuration is wrong. The error you are getting is regarding JSX, being unable to be parsed due to misconfiguration.
Also since you are creating a new project, why are you using a plugin that its purpose is to migrate from webpack 1.x versions to 2.x ?
If you use webpack version 2.x modify module.exports to contain:
module: {
rules: [
{
test: /\.(js)$/,
use:[{
loader: 'babel-loader',
query: {
compact: false,
presets: [["es2015", {"modules": false, "loose" : true}], 'react']
}
}]
}
]
}

check your application where you have rendering your app.
check you html file. the code which you have return it is good.
please go thorugh reactjs tutorial point
https://www.tutorialspoint.com/reactjs/reactjs_overview.htm

Reactjs + Webpack 2.x + react-router 4.x after bundled without error, use html src bundle.js, css recognised., but no components rendered out

As the title says, I'm using webpack 2.x, react-router v4, bundling successful, no errors, yet open index.html, not showing exactly like the website. Just when bundling separately not working. Been scratching my head for a week. No Errors were produced no clue whats the problem.. hoping someone can help.. Thanks in advance..
When using webpack-dev-server, it works normal, every components rendered.
Situation: bundled successfully without errors. bundle.js, some images, and a font folder files produced in /public folder. index.html with src bundle.js. double clicked it. the css part of the website recognised, javascript parts nothing..
using chrome reacttools it shows like this:
<BrowserRouter>
<Router history={...etcs}>
<App>
<Switch>
null
</Switch>
</App>
</Router>
</BrowserRouter>
my folder hierarchy:
Folder Hierarchy
My package.json
{
"name": "fei-react",
"version": "2.0.0",
"description": "Fei's official business website",
"main": "app.jsx",
"scripts": {
"start": "webpack-dev-server --inline --hot --port 9999"
},
"author": "Albert Chai",
"license": "ISC",
"dependencies": {
"prop-types": "^15.5.8",
"react": "^15.*",
"react-addons-css-transition-group": "^15.*",
"react-dom": "^15.*",
"react-router-dom": "^4.0.0-beta.8"
},
"devDependencies": {
"aphrodite": "^1.*",
"babel-core": "^6.*",
"babel-loader": "^6.*",
"babel-preset-env": "^1.*",
"babel-preset-latest": "^6.*",
"babel-preset-react": "^6.*",
"babel-runtime": "^6.*",
"css-loader": "^*",
"file-loader": "^*",
"foundation-sites": "^6.*",
"fullpage-react": "^2.*",
"html-webpack-plugin": "^*",
"jquery": "^3.*",
"node-sass": "^4.*",
"react-hot-loader": "^*",
"react-images": "^0.*",
"react-linkify": "^0.*",
"react-photo-gallery": "^5.*",
"sass-loader": "^*",
"script-loader": "^*",
"style-loader": "^*",
"url-loader": "^*",
"webpack": "^2.*",
"webpack-dev-server": "^2.*"
}
}
my webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
entry: "./app.jsx",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "public"),
},
devServer: {
hot: true,
historyApiFallback: true,
contentBase: './public'
},
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery'
}),
new webpack.HotModuleReplacementPlugin()
],
resolve: {
modules: [path.resolve(__dirname, "/"), "node_modules"],
alias: {
About: path.resolve(__dirname, 'components/pages/About.jsx'),
Contact: path.resolve(__dirname, 'components/pages/Contact.jsx'),
Projects: path.resolve(__dirname, 'components/pages/Projects.jsx'),
Content: path.resolve(__dirname, 'components/pages/Content.jsx'),
Main: path.resolve(__dirname, 'components/Main.jsx'),
Loader: path.resolve(__dirname, 'components/pages/Loader.jsx'),
Logo: path.resolve(__dirname, 'components/Logo.jsx'),
LogoA: path.resolve(__dirname, 'components/LogoA.jsx'),
ArrowButton: path.resolve(__dirname, 'components/ArrowButton.jsx'),
EmailUser: path.resolve(__dirname, 'components/EmailUser.jsx'),
applicationStyles: path.resolve(__dirname, 'components/styles/app.scss'),
applicationFonts: path.resolve(__dirname, 'components/fonts/fonts.scss'),
fullreactNorm: path.resolve(__dirname, 'components/normalize.css'),
fullreactSke: path.resolve(__dirname, 'components/skeleton.css'),
exampleStyles: path.resolve(__dirname, 'components/exampleStyles.scss')
},
extensions: ['.css','.scss', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot-loader','babel-loader']
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
exclude: /(node_modules|bower_components)/,
use: "file-loader"
},
{
test: /\.(woff|woff2)$/,
exclude: /(node_modules|bower_components)/,
use: "url-loader?prefix=font/&limit=5000"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
exclude: /(node_modules|bower_components)/,
use: "url-loader?limit=10000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]"
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
exclude: /(node_modules|bower_components)/,
use: "url-loader?limit=10000&mimetype=image/svg+xml"
},
{
test: /\.gif/,
exclude: /(node_modules|bower_components)/,
use: "url-loader?limit=10000&mimetype=image/gif"
},
{
test: /\.jpg/,
exclude: /(node_modules|bower_components)/,
use: "url-loader?limit=10000&mimetype=image/jpg"
},
{
test: /\.png/,
exclude: /(node_modules|bower_components)/,
use: "url-loader?limit=10000&mimetype=image/png"
}
]
}
}
my babelrc
{
"presets": [
"env","react"
]
}
my react-router setting within app.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, Switch, BrowserRouter} = require('react-router-dom');
var Main = require('Main');
var Content = require('Content');
var About = require('About');
var Contact = require('Contact');
// App css
require('style-loader!css-loader!sass-loader!applicationStyles')
require('style-loader!css-loader!sass-loader!exampleStyles')
// App font
require('style-loader!css-loader!sass-loader!applicationFonts')
const App = () => (
<Switch>
<Route exact path="/" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/content" component={Content} />
</Switch>
)
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('app'))
Not sure what other information needed. However i have uploaded the whole project on github. this is the website
https://github.com/triple1c86/FeiReactWebsite
Please help.. search all over the internet and this stackoverflow, cant seems to find any answer.. Thanks again