I am following the tutorial exactly as given here . But I am amazed that the docs seems outdated. e.g
npx webpack src/index.js dist/bundle.js fails with:
The CLI moved into a separate package: webpack-cli. Please install
'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
If I install webpack-cli and try again I see this error:
Hash: af9bc06fd641eb0ffd1e Version: webpack 4.0.0 Time: 3865ms Built
at: 2018-2-26 05:10:45 1 asset Entrypoint main = main.js 1
(webpack)/buildin/module.js 519 bytes {0} [built] 2
(webpack)/buildin/global.js 509 bytes {0} [built] [3]
./src/index.js 212 bytes {0} [built] [4] multi ./src/index.js
dist/bundle.js 40 bytes {0} [built]
+ 1 hidden module
WARNING in configuration The 'mode' option has not been set. Set
'mode' option to 'development' or 'production' to enable defaults for
this environment.
ERROR in multi ./src/index.js dist/bundle.js Module not found: Error:
Can't resolve 'dist/bundle.js' in '/var/app/webpack_demo' # multi
./src/index.js dist/bundle.js
I hope I am not doing something crazy, given the popularity of webpack the documentation should reflect the actual behavior. Let me know if I am
doing something wrong.
Edit
A details description of upgrade to webpack 4,that might be helpful
You can pass mode param in the webpack config or cli command.
Config: mode: 'development' or mode: 'production'
CLI: webpack --mode development or webpack --mode production
The Webpack team is working on updating the package docs asap.
New guides and docs are available in the webpack.js.org official site.
In the meantime, You can also read related posts on medium:
webpack 4: mode and optimization
webpack 4: released today!!
Check on GitHub this Webpack-Demo project intended to be a Webpack 4 tutorial.
Previous and others links to helpful resources used in the webpack configs are included in the project's Readme.
It has two zero-config builds (using the new webpack mode option which includes a sets of defaults), and another two using custom configs.
Since webpack-4, the CLI has been move to webpack-cli therefore you need to install also this package in your devDependencies.
Also, webpack expect the new mode configuration to be set either on the CLI run or the config object.
CLI usage in your npm scripts:
"scripts": {
"dev": "webpack --mode development",
"prod": "webpack --mode production"
}
Set mode property in your webpack config object:
{
mode: 'production' // | 'development' | 'none'
}
If mode value isn't specified, webpack uses the production value (defaulted option). But warns you in the output with:
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
Webpack mode reduce the required configuration for an useful build by using a set of defaults (default values for configuration properties depending the mode value):
production enables all kind of optimizations to generate optimized bundles
development enables useful error messages and is optimized for speed
none is a hidden mode which disables everything
Read more on release notes & changelog
Got the same issue and after a bit of research found its a problem to be fixed as you can see on this Github thread
One of the options:
Inside package.json set scripts to either development or production mode
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
And now when you run npm run dev it will give you bundle.js but not minified.
But when you run npm run build it will give you a minified bundle
It will be updated very soon, see this link for information
We are very close to having out Migration Guide and v4 Docs Additions complete! To track the progress, or give a helping hand, please stop by our documentation repository, checkout the next branch, and help out!
Webpack 4 docs are not ready yet. I recently migrated from webpack 3 to 4 and it took me quite some time to figure out all the issues.
Here'a my sample repo you can use as reference for migrating from webpack 3 to 4.
https://github.com/flexdinesh/react-redux-boilerplate
There's one commit specific for migration. Take a look at that for more info.
In webpack config file:
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
***
mode: isProd ? 'production' : 'development'
***
};
In package.json:
***
"scripts": {
"dev": "node ./app.js",
"prod": "cross-env NODE_ENV=production npm run dev",
***
},
***
"dependencies": {
"cross-env": "^7.0.2",
***
}
***
Related
My task is to upgrade package.json in Laravel. I haven't had any problems using Laravel-Mix 5 ver until now, but I got the following error after switching to 6 ver.
error: unknown option '--env.mixfile=webpack.admin.mix' error Command
failed with exit code 1. info Visit
https://yarnpkg.com/en/docs/cli/run for documentation about this
command. error: unknown option '--env.mixfile=webpack.client.mix'
error Command failed with exit code 1. info Visit
https://yarnpkg.com/en/docs/cli/run for documentation about this
command.
Perhaps the way "Scripts" is written may have changed. My Scripts in Package.json as below. Webpack.mix.js is divided by authority.
"scripts": {
"dev": "yarn run-p dev:admin dev:client dev:sp",
"dev:admin": "NODE_ENV=local yarn development -- --env.mixfile=webpack.admin.mix",
"dev:client": "NODE_ENV=local yarn development -- --env.mixfile=webpack.client.mix",
"dev:sp": "NODE_ENV=local yarn development -- --env.mixfile=webpack.sp.mix",
...
My env
PHP: 7.4.29
Laravel :8.76.2
Yarn: 1.22.5
Node: 16.14.2
Laravel Mix: 6.0.43
Already tried
Remake node_modules.
Yarn cache clear.
Deleted "-- --" in Scripts then try again.
What does the development script run?
In a default laravel mix package.json its mix. If that's the case you could try the following:
"scripts": {
"dev": "yarn run-p dev:admin dev:client dev:sp",
"dev:admin": "mix --mix-config=webpack.admin.mix.js",
"dev:client": "mix --mix-config=webpack.client.mix.js",
"dev:sp": "mix --mix-config=webpack.sp.mix.js",
...
I am building a simple NodeJs Lambda with webpack. There is a dependent node_module using different configuration file based on NODE_ENV
let config = require(`./${process.env.NODE_ENV ? process.env.NODE_ENV : 'dev'}_env.js`);
I am setting NODE_ENV in package.json
"serve": "set NODE_ENV=qa&webpack --mode development --watch",
"serve-windows": "$env:NODE_ENV=qa&webpack --mode development --watch"
and in webpack configuration
mode: process.env.NODE_ENV ? process.env.NODE_ENV : 'default',
No matter what I do, its always including dev_env.js ignoring the NODE_ENV I am setting. I spent all night trying to figure out this looking at different posts, is there anything I am doing incorrectly?
webpack --mode development sets NODE_ENV to development. See the documentation: https://webpack.js.org/configuration/mode/#usage
Another remark, default and qa&webpack are non-standard values for NODE_ENV. Usually, the expected value is either development, test, or production.
If you want to use this approach, you will have to use a different environment variable, for example:
let config = require(`./${process.env.APP_ENV ? process.env.APP_ENV : 'dev'}_env.js`);
"serve": "set APP_ENV=qa&webpack --mode development --watch",
I have simple running react Server Side App .
GitHub Link for the repo, in the local env i have a build script that runs using npm start which starts the client and server builds and then i have a watcher which listen's to changes in file. This set up works really well locally.
"scripts": {
"start": "npm run dev",
"dev": "npm-run-all --parallel dev:*",
"dev:server": "nodemon --watch build --exec \"node build/bundle.js\"",
"dev:build-server": "webpack --config webpack.server.js --watch",
"dev:build-client": "webpack --config webpack.client.js --watch"
},
I tried to deploy these changes as a prod app to heroku here for some odd reason it never works and returns 503 . I have not added any changes to the build scripts in the package.json and tried deploying as is.
I thought it should work as the build log dosent give any errors on heroku but while trying to access the app it shows error and asks me to check app log but i am not using heroku cli and not planning on using it , and
thinking of auto deployment from github.
I am quite new to script/ largely build scripts trying to learn more on them.
How can we make sure this small React SSR git repo deploys and i am
able to access the home page .
I am not using heroku cli and not planning on using it
You should and I really recommend, as it's the best way to see errors that occurs after the build, why your app crashed and see the full logs. Even though you can see the logs from your heroku dashbord (More -> View logs), this only gives you the tail of the logs.
How can we make sure this small React SSR git repo deploys and i am able to access the home page.
Make sure the server is listening on the right port
by using process.env.PORT as heroku expose a dynamic port.
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log('Listening on Port ' + port);
})
On heroku the NODE_ENV environment variable is set toproduction by default,
which means heroku will prune thedevDependencies after the build,
but in your case, you still need these dependencies to start your app with webpack.
You can fix this in two ways :
Customize your build process by adding a build script:
From your github
repo
:
"start": "webpack --config webpack.client.js; webpack --config webpack.server.js; node build/bundle.js"
to
"scripts": {
"start": "node build/bundle.js",
"build": "webpack --config webpack.client.js & webpack --config webpack.server.js",
"build:start": "webpack --config webpack.client.js && webpack --config webpack.server.js && node build/bundle.js",
}
Set the NODE_ENV to any other value to skip pruning your
devDependencies
heroku config:set NODE_ENV=development //(Another reason to use the CLI)
Check this link for more details
Node.js in windows system can be set environmental before the server is started, like this:
set NODE_ENV=production
That NODE_ENV parameter can be using in node.js or electron by process.env.NODE_ENV.
But when I builder electron by electron-builder, like this:
electron-builder build --windows
How do I set the environmental variables?
Update:
May be cannot pass a fixed environment variable to an executable by electron-builder.
Maybe you can only manually load an environment file, modify it when you package it, or preset the parameters to the dev state. When there is no state, it is production.
If you want an environment variable to be set on runtime you can either set them manually or use other tools like dotenv https://www.npmjs.com/package/dotenv
But the easiest way is to set them at runtime when running the binaries. You can use either a batch script (If windows) for example:
setlocal
set NODE_ENV=production
.\your-binaries.exe
endlocal
Note: setlocal prevents the variable leaking any further.
The one-liner version could be set NODE_ENV=production && .\binaries.exe
Under linux works the same way: set variable then run.
I'm posting this in the hopes that it helps other people in my situation. I have three environments (development, staging, and production), and I wanted my Electron main process to be aware of which environment it was running on.
Now, for development it's quite easy to expose an environment variable to Electron inline using the CLI:
export NODE_ENV=development && electron desktop/main.js
Then, Electron's main process can access this environment variable like so:
const isDev = process.env.NODE_ENV === 'development';
However, being able to distinguish between the staging and production environments was slightly trickier. My staging and production environments are both packaged and deployed using electron-builder, with package.json scripts like so:
"desktop-build": "webpack --config config/webpack/webpack.prod.js && electron-builder --config config/electron.config.js",
"desktop-build-staging": "webpack --config config/webpack/webpack.staging.js && electron-builder --config config/electron.config.js",
NOTE: The webpack configs above expose configs to the renderer process (website), but not the main process.
So my solution to expose the environment to the Electron main process for staging and production was as follows:
Set NODE_ENV=staging or NODE_ENV=production to electron-builder via command line invocation:
# Production
export NODE_ENV=production && webpack --config config/webpack/webpack.prod.js && electron-builder --config config/electron.config.js
# Staging
export NODE_ENV=staging && webpack --config config/webpack/webpack.staging.js && electron-builder --config config/electron.config.js
In my electron.config.js file (configs for electron-builder) use the extraMetadata parameter (docs) to inject a variable into my package.json:
extraMetadata: {
isProduction: Boolean(process.env.NODE_ENV === 'production'),
},
Then you can access that from your Electron main process:
// This variable is injected into package.json by electron-builder via the extraMetadata field (specified in electron.config.js)
const {isProduction} = Boolean(require('./package.json'));
Failed to compile ./src/index.js Module build failed: Error: Using
babel-preset-react-app requires that you specify NODE_ENV or
BABEL_ENV environment variables. Valid values are "development",
"test", and "production". Instead, received: "undefined". (While
processing
preset:"C:\Users\mitch\OneDrive\Development\Git\react-seed\node_modules\babel-preset-react-app\index.js")
at Array.map (native)
I keep getting the above error no matter how many weird and wonderful ways I try to set either the environment or the environment variables since updating my react-app and I even get this on a fresh app created from the 'create-react-app' scripts - What am I clearly doing wrong?
I do it in my package.json:
{
"scripts": {
"build": "NODE_ENV=development babel src -d lib",
"build-prod": "NODE_ENV=production babel src -d lib"
}
}
Using babel-preset-react-app requires that you specify NODE_ENV or BABEL_ENV environment variables. Valid values are "development", "test", and "production". Instead, received: "development "
Ran into a similar problem and noticed that a space character messed things up with this configuration:
SET NODE_ENV=development && node server/bootstrap.js
//Changed to this:
SET NODE_ENV=development&&node server/bootstrap.js
{
"scripts": {
"build": "export NODE_ENV=development && babel src -d lib",
"build-prod": "export NODE_ENV=production && babel src -d lib"
}
}