Configure webpack for React to use multuple entries and outputs

Configure webpack for React to use multuple entries and outputs - javascript

I'm trying to config the server to have multiple entries and outputs. The app is using Zurb Foundation,jquery and React.
I want jquery and foundation not to be part of the bundle.js and also to have a separate bundle for react
Webpack validates, server starts but nothing is show and in console appears: "ReferenceError: webpackJsonp is not defined"
With a single entry is working, I don't know were is the error when trying to use multiple ones.
webpack.config
var webpack = require('webpack');
var path = require('path');
var CommonsChunkPlugin = require('./node_modules/webpack/lib/optimize/CommonsChunkPlugin');
module.exports = {
entry: {
main: ['script!jquery/dist/jquery.min.js',
'script!foundation-sites/dist/foundation.min.js',
'./dist/app.js' ],
react: ['react', 'react-dom']
},
externals: {
jquery: 'jQuery'
},
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery'
}),
new CommonsChunkPlugin('react', 'react.bundle.js')
],
output: {
filename: bundle.js'
},
devServer: {
inline: true,
contentBase: './build',
port: 3000
},
module: {
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
},
test: /\.js?$/,
exclude: /(node_modules)/
}
]
}
};
package.json
{
"name": "boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server",
"test": "karma start"
},
"author": "CBM",
"license": "MIT",
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2"
},
"devDependencies": {
"babel-core": "^6.16.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.25.0",
"foundation-sites": "^6.2.3",
"jquery": "^3.1.1",
"karma": "^1.3.0",
"karma-firefox-launcher": "^1.0.0",
"karma-mocha": "^1.2.0",
"karma-mocha-reporter": "^2.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"mocha": "^3.1.0",
"react-router": "^2.8.1",
"script-loader": "^0.7.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
}
}
babel.rc
{
"presets": ["es2015", "react"]
}

Specify an output for each entry:
entry: {
jquery: ['script!jquery/dist/jquery.min.js', 'script!foundation-sites/dist/foundation.min.js' ],
bundle: './dist/app.js',
react: ['react', 'react-dom']
},
output: {
filename: '[name].js'
}
If you want to add jquery and foundation libraries directly to the html just don't add the entries.
font: https://webpack.github.io/docs/multiple-entry-points.html

Related

ReferenceError: require is not defined #react

I made my own react component npm package and published in npm, now when import and use it in other CRA apps, i get this error when npm start in run in command line .
and in console:
My webpack.config.js file:
var webpack = require('webpack');
var path = require('path');
var nodeExternals = require('webpack-node-externals');
module.exports = {
target: 'web',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url?limit=512&&name=[path][name].[ext]?[hash]'
}
]
},
mode: 'development',
externals: {
'react': 'commonjs react'
}
};
My package.json file:
{
"name": "primetable1",
"version": "1.0.0",
"description": "A Datatable for react apps based on Primereact",
"main": "build/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --watch",
"build": "webpack"
},
"keywords": [
"primereact",
"primeicons"
],
"author": "Anish Arya",
"license": "ISC",
"peerDependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-runtime": "^6.26.0",
"css-loader": "^3.4.2",
"file-loader": "^5.0.2",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-hot-loader": "^4.12.19",
"react-scripts": "3.4.0",
"style-loader": "^1.1.3",
"webpack-cli": "^3.3.11",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"classnames": "^2.2.6",
"primeicons": "^2.0.0",
"primereact": "^3.4.0",
"react-transition-group": "^4.3.0"
}
}
My .babelrc file:
{
"presets": ["env"],
"plugins": [
"transform-object-rest-spread",
"transform-react-jsx",
"react-hot-loader/babel"
]
}
I followed this article to create and publish npm package:
https://codeburst.io/extracting-a-react-js-component-and-publishing-it-on-npm-2a49096757f5
How to solve this error?

The externals configuration seems wrong – you probably only need externals: [nodeExternals()] (from const nodeExternals = require("webpack-node-externals");).

3rd party Javascript and CSS files in Webpack. Strange behaviour

