We Keep Coding

variables I defined in webpack.DefinePlugin is undefined

webpack.config.js
const path = require('path')
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|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ["#babel/preset-env", "#babel/preset-react"],
plugins: ["#babel/plugin-proposal-class-properties"]
}
}
},
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
},
plugins: [
new webpack.DefinePlugin({
APIHOST: JSON.stringify('test'),
BLOCKCHAINHOST: JSON.stringify('test')
}),
new HtmlWebpackPlugin({
template: './src/template.html'
}),
]
}
I defined 2 variables APIHOST and BLOCKCHAINHOST and I tried to console log this in reactjs App.js like so
componentDidMount() {
console.log(APIHOST)
}
The error I'm getting is APIHOST is undefined. I'm not sure what to do here, I've tried adding single quotes for webpack.defineplugin so it looks like 'APIHOST': JSON.stringify('test') but it's still giving me the same error.

You can do like this
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
})
],
Then in your code
process.env.NODE_ENV
The version I'm using is
"webpack": "^4.29.6"

It looks like this is a known issue:
https://github.com/webpack/webpack/issues/1977
DefinePlugin doesn't work inside React Components
Fixed later on in Webpack 3:
This is fixed. Since webpack 3, the parser now fully understands ES6 semantics.
What version are you using? Does it make sense to upgrade?

Require not defined in script tag

I am writing an electron app using react as for the UI and webpack for bundling. Webpack is configured right now for the react part of the application as follows:
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
mode: 'development',
entry: './src/index.tsx',
target:'node',
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, 'build')
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: 'ts-loader'
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader'
}
]
},
{
test: /\.css$/,
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
test: /\.scss$/,
use: [{
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "sass-loader", options: {
sourceMap: true
}
}]
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
plugins: [
new HtmlWebPackPlugin({
template: "./index.html",
filename: "./index.html"
}),
new CopyWebpackPlugin([{ from: 'public',ignore: ['*.html'] }])
],
devtool: 'eval-source-map'
}
In my index.html I need to use the following script tag for electron's rendering process :
<script>
require('build/bundle.js')
</script>
When I run webpack-dev-server everything compiles without error, but when I open chrome dev tools I see this error :
Uncaught ReferenceError: require is not defined
at (index):12
I had to target node in my webpack.config to make electron work so I assume the require function works in browser as well since if I were to create an electron app in a pure node.js environment(without webpack and react) it works without any additional configuration. So I guess there is an issue with my webpack configuration, but I can't find any useful resource online unfortunately. Can anyone help me out? Thanks in advance!

Electron is basically a chromium browser connected to a node process through « IPC ».
This means you don’t have require available in the browser.
You need to import your script like this:
<script src="/build/bundle.js"></script>
And also you need to change the target from node to electron-renderer for the browser code.
If you also need to build code for the node side you need to add the electron-main target.
See https://webpack.js.org/configuration/

Navigator undefined on React Typescript Firebase project

I've been googling for a couple hours now and can't seem to resolve my issue.
I have a webpack/React/Typescript/Mobx setup and am attempting to use firebase.
Here is my webpack config: (boilerplate from this repo)
var webpack = require('webpack');
var path = require('path');
// variables
var isProduction = process.argv.indexOf('-p') >= 0;
var sourcePath = path.join(__dirname, './src');
var outPath = path.join(__dirname, './dist');
// plugins
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
module.exports = {
context: sourcePath,
entry: {
main: './main.tsx'
},
output: {
path: outPath,
filename: 'bundle.js',
chunkFilename: '[chunkhash].js',
publicPath: '/'
},
target: 'web',
resolve: {
extensions: ['.js', '.ts', '.tsx'],
// Fix webpack's default behavior to not load packages with jsnext:main module
// (jsnext:main directs not usually distributable es6 format, but es6 sources)
mainFields: ['module', 'browser', 'main'],
alias: {
app: path.resolve(__dirname, 'src/app/'),
assets: path.resolve(__dirname, 'src/assets/')
}
},
module: {
rules: [
// .ts, .tsx
{
test: /\.tsx?$/,
use: [
isProduction
? 'ts-loader'
: {
loader: 'babel-loader',
options: {
babelrc: false,
plugins: ['react-hot-loader/babel']
}
},
'ts-loader'
],
// : ['babel-loader?plugins=react-hot-loader/babel&presets=', 'ts-loader'],
exclude: /node_modules/
},
// css
{
test: /\.css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
query: {
modules: true,
sourceMap: !isProduction,
importLoaders: 1,
localIdentName: '[local]__[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-import')({ addDependencyTo: webpack }),
require('postcss-url')(),
require('postcss-cssnext')(),
require('postcss-reporter')(),
require('postcss-browser-reporter')({
disabled: isProduction
})
]
}
}
]
})
},
{
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader']
},
// static assets
{ test: /\.html$/, use: 'html-loader' },
{ test: /\.(png|jpg)$/, use: 'url-loader?limit=10000' },
{ test: /\.webm$/, use: 'file-loader' }
]
},
optimization: {
splitChunks: {
name: true,
cacheGroups: {
commons: {
chunks: 'initial',
minChunks: 2
},
vendors: {
test: /[\\/]node_modules[\\/]/,
chunks: 'all',
priority: -10
}
}
},
runtimeChunk: true
},
plugins: [
new WebpackCleanupPlugin(),
new ExtractTextPlugin({
filename: 'styles.css',
disable: !isProduction
}),
new HtmlWebpackPlugin({
template: 'assets/index.html'
})
],
devServer: {
contentBase: sourcePath,
hot: true,
inline: true,
historyApiFallback: {
disableDotRule: true
},
stats: 'minimal'
},
devtool: 'cheap-module-eval-source-map',
node: {
// workaround for webpack-dev-server issue
// https://github.com/webpack/webpack-dev-server/issues/60#issuecomment-103411179
fs: 'empty',
net: 'empty'
}
};
Just by including firebase in my app i relentlessly end up with this error:
Uncaught TypeError: Cannot read property 'navigator' of undefined auth.esm.js?69b5:10
I have tested by including a simple component like so:
import * as React from 'react';
import * as Styles from './styles.css';
import 'app/utils/FirebaseUtil';
interface TestProps {}
export const Test: React.StatelessComponent<TestProps > = () => (
<div className={Styles.root}>
{'Hello World'}
</div>
);
FirebaseUtil:
import * as firebase from 'firebase';
const config = {
apiKey: '**my key here**',
authDomain: '** my domain here **'
};
firebase.initializeApp(config);
export const fbAuth = firebase.auth;
No matter what I seem to do I get the navigator error. Even if i dont export the auth object. As far as I can tell its related to babel-loader adding strict-mode according to this SO question, i think? All other related searches seem to have to do with firebase-ui, which i am not using in any way.
But I have no idea how he manages to turn off strict mode, not to mention the OP is not using typescript and I am using ts-loader in this case. I can't for the life of me figure out how to get it working. Aside from all of this if I do try use the firebase object for auth() for example I get a bunch of warnings from webpack about auth not existing on the firebase object. Totally stumped.

