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.
Related
When I run npm run dev I get this error and I have no idea what is causing it
I have installed all the packages and reinstalled them.
I have applied all of the migrations.
I have re-cloned the repo and done all the steps again and I cant seem to get past this error.
Error: Upload was already defined and imported as a type, check the docs for extending types
at extendError (C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\builder.ts:1743:10)
at SchemaBuilder.addType (C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\builder.ts:602:15)
at C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\builder.ts:1696:14
at C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\utils.ts:147:41
at Array.forEach (<anonymous>)
at eachObj (C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\utils.ts:147:20)
at SchemaBuilder.traverseArgs (C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\builder.ts:1693:12)
at SchemaBuilder.maybeTraverseOutputFieldType (C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\builder.ts:1688:12)
at Object.addField (C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\builder.ts:1640:29)
at ObjectDefinitionBlock.field (C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\definitions\definitionBlocks.ts:712:22)
[ERROR] 10:03:59 Error: Upload was already defined and imported as a type, check the docs for
extending types
I have the test project at https://github.com/ericg-ember-questions/test_computed_sort
I setup the project by doing the following:
Node version: v12.18.1 (npm v6.14.5)
npm install --save-dev ember-cli#3.4
./node_modules/.bin/ember new test_computed_sort
cd test_computed_sort/
./node_modules/.bin/ember install ember-light-table#1.13.2
./node_modules/.bin/ember generate component test-comp
./node_modules/.bin/ember serve
application.hbs
{{test-comp}}
test-comp.hbs
Hello
{{#light-table}}
{{/light-table}}
If I comment out the reference to light-table, no error is generated. However, with it, I see in the console:
media.js:15 Uncaught TypeError: decorator is not a function
at media.js:15:1
at Array.reduce (<anonymous>)
at _applyDecoratedDescriptor (media.js:15:1)
at Module.callback (media.js:240:1)
at Module.exports (loader.js:106:1)
at Module._reify (loader.js:143:1)
at Module.reify (loader.js:130:1)
at Module.exports (loader.js:104:1)
at requireModule (loader.js:27:1)
at Class._extractDefaultExport (index.js:432:1)
What can I do to resolve this error so I can use ember-light-table with this project?
The error kinda hints at this, but it doesn't really make sense unless you're using modern ember -- but you're using 3.4 (thanks for providing that information!!)
The stack in your error is actually very helpful, and here's how you can figure out what the issue is.
I downloaded your reproduction repo (thanks for providing that! reproductions are immensely helpful in debugging!)
I got the same error you did:
The key piece here is the media.js reference.
Clicking into that we see:
that the compiled version of the ember-responsive/services/media file is using decorators --
you have some version of ember-responsive in your app which has decorators.
I saw in your package.json that you're specifying on alder version:
"ember-responsive": "^4.0.2",
this v4 version of ember-responsive only supports ember 3.13 and higher.
Kinda poking around the ember-responsive github, https://github.com/freshbooks/ember-responsive/blob/v3.0.5/config/ember-try.js
I see that the v3 series of ember-responsive supports back to Ember 2.12 -- definitely before decorators before supported.
So downgrading ember-responsive and restarting the app reveals this error:
"Assertion Failed: [ember-light-table] table must be an instance of Table"
this error is documented here: https://github.com/adopted-ember-addons/ember-light-table/issues/726
so it looks like some APIs usage issue.
If you want help figuring that out, feel free to post another question.
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```
OS - Windows 10 x64
NodeJs v8.9.3
npm 5.7.1
repository for sample code - https://github.com/niral3737/testMobxStateTreeApp
I am working with mobx-state-tree and I have created a model Invoice with a field name.
I am using that model in App.js class.
When it compiles, it throws
Failed to compile.
./node_modules/mobx-state-tree/dist/mobx-state-tree.module.js
2247:12-18 'mobx' does not contain an export named 'extras'.
what is the problem here?
warning " > mobx-state-tree#1.4.0" has incorrect peer dependency "mobx#^3.1.15".
Drop your dependencies down to:
"dependencies": {
"mobx": "3.1.15",
..and away you go!
P.S. Always use Yarn, when developing in React.JS and always run:
Yarn check
..before you commence with development.
I have the following in my aurelia.json file, among the rest of what you'd usually find. I copied it directly from the reference implementation, and as you'd therefore expect, it works fine.
{
'build': {
'bundles': [
'name': 'vendor-bundle.js'
'dependencies': [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
]
}
}
However, I'm trying to migrate to Bootstrap 4, and it just doesn't seem to be working. In order to update the package, I've tried changing build.bundles.dependencies[].path to ../jspm_packages/github/twbs/bootstrap#4.0.0-beta as well as to ../node_modules/bootstrap-v4-dev/dist, but it doesn't change the error code or make the error manifest any less. I've also tried copying the v4 files into the dist folder for v3, which also causes the same problem.
Build is always clean; the error occurs at run-time:
DEBUG [templating] importing resources for app.html
Uncaught TypeError: plugin.load is not a function
Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css
EDIT:
Thanks to Ashley Grant's answer, I have updated Bootstrap through NPM, obviating any changes to aurelia.json. The error remains unchanged, which would seem to indicate a bug were it not for the fact that other people have successfully performed this migration without errors using the same toolchain.
EDIT2:
I've created steps to reproduce the bug:
$ au new
name # can be any valid value
2 # Selects TypeScript as the language
1 # Create project structure
1 # Install dependencies
cd into the project directory.
Add the two entries listed above to build.bundles[1].dependencies in aurelia_project/aurelia.json
$ npm install jquery --save
$ npm install bootstrap#^4.0.0-beta --save
Change src/app.html to the following:
<template>
<require from="bootstrap/css/bootstrap.css"></require>
</template>
Finally, execute either of the following and browse to the provided URL.
$ au run
OR
$ au build
$ serve
This yields the errors described in both Google Chrome Version 55.0.2883.87 (64-bit) and Mozilla Firefox 55.0.3 on my Arch Linux systems. I've not yet had the opportunity to test it on other systems.
Edit3:
Thanks to #vidriduch, everything appears to be working. However, if you look at the console, you find the following:
Uncaught SyntaxError: Unexpected token export
vendor-bundle.js:3927Uncaught Error: Mismatched anonymous define() module: [entirety of vendor-bundle.js printed here]
These are the two very first messages when the page loads in debug mode, but no other errors arise.
You are missing popper.js dependency for Bootstrap 4.0.0-beta.
In order for Aurelia to accept this add
"node_modules/popper.js/dist/umd/popper.js"
on the top (as per comment from #hxtk) of prepend part of aurelia.json (assuming that you are using RequireJS, otherwise have a look at webpack dependency linking for Bootstrap https://getbootstrap.com/docs/4.0/getting-started/webpack/)
Just to mention, the version of popper.js you need to install is 1.11.0 (https://github.com/twbs/bootstrap/issues/23381), so
npm install popper.js#1.11.0
or
yarn add popper.js#1.11.0
and it should work :)
Your aurelia.json configuration is correct. I'm going to guess you never ran npm install bootstrap#^4.0.0-beta --save as you are mentioning copying files in to a versioned node_modules folder, and NPM doesn't use versioned folders like JSPM does.
So run npm install bootstrap#^4.0.0-beta --save and things should start working. I have your exact configuration working in an application for one of my clients.