I am using the MERN stack. I had to use a 3rd party html admin template which has a lot of standard js and css files (jquery, bootstrap, datatables etc.). To integrate it with react, I created a "public" folder in the root directory of my project. I then configured Express to serve this folder as a static folder and placed the required css and html files inside this folder. To use them, I added the css in the head section of the index.html file and the js in the end of the body. It works when I run the server in development mode and there are no issues. When I run it in production mode, somehow the layout gets messed up. If I refresh it with CTRL + F5 it gets fixed but when I navigate to a new page it gets ruined again and I have to CTRL + F5 it again to display properly.
This is my webpack.config.dev.js
var webpack = require('webpack');
var cssnext = require('postcss-cssnext');
var postcssFocus = require('postcss-focus');
var postcssReporter = require('postcss-reporter');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: {
app: [
'eventsource-polyfill',
'webpack-hot-middleware/client',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
'./client/index.js',
],
vendor: [
'react',
'react-dom',
],
},
output: {
path: __dirname,
filename: 'app.js',
publicPath: 'http://0.0.0.0:8000/',
},
resolve: {
extensions: ['', '.js', '.jsx'],
modules: [
'client',
'node_modules',
],
},
module: {
loaders: [
{
test: /\.css$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',
}, {
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
}, {
test: /\.jsx*$/,
exclude: [/node_modules/, /.+\.config.js/],
loader: 'babel',
}, {
test: /\.(jpe?g|gif|png|svg)$/i,
loader: 'url-loader?limit=10000',
}, {
test: /\.json$/,
loader: 'json-loader',
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
filename: 'vendor.js',
}),
new webpack.DefinePlugin({
'process.env': {
CLIENT: JSON.stringify(true),
'NODE_ENV': JSON.stringify('development'),
}
}),
],
postcss: () => [
postcssFocus(),
cssnext({
browsers: ['last 2 versions', 'IE > 10'],
}),
postcssReporter({
clearMessages: true,
}),
],
};
This is my webpack.config.prod.js
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ManifestPlugin = require('webpack-manifest-plugin');
var ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
var cssnext = require('postcss-cssnext');
var postcssFocus = require('postcss-focus');
var postcssReporter = require('postcss-reporter');
var cssnano = require('cssnano');
module.exports = {
devtool: 'hidden-source-map',
entry: {
app: [
'./client/index.js',
],
vendor: [
'react',
'react-dom',
]
},
output: {
path: __dirname + '/dist/client/',
filename: '[name].[chunkhash].js',
publicPath: '/',
},
resolve: {
extensions: ['', '.js', '.jsx'],
modules: [
'client',
'node_modules',
],
},
module: {
loaders: [
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?localIdentName=[hash:base64]&modules&importLoaders=1!postcss-loader'),
}, {
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
}, {
test: /\.jsx*$/,
exclude: /node_modules/,
loader: 'babel',
}, {
test: /\.(jpe?g|gif|png|svg)$/i,
loader: 'url-loader?limit=10000',
}, {
test: /\.json$/,
loader: 'json-loader',
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
filename: 'vendor.js',
}),
new ExtractTextPlugin('app.[chunkhash].css', { allChunks: true }),
new ManifestPlugin({
basePath: '/',
}),
new ChunkManifestPlugin({
filename: "chunk-manifest.json",
manifestVariable: "webpackManifest",
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
}
}),
],
postcss: () => [
postcssFocus(),
cssnext({
browsers: ['last 2 versions', 'IE > 10'],
}),
cssnano({
autoprefixer: false
}),
postcssReporter({
clearMessages: true,
}),
],
};
Package.json
{
"name": "",
"version": "2.0.0",
"description": "",
"scripts": {
"test": "cross-env NODE_ENV=test PORT=8080 MONGO_URL=mongodb://localhost:27017/mern-test node_modules/.bin/nyc node --harmony-proxies node_modules/.bin/ava",
"watch:test": "npm run test -- --watch",
"cover": "nyc npm run test",
"check-coverage": "nyc check-coverage --statements 100 --branches 100 --functions 100 --lines 100",
"start": "cross-env BABEL_DISABLE_CACHE=1 NODE_ENV=development nodemon index.js",
"start:prod": "cross-env NODE_ENV=production node index.js",
"bs": "npm run clean && npm run build && npm run build:server && npm run start:prod",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
"build:server": "cross-env NODE_ENV=production webpack --config webpack.config.server.js",
"clean": "rimraf dist",
"slate": "rimraf node_modules && npm install",
"lint": "eslint client server"
},
"pre-commit": [
"lint",
"test"
],
"repository": {
"type": "git",
"url": "git+https://github.com/Hashnode/mern-starter.git"
},
"bugs": {
"url": "https://github.com/Hashnode/mern-starter/issues"
},
"homepage": "https://github.com/Hashnode/mern-starter#readme",
"author": "Prashant Abhishek <prashant.abhishek7g#gmail.com>, Mayank Chandola <imayankchd#gmail.com>, Sandeep Panda <sandeep#hashnode.com>, Syed Fazle Rahman <fazle#hashnode.com>, Alkshendra Maurya <alkshendra#hashnode.com>",
"license": "MIT",
"dependencies": {
"babel-core": "^6.9.1",
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.15.1",
"compression": "^1.6.2",
"cross-env": "^1.0.8",
"cuid": "^1.3.8",
"express": "^4.13.4",
"intl": "^1.2.4",
"intl-locales-supported": "^1.0.0",
"isomorphic-fetch": "^2.2.1",
"jsonwebtoken": "^8.2.1",
"limax": "^1.3.0",
"mongoose": "^4.4.20",
"morgan": "^1.9.0",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"react": "^15.1.0",
"react-contexify": "^3.0.0",
"react-dom": "^15.1.0",
"react-helmet": "^3.1.0",
"react-intl": "^2.1.2",
"react-notify-toast": "^0.4.0",
"react-redux": "^4.4.5",
"react-router": "^2.4.1",
"react-router-dom": "^4.2.2",
"react-toastify": "^4.0.1",
"redux": "^3.5.2",
"redux-thunk": "^2.1.0",
"sanitize-html": "^1.11.4"
},
"devDependencies": {
"ava": "^0.15.2",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-plugin-webpack-loaders": "^0.7.0",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-es2015-native-modules": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-optimize": "^1.0.1",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.9.0",
"chai": "^3.5.0",
"chunk-manifest-webpack-plugin": "0.1.0",
"coveralls": "^2.11.9",
"css-loader": "^0.23.1",
"css-modules-require-hook": "^4.0.1",
"cssnano": "^3.7.0",
"enzyme": "^2.3.0",
"eslint": "^2.11.1",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-ava": "^2.4.0",
"eslint-plugin-import": "^1.8.1",
"eslint-plugin-jsx-a11y": "^1.3.0",
"eslint-plugin-react": "^5.1.1",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"jsdom": "^9.2.1",
"json-loader": "^0.5.4",
"mock-css-modules": "^1.0.0",
"mockgoose": "^6.0.3",
"nock": "^8.0.0",
"nodemon": "^1.9.2",
"null-loader": "^0.1.1",
"nyc": "^6.4.4",
"postcss-cssnext": "^2.6.0",
"postcss-focus": "^1.0.0",
"postcss-loader": "^0.9.1",
"postcss-reporter": "^1.3.3",
"pre-commit": "^1.1.3",
"react-addons-test-utils": "^15.1.0",
"react-hot-loader": "^3.0.0-beta.2",
"redux-ava": "^2.0.0",
"redux-devtools": "^3.3.1",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.0.11",
"rimraf": "^2.5.2",
"script-loader": "^0.7.2",
"sinon": "^1.17.4",
"style-loader": "^0.13.1",
"supertest": "^1.2.0",
"url-loader": "^0.5.7",
"webpack": "2.1.0-beta.8",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^2.1.0-beta.0",
"webpack-externals-plugin": "^1.0.0",
"webpack-hot-middleware": "^2.10.0",
"webpack-manifest-plugin": "^1.0.1"
},
"engines": {
"node": ">=4"
},
"ava": {
"files": [
"client/**/*.spec.js",
"server/**/*.spec.js"
],
"source": [
"client/**/*.js",
"server/**/*.js"
],
"failFast": true,
"babel": "inherit",
"require": [
"./server/util/setup-test-env.js"
]
},
"nyc": {
"include": [
"client/**/*.js",
"server/**/*.js"
],
"exclude": [
"**/*.spec.js",
"client/reducers.js",
"client/store.js",
"client/routes.js",
"server/util/setup-test-env.js",
"server/util/test-helpers.js",
"server/config.js",
"server/dummyData.js"
],
"reporter": [
"lcov",
"text",
"html"
]
}
}
Can this be fixed?
EDIT: It seems that the page sometimes loads correctly even without CTRL + F5 refresh. My gut tells me the issue lies with the order that the JS files are loaded. Any tips on how to keep the loading order the same in dev and prod?

