search

reactiverse / es4x

🚀 fast JavaScript 4 Eclipse Vert.x
https://reactiverse.io/es4x/
Apache License 2.0
884 stars 75 forks source link

Is it possible to use the es4x for react js web application? if yes please help me with your suggestions. #301

Closed Narasinha closed 3 years ago

McSneaky commented 4 years ago

React runs in browser, there it won't matter what you have installed in server.

Unless you are using SSR (server side rendering) for React, then it's exactly the same as making regular NodeJS backend work on ES4X: https://github.com/reactiverse/es4x/issues/302#issuecomment-591278105

Narasinha commented 4 years ago

@McSneaky thanks for the reply.

we have nodejs application with reactj.js and bound with the electron(for desktop application) and backend as nodejs rest api (using express.js and Sequelize ORM ).

I want to use vertx Microservices capabilities such as vertx-service-discovery, vertx-consul-client, vertx-configuration etc.. in my existing Node.js application

How can we integrate ES4X with the existing Node.js application to use the above mentioned Vert.x Microservcies capabilities.

pmlopes commented 4 years ago

Hi, I'm adding a small ssr example to the repo soon.

pmlopes commented 4 years ago

@Narasinha here's a small minimal ssr example:

https://github.com/reactiverse/es4x/tree/develop/examples/react-ssr-basic

pmlopes commented 4 years ago

A nice adition is to turn this example into a manual page on the website.

Narasinha commented 4 years ago

@pmlopes Thank you!

I'm facing some issues when I try to run this project. anything wrong with my configuration ?

react-ssr-basic@1.0.0 start C:\Users\joshiNar\Downloads\es4x-develop\examples\react-ssr-basic es4x server.js

ES4X is using graaljs in interpreted mode! Add the JVMCI compiler module in order to run in optimal mode! SyntaxError: /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:3:0 Expected an operand but found import import React from 'react'; ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:6:0 Expected an operand but found import import App from './client/app'; ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:7:0 Expected an operand but found import import Routes from './routes'; ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:13:4 Expected an operand but found < <StaticRouter location={url || ctx.normalisedPath()} context={ctx.data()}> ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:13:69 Expected : but found . <StaticRouter location={url || ctx.normalisedPath()} context={ctx.data()}> ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:13:77 Expected an operand but found > <StaticRouter location={url || ctx.normalisedPath()} context={ctx.data()}> ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:14:6 Expected an operand but found <

  ^

/Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:15:4 Expected an operand but found < ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:16:2 Expected ; but found ) ); ^

    at org.graalvm.polyglot.Context.eval(Context.java:344)
    at io.reactiverse.es4x.Runtime$1.apply(Runtime.java:105)
    at io.reactiverse.es4x.Runtime$1.apply(Runtime.java:57)
    at <js> _load(file:/C:/Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/node_modules/.lib/es4x-0.10.1.jar!/io/reactiverse/es4x/jvm-npm.js:92-95:3117-3254)
    at <js> runMain(file:/C:/Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/node_modules/.lib/es4x-0.10.1.jar!/io/reactiverse/es4x/jvm-npm.js:110:3648-3692)
    at org.graalvm.polyglot.Value.invokeMember(Value.java:459)
    at io.reactiverse.es4x.impl.JSVerticleFactory$1.start(JSVerticleFactory.java:81)
    at io.vertx.core.Verticle.start(Verticle.java:66)
    at io.vertx.core.impl.DeploymentManager.lambda$doDeploy$9(DeploymentManager.java:556)
    at io.vertx.core.impl.ContextImpl.executeTask(ContextImpl.java:369)
    at io.vertx.core.impl.EventLoopContext.lambda$executeAsync$0(EventLoopContext.java:38)
    at io.netty.util.concurrent.AbstractEventExecutor.safeExecute(AbstractEventExecutor.java:163)
    at io.netty.util.concurrent.SingleThreadEventExecutor.runAllTasks(SingleThreadEventExecutor.java:510)
    at io.netty.channel.nio.NioEventLoop.run(NioEventLoop.java:518)
    at io.netty.util.concurrent.SingleThreadEventExecutor$6.run(SingleThreadEventExecutor.java:1044)
    at io.netty.util.internal.ThreadExecutorMap$2.run(ThreadExecutorMap.java:74)
    at io.netty.util.concurrent.FastThreadLocalRunnable.run(FastThreadLocalRunnable.java:30)
    at java.lang.Thread.run(Thread.java:748)

Failed in deploying verticle caused by SyntaxError: /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:3:0 Expected an operand but found import import React from 'react'; ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:6:0 Expected an operand but found import import App from './client/app'; ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:7:0 Expected an operand but found import import Routes from './routes'; ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:13:4 Expected an operand but found < <StaticRouter location={url || ctx.normalisedPath()} context={ctx.data()}> ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:13:69 Expected : but found . <StaticRouter location={url || ctx.normalisedPath()} context={ctx.data()}> ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:13:77 Expected an operand but found > <StaticRouter location={url || ctx.normalisedPath()} context={ctx.data()}> ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:14:6 Expected an operand but found <

  ^

/Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:15:4 Expected an operand but found < ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:16:2 Expected ; but found ) ); ^

    at org.graalvm.polyglot.Context.eval(Context.java:344)
    at io.reactiverse.es4x.Runtime$1.apply(Runtime.java:105)
    at io.reactiverse.es4x.Runtime$1.apply(Runtime.java:57)
    at <js> _load(file:/C:/Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/node_modules/.lib/es4x-0.10.1.jar!/io/reactiverse/es4x/jvm-npm.js:92-95:3117-3254)
    at <js> runMain(file:/C:/Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/node_modules/.lib/es4x-0.10.1.jar!/io/reactiverse/es4x/jvm-npm.js:110:3648-3692)
    at org.graalvm.polyglot.Value.invokeMember(Value.java:459)
    at io.reactiverse.es4x.impl.JSVerticleFactory$1.start(JSVerticleFactory.java:81)
    at io.vertx.core.Verticle.start(Verticle.java:66)
    at io.vertx.core.impl.DeploymentManager.lambda$doDeploy$9(DeploymentManager.java:556)
    at io.vertx.core.impl.ContextImpl.executeTask(ContextImpl.java:369)
    at io.vertx.core.impl.EventLoopContext.lambda$executeAsync$0(EventLoopContext.java:38)
    at io.netty.util.concurrent.AbstractEventExecutor.safeExecute(AbstractEventExecutor.java:163)
    at io.netty.util.concurrent.SingleThreadEventExecutor.runAllTasks(SingleThreadEventExecutor.java:510)
    at io.netty.channel.nio.NioEventLoop.run(NioEventLoop.java:518)
    at io.netty.util.concurrent.SingleThreadEventExecutor$6.run(SingleThreadEventExecutor.java:1044)
    at io.netty.util.internal.ThreadExecutorMap$2.run(ThreadExecutorMap.java:74)
    at io.netty.util.concurrent.FastThreadLocalRunnable.run(FastThreadLocalRunnable.java:30)
    at java.lang.Thread.run(Thread.java:748)

SyntaxError: /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:3:0 Expected an operand but found import import React from 'react'; ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:6:0 Expected an operand but found import import App from './client/app'; ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:7:0 Expected an operand but found import import Routes from './routes'; ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:13:4 Expected an operand but found < <StaticRouter location={url || ctx.normalisedPath()} context={ctx.data()}> ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:13:69 Expected : but found . <StaticRouter location={url || ctx.normalisedPath()} context={ctx.data()}> ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:13:77 Expected an operand but found > <StaticRouter location={url || ctx.normalisedPath()} context={ctx.data()}> ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:14:6 Expected an operand but found <

  ^

/Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:15:4 Expected an operand but found < ^ /Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/src/server.js:16:2 Expected ; but found ) ); ^

    at org.graalvm.polyglot.Context.eval(Context.java:344)
    at io.reactiverse.es4x.Runtime$1.apply(Runtime.java:105)
    at io.reactiverse.es4x.Runtime$1.apply(Runtime.java:57)
    at <js> _load(file:/C:/Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/node_modules/.lib/es4x-0.10.1.jar!/io/reactiverse/es4x/jvm-npm.js:92-95:3117-3254)
    at <js> runMain(file:/C:/Users/joshiNar/Downloads/es4x-develop/examples/react-ssr-basic/node_modules/.lib/es4x-0.10.1.jar!/io/reactiverse/es4x/jvm-npm.js:110:3648-3692)
    at org.graalvm.polyglot.Value.invokeMember(Value.java:459)
    at io.reactiverse.es4x.impl.JSVerticleFactory$1.start(JSVerticleFactory.java:81)
    at io.vertx.core.Verticle.start(Verticle.java:66)
    at io.vertx.core.impl.DeploymentManager.lambda$doDeploy$9(DeploymentManager.java:556)
    at io.vertx.core.impl.ContextImpl.executeTask(ContextImpl.java:369)
    at io.vertx.core.impl.EventLoopContext.lambda$executeAsync$0(EventLoopContext.java:38)
    at io.netty.util.concurrent.AbstractEventExecutor.safeExecute(AbstractEventExecutor.java:163)
    at io.netty.util.concurrent.SingleThreadEventExecutor.runAllTasks(SingleThreadEventExecutor.java:510)
    at io.netty.channel.nio.NioEventLoop.run(NioEventLoop.java:518)
    at io.netty.util.concurrent.SingleThreadEventExecutor$6.run(SingleThreadEventExecutor.java:1044)
    at io.netty.util.internal.ThreadExecutorMap$2.run(ThreadExecutorMap.java:74)
    at io.netty.util.concurrent.FastThreadLocalRunnable.run(FastThreadLocalRunnable.java:30)
    at java.lang.Thread.run(Thread.java:748)
Narasinha commented 4 years ago

@pmlopes Hi, any help on the above error is appreciated? thank in advance

Narasinha commented 4 years ago

I have updated my openjdk 1.8 to graalvm-ce-java11-20.0.0 The issue seems to be different now

