Develop Reference

Getting "Unknown Option" error running JHipster generated frontend with "npm start"

Whenever I run my default JHipster project (I only changed some code on the backend and made a few styling changes), I get the following error:
[webpack-cli] Error: Unknown option '--inline'
[webpack-cli] Run 'webpack --help' to see available commands and options
Already ran sudo npm i -S webpack#latest to ensure I'm using a new webpack version.
If I remove --inline from the commands, I get a different error:
1% setup initialize[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
options has an unknown property 'watchOptions'. These properties are valid:
object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
Little bit confused here as I haven't setup the project and also not touched webpack in a while - appreciate any help and thanks in advance!

It was simply a version dependency mismatch. For some reason, the Webpack Config was not defined for the same version as the as the one installed (v4 vs v5 respectively) - I simply assumed that the package json settings would prevent this from happening.
I went through each error using the webpack docs and upgraded it according to the migration instructions.

React with AWS - Error: html-webpack-plugin could not minify the generated output

When I deploy the contents of my build folder to my S3 bucket, I get this error below each time. The app builds fine when I run npm build, and it works when I run npm start. I created another app following the generic create-react-app tutorial, and that worked fine when I deployed it to AWS.
Error: html-webpack-plugin could not minify the generated output.
In production mode the html minifcation is enabled by default.
If you are not generating a valid html output please disable it manually.
You can do so by adding the following setting to your HtmlWebpackPlugin config:
|
| minify: false
|
See https://github.com/jantimon/html-webpack-plugin#options for details.
For parser dedicated bugs please create an issue here:
https://danielruf.github.io/html-minifier-terser/
Parse Error: React App
- htmlparser.js:244 new HTMLParser
[Accrescent]/[html-minifier-terser]/src/htmlparser.js:244:13
- htmlminifier.js:993 minify
[Accrescent]/[html-minifier-terser]/src/htmlminifier.js:993:3
- htmlminifier.js:1354 Object.exports.minify
[Accrescent]/[html-minifier-terser]/src/htmlminifier.js:1354:16
- index.js:1013 HtmlWebpackPlugin.minifyHtml
[Accrescent]/[html-webpack-plugin]/index.js:1013:46
- index.js:429 HtmlWebpackPlugin.postProcessHtml
[Accrescent]/[html-webpack-plugin]/index.js:429:40
- index.js:254
[Accrescent]/[html-webpack-plugin]/index.js:254:25
- task_queues.js:93 processTicksAndRejections
internal/process/task_queues.js:93:5```

Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"

I work with Augmented UI in my Gatsby project, every thing works great in dev mode.
When I go with build command, I got this log error:
info bootstrap finished - 4.630 s
⠀
failed Building production JavaScript and CSS bundles - 9.761s
ERROR #98123 WEBPACK
Generating JavaScript bundles failed
Parse error on line 1:
...n-x, calc(var(--aug-_TlJoinRX, 0px)/2 + var(--aug-_TrJoinLX, 100%)/2)) + var(--...
------------------------------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"
not finished run queries - 9.857s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project#1.0.0 build: `gatsby build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the project#1.0.0 build script.
After some researches, it seems that PostCSS is unable to work along with Augmented UI (on calc functions).
I'm unable to find a way to disable PostCSS on this.
My dependencies versions are:
"gatsby": "^2.18.5",
"gatsby-plugin-postcss": "^2.1.16"
My current postcss.config.js looks like that:
module.exports = () => ({
plugins: [require('tailwindcss')],
})
Thanks for any help on this subject.

#Zooly, the problem is related with the use of calc function in the CSS preprocessor or minifier. From the Augmented UI's documentation:
Compatibility with Create React App (And in my situation, Vue)
Create React App depends on PostCSS and cssnano. Both of these libraries have parsing bugs that block augmented-ui so you'll need to copy augmented-ui.min.css into the public folder and manually include it in the index.html file to avoid them until they're fixed.
https://augmented-ui.com/docs/#install
As you can see at this support answer on GitHub https://github.com/propjockey/augmented-ui/issues/3#issuecomment-579671714, you can add this key to your package.json config file:
"cssnano": {
"preset": [
"default",
{
"calc": false
}
]
},
I use this workaround and it works fine to build my Vue project. Hope it works for yours too.

I ran into the same problem (also with Argument UI), and did not fix it. But here is a quick work around:
<Helmet>
<link rel='stylesheet' href='https://unpkg.com/augmented-ui/augmented.css' />
</Helmet>
And just a heads up: I had to delete my public and .cache folder to get the build to include the link to the CDN.

On save, Vue generates false errors

I have started a pretty empty Vue projet, then when I do the following it works...
npm run serve
Then I change a minor thing in my project and hit CTRL+S. The Vue instance is rebuilt and then I have some weird errors such as:
error: Parsing error: The keyword 'import' is reserved at src/main.js:1:1:
> 1 | import Vue from 'vue'
So if I quit and rerun npm run serve it works again.
What's wrong?

It might be the eslint configuration problem, try to add this to your .eslintrc.js file to enable es6 modules
parserOptions: {
sourceType: 'module'
},

electron-builder install-app-deps tries to include react-native while I have an alias set in webpack to react-native-electron

How do I tell electron-builder to package react-native-electron instead of react-native? I could not find anything about alias in the electron-builder docs and it's also surprising because it's not a native module so it doesn't contain any .node files, and webpack (through electon-webpack) has taken care of all the packaging.
This is on Ubuntu.
The development build using the webpack server managed by electron-webpack (with the command electron-webpack dev) works perfectly.
If I try yarn add react-native it does build but when I start the resulting app it opens but does nothing.
I also tried to copy the react-native-electron folder and renaming it to react-native. Then it does build but if I start it, it does not even open but I do see it doing nothing in system monitor.
When I try electron-builder install-app-deps without react-native it errors out with:
Error: Unresolved node modules: react-native
at /media/dj/dev/scan-app-desktop/node_modules/electron-builder-lib/src/util/packageDependencies.ts:108:17
From previous event:
at Collector.resolveUnresolvedHoisted (/media/dj/dev/scan-app-desktop/node_modules/electron-builder-lib/src/util/packageDependencies.ts:164:10)
at /media/dj/dev/scan-app-desktop/node_modules/electron-builder-lib/src/util/packageDependencies.ts:82:18
at Generator.next (<anonymous>)
at runCallback (timers.js:763:18)
at tryOnImmediate (timers.js:734:5)
at processImmediate (timers.js:716:5)
From previous event:
at Collector.collect (/media/dj/dev/scan-app-desktop/node_modules/electron-builder-lib/src/util/packageDependencies.ts:84:6)
at /media/dj/dev/scan-app-desktop/node_modules/electron-builder-lib/out/util/packageDependencies.js:123:47
at Generator.next (<anonymous>)
(...)
in my package.json I have the electronWebpack config:
"electronWebpack": {
"renderer": {
"webpackConfig": "webpack.renderer.additions.js"
}
},
and in webpack.renderer.additions.js:
const path = require('path')
const resolve = {
alias: {
'react-native': path.join(__dirname, 'node_modules/react-native-electron')
}
}
module.exports = {resolve}
https://github.com/PaulLeCam/react-native-electron/issues/4

Seems like the definition of devDependencies is a bit different than I'm used to. In this case, packages that would normally just be dependencies are now only used by webpack and not by electron-builder. electron-builder includes the dependencies but not the devDependencies. So all js modules with no native component can be in devDependencies because they don't have to be included in the final electron build because webpack has already bundled them. electron-builder does not look at the webpack config so it does not know about the alias, but as it turns out packages like ract-navigation and their subdependencies (like react-native) should not be in the build twice anyway.
So move everything that should not be included separately to devDependencies and the app will compile.
It did not start because of errors but that's another problem probably