In case of webpack.config.prod.js If you see this part of code
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?localIdentName=[hash:base64]&modules&importLoaders=1!postcss-loader'), 42. loader: 'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',}
Just remove ExtractTextPlugin.extract and modify this part of code to
'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader'

How to remove ESlint error no-unresolved from importing 'react'

no-unresolved https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md
After installing eslint-import-resolver-webpack
My .eslintrc config
{
"extends": "airbnb",
"rules": {
"comma-dangle": ["error", "never"],
"semi": ["error", "always"],
"react/jsx-filename-extension": 0,
"react/prop-types": 0,
"react/no-find-dom-node": 0,
"jsx-a11y/label-has-for": 0
},
"globals": {
"document": true,
"window": true
},
"env": {
"jest": true
},
"settings": {
"import/resolver": "webpack"
}
}
My package.json
{
"name": "coinhover",
"version": "0.0.1",
"main": "index.js",
"author": "Leon Gaban",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server",
"dev": "webpack-dev-server",
"production": "webpack -p",
"build": "webpack -p",
"test": "eslint app && jest",
"test:fix": "eslint --fix app"
},
"now": {
"name": "coinhover",
"engines": {
"node": "7.4.x"
},
"alias": "coinhover.io"
},
"jest": {
"moduleNameMapper": {},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
]
},
"dependencies": {
"axios": "^0.16.1",
"babel-runtime": "6.11.6",
"jsonwebtoken": "^7.4.1",
"prop-types": "^15.5.10",
"ramda": "^0.24.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-hot-loader": "next",
"react-redux": "^5.0.5",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.5.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.4",
"enzyme": "^2.8.2",
"enzyme-to-json": "^1.5.1",
"eslint": "^4.3.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.1.0",
"extract-text-webpack-plugin": "^2.1.0",
"html-webpack-plugin": "^2.28.0",
"jest": "^20.0.4",
"node-sass": "^4.5.3",
"react-addons-test-utils": "15.0.0-rc.2",
"react-test-renderer": "^15.5.4",
"sass-loader": "^6.0.5",
"style-loader": "^0.18.1",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
}
}
Webpack
import fs from 'fs'
import webpack from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import path from 'path'
import chalk from 'chalk'
const coinhover = path.resolve(__dirname, "coinhover")
const src = path.resolve(__dirname, "public/src")
const log = console.log
// https://gist.github.com/leongaban/dc92204454b3513e511645af98107775
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/public/src/index.html',
filename: 'index.html',
inject: 'body'
})
const ExtractTextPluginConfig = new ExtractTextPlugin({
filename: "coinhover.css",
disable: false,
allChunks: true
})
const CopyWebpackPluginConfig = new CopyWebpackPlugin([{ from: "public/src/static", to: "static" }])
const PATHS = {
app: src,
build: coinhover,
}
const LAUNCH_COMMAND = process.env.npm_lifecycle_event
const isProduction = LAUNCH_COMMAND === 'production'
process.env.BABEL_ENV = LAUNCH_COMMAND
const productionPlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
const base = {
entry: [
PATHS.app
],
output: {
path: PATHS.build,
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"],
publicPath: coinhover
})
}
],
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
},
resolve: {
modules: ['node_modules', path.resolve(__dirname, 'public/src')]
}
}
const developmentConfig = {
devServer: {
publicPath: "",
contentBase: path.join(__dirname, "dist"),
// hot: false,
quiet: true,
inline: true,
compress: true,
stats: "errors-only",
open: true
},
devtool: 'cheap-module-inline-source-map',
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig,
// new webpack.HotModuleReplacementPlugin()
]
}
const productionConfig = {
devtool: 'cheap-module-source-map',
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig,
productionPlugin
]
}
log(`${chalk.magenta('🤖 ')} ${chalk.italic.green('npm run:')} ${chalk.red(LAUNCH_COMMAND)}`)
export default Object.assign({}, base,
isProduction === true ? productionConfig : developmentConfig
)

