Module build failed: ReferenceError: [BABEL] /app/src/index.js: Unknown option: /app/node_modules/react/react.js.Children - node.js

My project fails with the error message in title on heroku, but it works locally.
This is my webpack.config.js:
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
}
}]
},
resolve: {
extensions: ['.jsx', '.js']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
And this is package.json:
{
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7"
},
"dependencies": {
"axios": "^0.17.1",
"lodash": "^3.10.1",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "4.3.0",
"react-router": "^2.0.1",
"react-router-dom": "^4.0.0",
"redux": "^3.0.4",
"redux-form": "^6.6.3",
"redux-promise": "^0.5.3",
"validator": "^9.1.2",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
}
}
I digged around a bit, trying to find an answer, but there was no case such as working on one machine, and not on another machine.
Update 1
Here is index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import promise from 'redux-promise';
import reducers from './reducers';
import LoginForm from './components/login_form';
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<div>
<Route path="/" component={LoginForm} />
</div>
</BrowserRouter>
</Provider>
, document.querySelector('.container'));
** Update 2 **
I tried changing the jsx to js for the test property in webpack loader config object, it didn't help. I removed stage-1 and it's still failing.

This problem got fixed:
Deleted module.query and resolve from the webpack config file.
Moved dependencies from devDependencies to dependencies (heroku is a production environment, and therefore it doesn't download devDependencies, which doesn't make sense to me !)

Related

React + Webpack + Material UI styling breaking in production

I am trying to create a reusable React component with Material UI and npm link it to a different application. The component and application are being bundled using webpack. The application renders the component fine in development, but when I bundle the application the component starts breaking the material-ui styling.
Some of the solutions I have tried include:
https://material-ui.com/getting-started/faq/#why-arent-my-components-rendering-correctly-in-production-builds
https://reactjs.org/warnings/invalid-hook-call-warning.html
I thought defining #material/core in the peerDependencies would solve it, but every time I use a Material-UI component the application throws the Invalid Hook Call Warning.
Nothing seems to work ☹️
component's package.json:
{
"name": "component",
"version": "1.0.0",
"description": "",
"main": "build/index.js",
"scripts": {
"test": "jest",
"start": "webpack --watch",
"build": "webpack --optimize-minimize -p",
"dist": "npm run build"
},
"peerDependencies": {
"#material-ui/core": "^3.2.0 || ^4.0.0",
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
},
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.5.0",
"#babel/preset-env": "^7.5.4",
"#babel/preset-react": "^7.0.0",
"#material-ui/core": "^4.9.0",
"#material-ui/icons": "^3.0.2",
"babel-cli": "^6.26.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-runtime": "^6.26.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.1.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.7.0",
"faker": "^4.1.0",
"husky": "^1.3.1",
"jest": "^23.6.0",
"jest-styled-components": "^6.3.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"sinon": "^7.2.2",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"clsx": "^1.0.4",
"prop-types": "^15.6.2"
}
}
component's webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.jsx',
mode: 'production',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
libraryTarget: 'commonjs2',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/env'],
},
},
},
],
},
resolve: { extensions: ['*', '.js', '.jsx'] },
externals: {
react: 'react',
},
optimization: {
minimize: true,
},
};
Any help would be much appreciated! Thanks in advance.
This actually makes perfect sense if you check out the docs on npm link:
First, npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed.
Note that the command only makes a symlink locally so when you build/deploy, it would logically follow the package can't be found.
My advice would be to create a scoped package for your custom component. Create an npm account, upload your package and then add it to your project like this:
npm install #brettoberg/reusable-component
Now, webpack and any other system should be able to find it because it's published.

Deployment Issue: React application not rendering properly on github pages

I have created a react redux front end app. The app is working perfectly fine using node CLI and accessible using localhost:3050 or localhost:8080. However, if I try to run production build using github pages the page only renders partially. The same is observed if I open the production index.html file directly in the browser. I have searched for hours but not able to find the any clue. Here is the github repo and the public url of the project. Any help would be deeply appreciated.
Here is some of the configuration and package files
package.json
{
"name": "items-random-rater",
"version": "0.1.0",
"private": true,
"author": "Muhammed Salman Shamsi",
"dependencies": {
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.3.1",
"lodash": "^4.17.15",
"nodemon": "^1.19.1",
"popper.js": "^1.15.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-redux": "^7.1.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "nodemon server.js",
"test": "mocha --require babel-polyfill --require babel-core/register --require ./test/withDom.js --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch",
"clean": "rimraf public",
"build": "NODE_ENV=production npm run clean && webpack -p",
"serve": "webpack-dev-server",
"deploy": "npm run build && gh-pages -d public"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.10.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"chai": "^4.2.0",
"chai-jquery": "^2.1.0",
"css-loader": "^1.0.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"eslint": "^5.13.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"express": "^4.17.1",
"gh-pages": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.4.1",
"jsdom": "^15.1.1",
"mini-css-extract-plugin": "^0.4.1",
"mocha": "^6.2.0",
"node-sass": "^4.9.2",
"postcss-loader": "^2.1.6",
"redux-mock-store": "^1.5.3",
"rimraf": "^2.7.1",
"sass-loader": "^7.1.0",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-middleware": "^3.7.0",
"webpack-dev-server": "^3.8.0"
}
}
webpack.config.json
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const env = process.env.NODE_ENV;
const VENDOR_LIBS = [
"lodash","react","react-dom","react-redux",
"redux","axios"
];
module.exports = {
mode: env || 'development',
entry: {
bundle: ['babel-polyfill','./src/index.js'],
vendor: VENDOR_LIBS
},
output: {
path: path.join(__dirname, 'public'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['env','react','stage-2']
}
}
]
},
{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000'
}
]
},
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
publicPath: '/public/',
compress: true,
port: 8080
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
]
};