java -version
openjdk version "11.0.6" 2020-01-14 OpenJDK Runtime Environment GraalVM CE 20.0.0 (build 11.0.6+9-jvmci-20.0-b02) OpenJDK 64-Bit Server VM GraalVM CE 20.0.0 (build 11.0.6+9-jvmci-20.0-b02, mixed mode, sharing)

C:\myapp\react-ssr-basic>yarn start yarn run v1.22.0 $ es4x server.js Exception during JVMCI compiler initialization: Exception in thread "main": jdk.vm.ci.common.JVMCIError jdk.vm.ci.common.JVMCIError: java.lang.ClassNotFoundException: org.graalvm.compiler.hotspot.replacements.HotSpotAllocationSnippets at jdk.vm.ci.hotspot.HotSpotJVMCIRuntime.createClass(HotSpotJVMCIRuntime.java:503) at jdk.vm.ci.hotspot.HotSpotJVMCIRuntime$1.computeValue(HotSpotJVMCIRuntime.java:516) at jdk.vm.ci.hotspot.HotSpotJVMCIRuntime$1.computeValue(HotSpotJVMCIRuntime.java:513) at java.lang.ClassValue.get(JavaLangSubstitutions.java:508) at jdk.vm.ci.hotspot.HotSpotJVMCIRuntime.fromClass0(HotSpotJVMCIRuntime.java:523) at jdk.vm.ci.hotspot.HotSpotJVMCIRuntime.fromClass(HotSpotJVMCIRuntime.java:544) at jdk.vm.ci.hotspot.HotSpotMetaAccessProvider.lookupJavaType(HotSpotMetaAccessProvider.java:63) at org.graalvm.compiler.replacements.SnippetTemplate$AbstractTemplates.findMethod(SnippetTemplate.java:650) at org.graalvm.compiler.replacements.SnippetTemplate$AbstractTemplates.snippet(SnippetTemplate.java:679) at org.graalvm.compiler.hotspot.replacements.HotSpotAllocationSnippets$Templates.(HotSpotAllocationSnippets.java:617) at org.graalvm.compiler.hotspot.meta.DefaultHotSpotLoweringProvider.initialize(DefaultHotSpotLoweringProvider.java:228) at org.graalvm.compiler.hotspot.amd64.AMD64HotSpotLoweringProvider.initialize(AMD64HotSpotLoweringProvider.java:78) at org.graalvm.compiler.hotspot.HotSpotHostBackend.completeInitialization(HotSpotHostBackend.java:100) at org.graalvm.compiler.hotspot.HotSpotGraalRuntime.(HotSpotGraalRuntime.java:210) at org.graalvm.compiler.hotspot.HotSpotGraalCompilerFactory.createCompiler(HotSpotGraalCompilerFactory.java:156) at org.graalvm.compiler.hotspot.HotSpotGraalCompilerFactory.createCompiler(HotSpotGraalCompilerFactory.java:134) at org.graalvm.compiler.hotspot.HotSpotGraalCompilerFactory.createCompiler(HotSpotGraalCompilerFactory.java:52) at jdk.vm.ci.hotspot.HotSpotJVMCIRuntime.getCompiler(HotSpotJVMCIRuntime.java:630) at jdk.vm.ci.hotspot.HotSpotJVMCIRuntime.compileMethod(HotSpotJVMCIRuntime.java:697) at com.oracle.svm.jni.JNIJavaCallWrappers.jniInvoke_VA_LIST_Nonvirtual:Ljdk_vm_ci_hotspot_HotSpotJVMCIRuntime_2_0002ecompileMethod_00028Ljdk_vm_ci_hotspot_HotSpotResolvedJavaMethod_2IJI_00029Ljdk_vm_ci_hotspot_HotSpotCompilationRequestResult_2(JNIJavaCallWrappers.java:0) Caused by: java.lang.ClassNotFoundException: org.graalvm.compiler.hotspot.replacements.HotSpotAllocationSnippets at java.base@11.0.6/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:581) at java.base@11.0.6/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178) at java.base@11.0.6/java.lang.ClassLoader.loadClass(ClassLoader.java:521) at jdk.vm.ci.hotspot.CompilerToVM.lookupType(CompilerToVM.java) at jdk.vm.ci.hotspot.HotSpotJVMCIRuntime.createClass(HotSpotJVMCIRuntime.java:501) ... 19 more java [ '-XX:+IgnoreUnrecognizedVMOptions', '--module-path=node_modules\.jvmci', '-XX:+UnlockExperimentalVMOptions', '-XX:+EnableJVMCI', '--upgrade-module-path=node_modules\.jvmci\compiler.jar', '-cp', 'node_modules\.bin\es4x-launcher.jar;C:\myapp\react-ssr-basic\node_modules\es4x-pm\es4x-pm-0.10.1.jar', 'io.reactiverse.es4x.ES4X', 'server.js' ] java process exited with code 4294967295 Done in 0.69s.

pmlopes commented 3 years ago

The issue is that the extensions .js assumes a commonjs loader. To force ESM you need to use the extension .mjs or prefix the main script name with esm:server.js