So in case anyone else runs into this problem. It appears it was a package version issue. Im assuming that the package versions specifically included in the boilerplate i used didn't play well with firebase.
I updated typescript, react-hot-loader, and most likely the issue webpack from version 3.0.4 to 4.12.1 and things seem to be working ok now. Also with the updates I now import firebase like so:
import firebase from '#firebase/app';
import '#firebase/auth';
Hope this helps someone.

In my case I fixed this importing functions
import firebase from 'firebase/app'
import 'firebase/functions'
import 'firebase/analytics'

Webpack bundles tests (enzyme / jest) in the production env

I have issue with Webpack building production bundle with test files + test libs included.
In this case it is Enzyme and Jest which we use.
Webpack version 3.10.0
Webpack.build.js
const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = function() {
return {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, '../build'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: [
/node_modules/,
/__snapshots__/,
/test-util/,
],
loader: 'babel-loader'
},
{
test: /\.scss$/,
use: [
{
loader: 'isomorphic-style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
]
},
plugins: [
new UglifyJsPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}
}),
]
}
};
Here is the file structure
I have tried to workaround the issue by placing Enzyme as external resource in webpack.
externals: {
'enzyme': 'enzyme',
'enzyme-adapter-react-16': 'enzyme-adapter-react-16',
}
That does exclude it from build but (it is workaround) it still builds the snapshot files
I have tried to make "test" regex of babel-loader more specific and exclude test files but it failed.
This is new project and I spent whole day trying to make it bundle only what is necesary. Drained all of my know-how, my google know-how and know-how of the poeple I know or I work with. Hope that SO will be smarter :)

Webpack2: make external not mandatory for all entry points

Given the following existing webpack.config.babel.js that's working fine for this application, I would like to add another entry (widget), but if I do so, it requires all external items to be loaded in my HTML page even when I don't need it with my new feature (google, leaflet...) on this part of the application.
widget.js:10488 Uncaught ReferenceError: google is not defined
The plugin & resolve & output existing sections are applying to the new entry js I want to add, so it's good. Only the external is bothering me.
What's the best way to resolve this ? I have very little knowledge of webpack. Thanks.
import path from 'path';
import webpack from 'webpack';
import eslintFormatter from 'eslint-friendly-formatter';
export default (env) => {
const isProd = env ? !!env.release : false;
const isVerbose = env ? !!env.verbose : true;
process.env.NODE_ENV = isProd ? 'production' : 'development';
return {
entry: {
showcase: path.resolve(process.cwd(), 'src/AppBundle/Resources/private/js/showcase/index.js'),
// widget: path.resolve(process.cwd(), 'src/AppBundle/Resources/private/js/widget/index.js'),
},
output: {
path: path.resolve(process.cwd(), 'web/dist/components'),
filename: '[name].js',
publicPath: '/',
},
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
Translator: 'node_modules/bazinga-translator/js',
},
},
externals: {
vue: 'Vue',
vuex: 'Vuex',
google: 'google',
leaflet: 'L',
translator: 'Translator',
markerclustererplus: 'MarkerClusterer',
lodash: '_',
routing: 'Routing',
},
module: {
rules: [
{
test: /\.(js|vue)$/,
enforce: 'pre',
include: path.resolve(process.cwd(), 'src/AppBundle/Resources/private/js'),
use: {
loader: 'eslint-loader',
options: {
formatter: eslintFormatter,
},
},
},
{
test: /\.js$/,
include: path.resolve(process.cwd(), 'src/AppBundle/Resources/private/js'),
use: 'babel-loader',
},
{
test: /\.vue$/,
use: 'vue-loader',
},
],
},
plugins: [
// Define environment variables
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
// No compile changes on errors
...isProd ? [] : [new webpack.NoEmitOnErrorsPlugin()],
// JavaScript code minimizing
...isProd ? [
// Minimize all JavaScript output of chunks
// https://github.com/mishoo/UglifyJS2#compressor-options
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: isVerbose,
},
}),
] : [],
],
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
},
};
};

Externals is only configuration suppose modules will be exists but webpack does not call it itself. It is possible alredy existed entry loaded togather with all externals and worked fine with no errors. But new entry loaded without loading externals and new entry make (or some else) call not loaded externals. Check you possible have dependencies requiers some externals or your newely added entry make call some of externals (which actually is not loaded in second case).