You can add an option to ignore case:
"rules": {
"import/no-unresolved": [
2,
{ "caseSensitive": false }
]
}
This thread at github also describes how the linter was checking case for parts of the path which come before the folder containing package.json. If you for example have the path:
C:/Workspace/app and you navigate to it using cd C:/workspace/app (lowercase workspace), the linter would also give an error on the imports. Looks like it should now be fixed, but perhaps you are still using an older version.

Try installing eslint-import-resolver-webpack and adding this to your .eslintrc:
"settings": {
"import/resolver": "webpack"
}

Try
resolve: {
modules: [path.resolve(__dirname, 'public/src'), 'node_modules', path.resolve('node_modules')],
}

it helped me
If you would like to enable this rule, then:
Enable the rule within your config: 'import/no-unresolved': 'error'
Install and configure the TypeScript import resolver: eslint-import-resolver-typescript

The problem is that your webpack config is written in ES6 format, which doesn't play well with eslint-import-resolver-webpack.
So, you either refactor your webpack.config.js using ES5 syntax, or you get rid of eslint-import-resolver-webpack.
See here for the full solution: eslint plugin docs

webpack cannot find module "fs"

I have a project that's using webpack and electron. I updated my app to use the latest version of electron as it was using electron-prebuilt. Since updating to the latest version I am now unable to compile my app due to this error. I've tried some suggestions from other SO posts which suggest editing webpack.config and added
node: {
fs: 'empty'
},
I still get the same fs not found error. I also tried to set the target to electron, however when I do that I get a string of errors and none of my modules load, is there a workaround available for this issue? I'm not sure if this is a webpack related issue or an electron issue.
Here's my webpack.config
var webpack = require('webpack');
//Loaders & Webpack config
module.exports = {
entry: {
app: ['webpack/hot/dev-server', './app/app.js'],
},
output: {
path: './app/dist',
filename: 'bundle.js',
publicPath: 'http://localhost:8080/dist/'
},
devServer: {
contentBase: './app',
publicPath: 'http://localhost:8080/dist/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015']
}
},
{ test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.png$/,
loader: "file-loader"
},
{
test: /\.jpg$/,
loader: "file-loader"
}
]
},
node: {
fs: 'empty'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(new RegExp("^(fs|ipc)$"))
],
}
package.json
{
"name": "factory",
"productName": "Factory",
"description": "",
"author": ,
"version": "0.1.0",
"main": "main.js",
"devDependencies": {
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"bootstrap": "^4.0.0-alpha.4",
"bootstrap-css": "^4.0.0-alpha.5",
"bootstrap-sass": "^3.3.7",
"css-loader": "^0.23.1",
"electron-packager": "^5.2.1",
"electron-rebuild": "^1.1.3",
"exports-loader": "^0.6.4",
"file-loader": "^0.8.5",
"imports-loader": "^0.7.1",
"node-libs-browser": "^1.0.0",
"node-sass": "^4.5.2",
"resolve-url-loader": "^2.0.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.14.1"
},
"scripts": {
"start": "./node_modules/.bin/electron .",
"watch": "./node_modules/.bin/webpack-dev-server",
"build": "electron-packager ./ --platform=darwin,win32 --arch=x64 --prune --overwrite"
},
"dependencies": {
"dragula": "^3.7.2",
"electron-prebuilt": "^0.37.2",
"electron-tabs": "^0.6.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-onclickout": "^2.0.4",
"react-router": "^2.4.0",
"redux": "^3.6.0"
}
}

