Kotlin/JS, Gradle Plugin : Unable to load '#webpack-cli/serve' command - javascript

I was doing the tutorial for React Kotlin and couldnt even finish the setup step because the server does not start.
The code is unchanged : https://github.com/kotlin-hands-on/web-app-react-kotlin-js-gradle
Stacktrace:
[webpack-cli] Unable to load '#webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
[webpack-cli] TypeError: options.forEach is not a function
I saw this issue : https://github.com/webpack/webpack-cli/issues/2990 but I'm unable to implement the fix proposed (change the webpack-cli version and remove the webpack-cli/serve from yarn.lock) because I can't find how to change these on the kotlin js gradle plugin.
Even simple browser application from intelliJ is broken with the same error.

Had the same issue: adding this option to the project gradle.properties
kotlin.js.webpack.major.version=4
fixed it - reference: https://kotlinlang.org/docs/js-project-setup.html#webpack-version

Try to update webpack-cli:
rootProject.plugins.withType(org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootPlugin::class.java) {
rootProject.the<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension>().versions.webpackCli.version = "4.9.0"
}

Evgeny's answer didn't work here.
Now after 2 days of banging head, and reading kotlin plugin source-code, only the following worked here:
// build.gradle.kts file
kotlinYarn {
resolution("webpack", "5.73.0")
resolution("webpack-cli", "4.10.0")
}
It will print a warning when running the task kotlinNpmInstall but the app will run.

Related

rtl in material UI cause ruined my app appearance

I setup my rtl configuration step by step in v5mui. Using:
emotion as styled-engine
stylis v4
stylis-plugin-rtl v2
Every thing is OK but when using some complicated component my app appearance crashes.
There are a warning in terminal that I think will be the answer...
but I don't understand it.
WARNING in ./node_modules/stylis-plugin-rtl/dist/stylis-rtl.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/hamid/Desktop/zahra/node_modules/stylis-plugin-rtl/src/stylis-rtl.ts' file: Error: ENOENT: no such file or directory, open '/home/hamid/Desktop/zahra/node_modules/stylis-plugin-rtl/src/stylis-rtl.ts'
# ./src/index.js 8:0-42 15:18-27
It was better to say which version did you use? for instance I used version 2.1.0 anyway, I have the same problem as you said with v2.1.1 and I should use this version v2.0.2 instead.
npm i stylis-plugin-rtl#2.0.2
I hope it can help you.
Best Wishes,
Parham

Array.prototype.flat() creates an error when building Gatsby site

When building, I get the following error:
WebpackError: TypeError: Object.entries(...).map(...).flat is not a function
I can gatsby deveop the app just fine, and all works as expected in the browser.
Any ideas on how to remedy this?
I'm not sure if this is ideal, but the only way I was able to fix this was by adding a polyfill and including it at the top of the offending file.
> yarn add array-flat-polyfill
// src/pages/page-with-error.js
import 'array-flat-polyfill';

react-native metro throws error in traverseDependency, can package-lock.json be the reason?

The error I get is described here on github in detail. Basically the metro bundler fails with the following error:
error: bundling failed: TypeError: Cannot read property 'map' of undefined
at resolveDependencies (C:\Apps\MyProject\rnw\node_modules\metro\src\DeltaBundler\traverseDependencies.js:370:18)
at C:\Apps\MyProject\rnw\node_modules\metro\src\DeltaBundler\traverseDependencies.js:188:33
at Generator.next ()
at step (C:\Apps\MyProject\rnw\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:30)
at C:\Apps\MyProject\rnw\node_modules\metro\src\DeltaBundler\traverseDependencies.js:309:15
at
DELTA [android, dev] ....../index.js ▓▓░░░░░░░░░░░░░░ 14.7% (221/612), failed.
This error message does not help me much, as I am not deep into how the metro bundler works.
So I checked recent changes I did in the code, e.g. I added the following to my project:
"react-native-tab-view": "^1.3.2",
After that, I have a weird change in package-lock.json. It seems react-native-tab-view was already existing there, I guess because it is a dependency of another project I imported before. Here is the first change in package-lock.json:
Ok so whatever, this looks still ok to me. What is weird is the second change I see:
Wait, what? A dependency to react-native-tab-view was added to react-navigation-deprecated-tab-navigator with the old version number 0.0.77? That looks strange, at least for me.
Can somebody help me out here - is this change normal, or can this be the reason why metro bundler fails?
Any input appreciated!
I solved the issue by emptying the C:\Users\\AppData\Local\Temp folder.
No Need to Empty whole folder
I solved the issue by deleting only one folder metro-cache
Path : C:\Users\Harsh1311\AppData\Local\Temp

