I have a gulpfile from which I'm initiating webpack bundling. The webpack configuration has an alias defined that uses process.env.NODE_ENV as shown below
.
.
resolve: {
modulesDirectories: ["node_modules", "js", "jsx"],
extensions: ["", ".js", ".jsx"],
alias: {
config: path.join(__dirname, ('config.' + process.env.NODE_ENV + '.js'))
}
}..
In the gulpfile, I have 2 tasks that execute in sequence
set-env that sets the environment variable using gulp-env as follows
gulpEnv({
vars: {
NODE_ENV: 'dev'
}
});
webpack task that depends on the previous task and executes only when the first is completed
Here the variable is not getting injected properly it seems. The file name is getting resolved as config.undefined.js. Is there something wrong with what I'm doing?
I changed my approach it to something like this
Webpack
var NODE_ENV = process.env.NODE_ENV;
var config = {
.
.
resolve: {
modulesDirectories: ["node_modules", "js", "jsx"],
extensions: ["", ".js", ".jsx"],
alias: {
//<envt> will be injected by gulp
config: config: path.join(__dirname, ('config.<envt>.js'))
}
}
.
.
.
}
//If webpack is directly invoked with NODE_ENV, replacement will happen here
if (NODE_ENV) {
config['resolve']['alias']['config'] = config['resolve']['alias']['config'].replace(/<envt>/, NODE_ENV);
}
module.exports = config;
Gulp
Inside set-env instead of setting using gulp-env, I simply set a global variable NODE_ENV='dev'
Inside webpack task, I'm doing webpackConfig['resolve']['alias']['config'] = webpackConfig['resolve']['alias']['config'].replace(/<envt>/, NODE_ENV);
This worked for me
Related
I am trying to use webpack to bundle up a Node JS project, for the benefits it offers in terms of minimising the size of the code etc. and bundling together all of the dependencies.
My webpack job is failing with the following error:
ERROR in bundle.js from Terser
Invalid function parameter [bundle.js:186393,23]
This is my webpack.config file:
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
target: "node",
mode: "production",
entry: {
app: ["./src/vitaq_client.js"]
},
// https://webpack.js.org/configuration/node/
// node: {
// global: false,
// __filename: true,
// __dirname: true,
// },
module: {
// https://github.com/ivan-aksamentov/reactlandia-bolerplate-lite/issues/5#issuecomment-413306341
exprContextCritical: false,
rules: [
{
test: /\.node$/,
use: 'node-loader'
},
{
test: /coffee/,
use: 'node-loader'
},
{
test: /\.coffee$/,
use: [ 'coffee-loader' ]
},
// {
// test: /\.map$/,
// use: ["source-map-loader"],
// enforce: "pre"
// },
]
},
plugins: [
new CleanWebpackPlugin(),
],
output: {
path: path.resolve(__dirname, "./build"),
filename: "bundle.js"
},
};
and this is the command I am using to run it:
webpack --config webpack.config.js
From the searching I have done it seems that there is a Terser plugin for code minification, but as you can see from my config file I am not loading that plugin, so does webpack use that plugin by default? If not how could I be getting an error from Terser ?
If I set the mode to "development" in the config file, then I do not get the problem, but I suspect that is because development code would not get minified.
I am a bit stuck as to how I set about debugging this problem - are there ways of getting more output from Webpack. I have tried using the --json > compilation-stats.json command line argument when I invoke webpack, but I get a huge output file (43Mb) and I can't find anything in all of that to help.
Any suggestions would be gratefully received.
This is an error with assignment where you have an invalid function parameter at the given line of bundle.js.
You can solve this by not minimizing the webpack build:
optimization: {
minimize: false
}
Then finding the assignment error line from the error output, in the non minified bundle.
Invalid function parameter [bundle.js:186393,23]
Hope this helps someone else.
Frankly, I've tried it all. I'm not a total whiz with Webpack, however I seem to be getting along pretty well over the years with configuring new projects.
What I cannot seem to do now is set up the NewRelic service into an existing Node/Typescript/Express/Webpack application.
As it stands, my app gets nicely bundled to a single file in my /dist folder and runs quick and nimble. Seems like this 'node agent' put out by New Relic doesn't play well with Typescript imports.
Webpack Config
const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const NodemonPlugin = require ('nodemon-webpack-plugin');
module.exports = (env = {}) => {
const config = {
entry: ['./src/app.ts'],
mode: env.development ? 'development' : 'production',
target: 'node',
devtool: env.development ? 'inline-source-map' : false,
resolve: {
extensions: ['.ts', '.js'],
modules: ['node_modules', 'src', 'package.json'],
},
module: {
rules: [
{
test: /\.ts$/,
use: ['ts-loader', 'eslint-loader'],
// exclude: /node_modules/,
},
],
},
plugins: [],
externals: [ 'newrelic', nodeExternals() ]
};
if (env.nodemon) {
config.watch = true;
config.plugins.push(new NodemonPlugin())
}
return config;
};
there exists a standard /project_root/.newrelic file
CircleCi picks up this project up and runs "build:ci" script from package.json ==> "webpack"
output is /dist/main.js
references
https://docs.newrelic.com/docs/agents/nodejs-agent/installation-configuration/install-nodejs-agent
https://docs.newrelic.com/docs/agents/nodejs-agent/installation-configuration/nodejs-agent-configuration
https://discuss.newrelic.com/t/node-agent-fails-with-webpack/24874
Your first line of the starting point of the app should be
import newrelic from 'newrelic';
Of course, run npm install newrelic --save first
Then, create a newrelic.js file on the root of the repo (outside of src).
Then you put in the details like:
'use strict'
exports.config = {
app_name: ['appName'],
license_key: '1234567890',
allow_all_headers: true,
attributes: {
exclude: [
'request.headers.cookie',
'request.headers.authorization',
'request.headers.proxyAuthorization',
'request.headers.setCookie*',
'request.headers.x*',
'response.headers.cookie',
'response.headers.authorization',
'response.headers.proxyAuthorization',
'response.headers.setCookie*',
'response.headers.x*'
]
}
}
I'm using yarn workspaces where the root directory has a package directory with all my repos. Each repo has its own node_modules directory containing its dependencies. The root node_modules directory contains all the dev dependencies for the whole project as well as all other dev related things such as webpack.config files. Webpack uses hot module reload for the express server package.
The problem I have is, how to configure webpack externals to exclude all node_modules directories through the whole project, not just in the root?
webpack-node-externals doesn't seem to work given this scenario.
Error message:
WARNING in ./packages/servers/express/node_modules/colors/lib/colors.js
127:29-43 Critical dependency: the request of a dependency is an expression
WARNING in ./packages/servers/express/node_modules/express/lib/view.js
79:29-41 Critical dependency: the request of a dependency is an expression
Webpack config:
const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const StartServerPlugin = require('start-server-webpack-plugin');
module.exports = {
entry: [
'babel-polyfill',
'webpack/hot/poll?1000',
path.join(__dirname, '../packages/servers/express/server/index.js')
],
watch: true,
target: 'node',
externals: [
nodeExternals({
whitelist: ['webpack/hot/poll?1000']
})
],
resolve: {
alias: {
handlebars: 'handlebars/dist/handlebars.js'
}
},
module: {
rules: [
{
test: /\.js?$/,
use: 'babel-loader',
exclude: /node_modules/
}
]
},
plugins: [
new StartServerPlugin('server.js'),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin({
'process.env': { BUILD_TARGET: JSON.stringify('server') }
})
],
output: {
path: path.join(__dirname, '../packages/servers/express/.build'),
filename: 'server.js'
}
};
If using yarn workspaces with webpack-node-externals a better solution than setting modulesFromFile: true is to use the following externals setting in your webpack config:
externals: [
nodeExternals(),
nodeExternals({
modulesDir: path.resolve(__dirname, 'path/to/root/node_modules'),
}),
],
Essentially using two instances of nodeExternals. 1 for the package node_modules and one for the root node_modules.
Thanks to #blackxored I was able to fix it on my project.
In your webpack config file do the following:
import nodeExternals from 'webpack-node-externals'
Then add
externals: [
nodeExternals({
modulesFromFile: true,
}),
],
Yarn workspaces hoist compatible modules to the root node_modules directory leaving any incompatible (different semver, etc.) modules with the dependent workspace's node_modules directory. If a package is requested without using a relative path it is either native, from node_module's, or possibly a symlinked package from one of your workspaces. You probably want all of those packages to be external.
how to configure webpack externals to exclude all node_modules directories through the whole project, not just in the root?
I would try using a function with webpack's external option. You are passed the context of the require, the name of the module requested, and a callback to indicate whether this particular import (require) should be considered external.
externals: [
(ctx, req, cb) => {
if (!/node_modules/.test(ctx) && req[0] !== '.') {
// Assumes you have defined an "entries" variable
let notAnEntry = (path) => {
return Object.keys(entries).every((entry) => {
return entries[entry] !== path
});
};
if (notAnEntry(require.resolve(req))) {
// This module is external in a commonjs context
return cb(null, `commonjs ${req}`);
}
}
cb();
}
]
Currently I'm building out a REACT app on my local machine and deploying it's production build to Elastic Beanstalk. It is built using Webpack.
In index.js (server side) I use env variables such as: process.env.PORT (Defined in Elastic Beanstalk), when Webpack builds it out, these are replaced with Objects({}) containing local process.env.
Is there a way to prevent Webpack from evaluating certain env variables?
or am I going about it wrong and do I need to build the production bundle on Elastic Beanstalk first and then serve?
Worst case I can simply add the required values to a dotenv file and approach it that way. I would prefer to be able to make use of Elastic Beanstalks Enviroment Variables though.
Thanks in advance
Update:
To better explain below, I'm trying to access process.env variables during runtime in the server side script. The code is however built on my local machine before being deployed to AWS Elastic Beanstalk
webpack.config.server
'use strict';
const util = require('util');
const path = require('path');
const webpack = require('webpack');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
// const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const paths = require('./paths');
const nodeExternals = require('webpack-node-externals');
const getClientEnvironment = require('./env');
const merge = require('webpack-merge');
const base = require('./webpack.config.base');
const publicUrl = '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
const config = {
target: 'node',
entry: paths.serverIndexJs,
externals: [nodeExternals()], // / in order to ignore all modules in node_modules folder
output: {
path: paths.serverBuild,
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
{
test: /\.scss$/,
include: [ path.resolve(paths.scss, 'vendor') ], // Global styles
use: [
{
loader: "isomorphic-style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader", // translates CSS into CommonJS
options: {
importLoaders: 1,
sourceMap: true
}
}, {
loader: "postcss-loader",
options: {
sourceMap: true
}
}, {
loader: "sass-loader", // compiles Sass to CSS
options: {
sourceMap: true
}
}
]
},
{
test: /\.scss$/,
exclude: [ path.resolve(paths.scss, 'vendor'), path.resolve(__dirname, '../node_modules') ], // Module styles
use: [
{
loader: "isomorphic-style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader", // translates CSS into CommonJS
options: {
importLoaders: 1,
sourceMap: true,
modules: true,
localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
}
}, {
loader: "postcss-loader",
options: {
sourceMap: true
}
}, {
loader: "sass-loader", // compiles Sass to CSS
options: {
sourceMap: true
}
}, {
loader: "sass-resources-loader",
options: {
resources: [
path.resolve(__dirname, '../node_modules/bootstrap/scss/_functions.scss'),
path.resolve(__dirname, '../src/scss/config/**/*.scss'),
path.resolve(__dirname, '../node_modules/bootstrap/scss/mixins/**/*.scss'),
path.resolve(__dirname, '../src/scss/helpers/**/*.scss'),
]
}
}
]
},
]
},
plugins: [
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
new webpack.DefinePlugin(env.stringified),
],
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false,
setImmediate: false,
}
};
module.exports = merge(base, config);
Not 100% clear on what you're trying to do, but it sounds like you want to pass only some of the environment vars to the DefinePlugin, not all of them...? If that's the case you can just write a little fn to filter or whitelist the env vars and pass the result to DefinePlugin. If an env var isn't included in your DefinePlugin, webpack will be unaware of it at build time.
getClientEnvironment from env.js returned an object of key values which was then passed to DefinePlugin.
Although environment variables such as process.env.PORT weren't being passed to DefinePlugin they were being complied by Webpack as undefined.
This was due to getClientEnviroment returning the environment variables as an object of process.env
{ 'process.env':
{ NODE_ENV: '"production"',
PUBLIC_URL: '""',
REACT_APP_HOST: '"localhost"',
REACT_APP_PORT: '"8080"'
}
}
What I didn't realise was that in doing this, DefinePlugin overrides all process.env variables.
As per definePlugin's docs:
When defining values for process prefer 'process.env.NODE_ENV':
JSON.stringify('production') over process: { env: { NODE_ENV:
JSON.stringify('production') } }. Using the latter will overwrite the
process object which can break compatibility with some modules that
expect other values on the process object to be defined.
Hi im using socket io in my application. Which is requiring fs. when i try to bundle my javascript using below webpack config. im getting error can not resolve 'fs'.
Module not found: Error: Can't resolve 'fs' in 'my application path/node_modules/socket.io/lib'
i found by adding target:'node' and node:{fs:'empty'}. this issue got resolved.
But there is an issue in sass-loader. Getting below error.
ERROR in javascript/bundle.js from UglifyJs
Unexpected token: name (zlibLimiter) [javascript/bundle.js:60019,4]
Child extract-text-webpack-plugin ../../../node_modules/extract-text-webpack-plugin/dist ../../../node_modules/css-loader/index.js??ref--2-2!../../../node_modules/sass-loader/lib/loader.js!s
running the application ignoring above error. getting below error.
external "crypto":1 Uncaught ReferenceError: require is not defined
at Object.__decorate (external "crypto":1)
at __webpack_require__ (bootstrap 93620a17882f7a2aa1d3:19)
at Object.byteToHex (rng.js:4)
at __webpack_require__ (bootstrap 93620a17882f7a2aa1d3:19)
Below is my webpack config and versions. Can some one please help me to resolve this issue.
"webpack": "~3.6.0",
npm -v 5.8.0
node -v v8.4.0
const webpack = require('webpack');
const env = process.env.NODE_ENV;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const extractSass = new ExtractTextPlugin({
filename: 'css/[name].css',
allChunks: false
});
let output = {
path: __dirname + '/src/main/resources/static/',
filename: 'javascript/[name].js'
};
if (env === 'debug' || env === 'nondev') {
output = {
path: __dirname + '/target/classes/static/',
filename: 'javascript/[name].js'
};
}
let config = {
context: __dirname + '/app/js/src',
entry: {
bundle: './index.jsx',
application: './static/scss/application.scss',
'application-pdap': './static/scss/application-pdap.scss'
},
output: output,
devtool: 'cheap-module-source-map',
module: {
rules: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {presets: ['es2015', 'react']}
},
{
test: /\.(woff|woff2|eot|ttf|svg|png|jpg|gif)$/,
loader: 'file-loader?limit=1024&name=images/[name].[ext]'
},
{
test: /\.(scss|css)$/,
include: [path.resolve(__dirname, 'app/js/src/static/scss')],
use: ExtractTextPlugin.extract({
publicPath: '../',
use: [
{
loader: 'css-loader',
options: {
minimize: true,
sourceMap: false
}
},
{loader: 'sass-loader'}
],
fallback: 'style-loader'
})
}
]
},
plugins: [extractSass],
};
if (env === 'production' || env === 'nondev') {
config.devtool = 'nosources-source-map';
config.plugins.push(
new webpack.DefinePlugin({
'process.env': {NODE_ENV: '"production"'}
})
);
config.plugins.push(new webpack.optimize.UglifyJsPlugin({
compress: {warnings: false},
comments: false,
sourceMap: false,
minimize: false
}));
}
module.exports = config;
The solution depends on the type of application you want to build. Usually front-end and back-end JavaScript code are bundled separately, effectively creating two output bundles.
Front-end
For a frontend/web project, add the socket.io client libary to your app bundle. There is no need to include any node dependencies (fs) or mock entries like node: { fs:'empty' }. You can choose target:'web' or leave it out, as it is the default.
Back-end
Pick target:'node' and install socket.io server library. You do not need to specify externals: ["fs"] as shown in the other answer, because target: 'node' will take care of not bundling path, fs and other built-in modules.
Better avoid npm i fs - this is a needless escape hatch and a security risk. There have already happened cases of malicious npm packages with common package names.
You could even deliberate about, wether a node backend bundle is needed at all. An alternative is to install webpack-node-externals, which treats either all or specific npm packages as "externals" and excludes them from the bundle:
var nodeExternals = require('webpack-node-externals');
module.exports = {
target: 'node', // ignore built-in modules like path, fs, etc.
externals: [nodeExternals()], // ignore all modules in node_modules folder
// ...
};
This makes sense for the back-end, as all dependencies are installed in node_modules at server start time and don't need to be included in the bundle.
Exclude files from loaders
To exclude files from certain loaders and their transformations, you can use exclude module rule. An example is to omit node_modules from babel-loader transformations:
{ test: /\.(jsx|js)$/, exclude: /node_modules/, loader: "babel-loader" }
Further reading
Just install fs (npm i fs), and add at your webpack config
externals: ["fs"],
If someone is still facing this issue, you can try the following workaround. Update your webpack file to including the following configuration:
node: {
fs: 'empty',
}
We had a similar issue within our project and adding this specific configuration resolved the 'fs' related error in webpack.
It's also worth checking the version of Webpack version. we had to revert back the webpack and webpack cli versions to 4.0.0 and 4.2.0 respectively.