Set target: 'electron-main' in your Webpack configuration.

I had a similar issue when working on NWjs with webworkers. First, make sure you set the right target option to "node-webkit", "webworker", "node", etc. Then, annotate the module like this:
externals:{
"fs": "commonjs fs"
}
This will tell webpack to load it as a module, as opposed to assuming the dependency is already in the environment.
webpack nwjs

React app stopped reporting errors in the console such as usage of undefined variables, silently fails

I'm not sure what happened over the course of development, but I'm using React 0.13 with Webpack, and whenever I attempt to use an undefined variable, it fails to execute past that point. For example, even a simple console.log(anundefinedvariable); fails to execute (and no lines after that get run.) Nothing shows in the console, which makes it very difficult to debug.
I don't know where to begin to solve the issue. Where should I start?
Edit: actually now that I think about it, I might have done an npm update command -- maybe this somehow introduced this problem. Not sure what to do, still.
Edit2: My package.json:
{
"name": "app",
"version": "0.0.0",
"description": "",
"main": "src/index.js",
"directories": {
"doc": "docs"
},
"scripts": {
"start": "webpack-dev-server",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js 'test/**/*.#(js|jsx)'"
},
"author": "Name",
"license": "ISC",
"dependencies": {
"babel-plugin-object-assign": "^1.2.1",
"firebase": "^2.2.9",
"fireproof": "^3.0.3",
"immutable": "^3.7.5",
"lodash": "^3.10.1",
"q": "^1.4.1",
"react": "^0.13.3",
"react-redux": "^2.1.2",
"react-router": "^1.0.0-rc1",
"redux": "^3.0.0",
"redux-thunk": "^1.0.0"
},
"devDependencies": {
"babel-core": "^5.8.24",
"babel-loader": "^5.3.2",
"chai": "^3.3.0",
"chai-immutable": "^1.3.0",
"jsdom": "^3.1.2",
"mocha": "^2.3.3",
"react-hot-loader": "^1.3.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.11.0"
}
}
My webpack config:
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/js/index.jsx'
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot!babel?plugins=babel-plugin-object-assign'
}]
},
resolve: {
modulesDirectories: ["src/js/", "web_modules", "node_modules"],
extensions: ['', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};

Develop Reference

JavaScript is the programming language of the Web.

Configure webpack for React to use multuple entries and outputs - javascript

Related

ReferenceError: require is not defined #react

3rd party Javascript and CSS files in Webpack. Strange behaviour

How to remove ESlint error no-unresolved from importing 'react'

webpack cannot find module "fs"

React app stopped reporting errors in the console such as usage of undefined variables, silently fails

Categories

Resources