Error while loading zone.js and main.js file

I have a django(1.6.11) project running perfectly fine. I want to use it with Angular2. So, I have been following this example. I am getting the following error on localhost:8000 page. By the way it shows Cannot GET / in localhost:3000.
Error: Zone$1http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:232:1
Zone$1http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:114:17
scheduleResolveOrReject/<#http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:502:78
Zone$1http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:265:1
Zone$1http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:154:21
drainMicroTaskQueue#http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:401:25
ZoneTask/this.invoke#http://localhost:8000/ng/node_modules/zone.js/dist/zone.js:339:25
Evaluating http://localhost:8000/ng/src/main.js Error loading
http://localhost:8000/ng/src/main.js localhost:8000:25
Following a suggestion for a question on stackoverflow, I changed loading long-stack-trace-zone.js instead of zone.js in my index.html code. But this says, Zone is not defined. Is this some version compatibility issue? I am using npm 4.1.1 and node v4.8.3. Please do comment if I need to show any of my files.

Internationalization in angular 2

Im creation a basic web page in angular2 and im implementing internationalization using I18N im exactly following the steps in
https://angular.io/docs/ts/latest/cookbook/i18n.html
the command
./node_modules/.bin/ng-xi18n
is not working, i've also tried adding ng-x18n to scripts in package.json ,still not working im getting an error like this:
Error: Error encountered resolving symbol values statically. Calling function 'NoOpAnimationDriver', function calls are not supported. Consider replacing the function or lambda with a reference to an expo
rted function, resolving symbol AnimationDriver.NOOP in E:/angular/myproject/localetest/node_modules/#angular/platform-browser/src/dom/animation_driver.d.ts, resolving symbol BrowserTestingModule in E:/an
gular/myproject/localetest/node_modules/#angular/platform-browser/testing/browser.d.ts, resolving symbol BrowserTestingModule in E:/angular/myproject/localetest/node_modules/#angular/platform-browser/test
ing/browser.d.ts
at SyntaxError.BaseError [as constructor] (E:\angular\myproject\localetest\node_modules\#angular\compiler\bundles\compiler.umd.js:1597:31)
at new SyntaxError (E:\angular\myproject\localetest\node_modules\#angular\compiler\bundles\compiler.umd.js:1795:20)
at simplifyInContext (E:\angular\myproject\localetest\node_modules\#angular\compiler\bundles\compiler.umd.js:25774:27)
at StaticReflector.simplify (E:\angular\myproject\localetest\node_modules\#angular\compiler\bundles\compiler.umd.js:25786:17)
at StaticReflector.annotations (E:\angular\myproject\localetest\node_modules\#angular\compiler\bundles\compiler.umd.js:25282:64)
at NgModuleResolver.resolve (E:\angular\myproject\localetest\node_modules\#angular\compiler\bundles\compiler.umd.js:17762:86)
at CompileMetadataResolver.getNgModuleMetadata (E:\angular\myproject\localetest\node_modules\#angular\compiler\bundles\compiler.umd.js:18263:64)
at CompileMetadataResolver.getNgModuleSummary (E:\angular\myproject\localetest\node_modules\#angular\compiler\bundles\compiler.umd.js:18219:56)
at E:\angular\myproject\localetest\node_modules\#angular\compiler\bundles\compiler.umd.js:18309:72
at Array.forEach (native)
Extraction failed
the extraction seems to be failing what to do..please help
It might be already late but, but I had also this problem with the commands.
I use: ./node_modules/.bin/ng-xi18n -p src/tsconfig.json --i18nFormat=xlf or to make it short I added this line "i18n": "ng-xi18n -p src/tsconfig.json --i18nFormat=xlf" to my package.json "scripts" and then I can simply run npm run i18n.
Also the command ng xi18n --output-path=src/locale works for me
Refer to this post as it has good answers and I got it working following it: Angular2 and webpack - i18n plugin vs ng2-translate

Categories