React Native Error: You are currently using minified code outside of NODE_ENV === 'production' using Redux

I've been searching and trying to get rid of this error without success. I read the whole documentation of webpack and tried to implement it correctly, but it seems not work. I use expo, maybe there is an issue with the entry of expo, but I don't know.
Here my code:
webpack.config.js
var path = require('path');
module.exports = {
mode: 'production',
entry: "./App.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
};
App.js
import * as React from "react";
import { Provider } from "react-redux";
import { createStore } from "redux";
import { reducers } from "./reducers";
import { Drawer } from "./Navigation";
import LibraryReducer from "./reducers/LibraryReducer";
export default class App extends React.Component {
render() {
const store = createStore(LibraryReducer)
return (
<Provider store={store}>
<Drawer />
</Provider>
);
}
}
package.json
{
"name": "empty-project-template",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "webpack",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"build": "webpack --config webpack.config.js"
},
"dependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-transform-react-jsx-source": "^7.0.0",
"#expo/vector-icons": "^8.0.0",
"babel-preset-expo": "^5.0.0",
"create-webpack-config": "^0.2.1",
"db": "^1.1.1",
"expo": "^31.0.0",
"expo-asset": "^1.0.2",
"expo-constants": "^1.1.0",
"expo-core": "^1.2.0",
"expo-file-system": "^1.1.0",
"expo-font": "^1.1.0",
"expo-react-native-adapter": "^1.0.2",
"loose-envify": "^1.4.0",
"metro-react-native-babel-preset": "^0.50.0",
"native-base": "^2.8.0",
"pirates": "^4.0.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-native-calendars": "^1.20.0",
"react-native-dialog": "^5.3.0",
"react-native-elements": "^0.19.1",
"react-native-haptic-feedback": "^1.2.0",
"react-native-simple-dialogs": "^0.4.1",
"react-native-swipeout": "^2.3.6",
"react-native-vector-icons": "^5.0.0",
"react-native-view-overflow": "^0.0.3",
"react-navigation": "^2.12.1",
"react-redux": "^6.0.0",
"redux": "^4.0.1",
"watchman": "^1.0.0"
},
"devDependencies": {
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2"
}
}
.babelrc
{
"presets": ["module:metro-react-native-babel-preset"]
}
Any idea is welcome.
You probably fixed this long ago, but I had the same problem and fixed it by changing the minify setting to this line in .expo/settings.json:
"minify": false
It was previously set to true.

The node API for `babel` has been moved to `babel-core` React webpack

I'm trying to use my React native Android app working as a website.I'm following this tutorial
when i run webpack-dev-server it showing below error.
webpak.cofig.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'react']
}
}
]
},
resolve: {
alias: {
"react-native": "react-native-web"
}
}
};
entry.js
document.write(require('./../testreact/index.android.js'));
package.json
{
"name": "testreact",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "adb reverse tcp:8081 tcp:8081 && node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"babel": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"firebase": "^4.1.2",
"react": "^16.0.0-alpha.12",
"react-native": "0.45.1",
"react-native-router-flux": "^3.38.0",
"react-native-web": "0.0.104",
"react-navigation": "^1.0.0-beta.11",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
},
"devDependencies": {
"autoprefixer": "^7.1.1",
"babel-core": "^6.25.0",
"babel-jest": "20.0.3",
"babel-loader": "^7.1.0",
"babel-preset-react-native": "2.0.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
UPDATE
In case this hasn't been solved, in your webpack config file use babel-loader instead of babel-core.

Webpack not loading png's after url-loader is included in web pack.config

So this is a basic web pack problem that i've seen solved on here before but for some reason I can seem to get web packs to load png's properly.
I've read several of the solutions and have tried many of them unsuccessfully. I've tried requiring the png like <img src=require('someone.png')/> and i've tried importing the image and I still get the same error. The good thing is that it sees the file but it reads the file as a text file.
error
Module build failed: SyntaxError: Unexpected character '�' (1:0)
1 | �PNG
| ^
2 |
3 |
4 | IHD;0��sRGB���
IDATH
Webpacks code
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
// inline base64 URLs for <=8k images, direct URLs for the rest
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
Package.json
{
"name": "moonshot",
"version": "1.0.0",
"description": "Simple starter package for Redux with React and Babel support",
"proxy": "http://loclhost:3090/",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"author": "Austin Scott",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"file-loader": "^0.9.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"url-loader": "^0.5.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.15.0",
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.0.0",
"react-router": "^2.0.1",
"redux": "^3.0.4",
"redux-form": "^4.1.3",
"redux-thunk": "^2.1.0"
}
}
If you are getting above error while running the mocha test cases you need to add this to your test_helper.js
// Disable webpack-specific features for tests since
// Mocha doesn't know what to do with them.
['.css', '.scss', '.png', '.jpg'].forEach(ext => {
require.extensions[ext] = () => null;
});

Resources