I have this node js application:
require('babel-register');
const router = require("./src/web/router");
and I am getting this error:
how can I import react component in node js?
possible using esm node pacakge, esm is a fast, production ready, zero-dependency ES module loader for Node 6+.
esm on github
If you are not interested in server side rendering your react component I made a small library that makes it easy to render react components from a node application https://github.com/tswayne/react-helper#getting-started. If you are trying to server side render, or import the react component for any other reason, you will need to compile your server side code with babel or use something like babel-node to compile at runtime.
Related
We have a Node app that we're going to rewrite in React next year so we're building all of our new .jsx components in React and injecting them into ReactDOM like they describe here: https://reactjs.org/docs/add-react-to-a-website.html
We build the .jsx React components with Babel/webpack before we deploy the site and this works pretty well.
But now I'm trying to write Jest tests for these components and I'm getting an error when I import the React component file into my test:
createRoot(...): Target container is not a DOM element.
How do I get my test to see the container as a DOM element? I've tried using happy-dom and jsdom but they don't see the document object.
I have tried to implement SSR in react js using express js. While we render the client page from server file it throwing browser level object not supported/undefined error in node modules.
If the window/document/localstorage is undefined in application file then can able to solve the issue making some conditions as recommended in this link React - “localStorage is not defined” error showing
but the error occurred in node modules.
Here I have attached link for the reference for browser level object only working on client side rendering.
https://stackoverflow.com/questions/32126003/node-js-document-is-not-defined#:~:text=The%20short%20answer%20is%20don,are%20not%20available%20in%20node.
My application is,
React: ^16.12.0 (Created by using create-react-app, build done by using react-scripts command)
Node: v14.17.1
Express: ^4.17.3
Screenshot for reference:
document undefined
So I've used Pixi JS as a standalone file for quite sometime now, but I wanted to learn how to use it in Node. The trouble is, I have no idea how to actually import it.
Some clarification:
I'm using Pug to create my webpage, importing a main.js script that will contain base Pixi JS code
I've managed to get my app.js up and running, and can serve my index.pug file
While reading up on how to start a Pixi app with Node JS, I saw that you're supposed to import like
import * as PIXI from 'pixi.js';
But I always get a 404 this way when importing directly in my main.js file. Where am I actually supposed to import?
Is there a component framework like Vue or React except server side, that will let you define your html, css, and js in one component file and then compile them down in a single compilation phase?
I've managed to properly use webpack dev server alongside with a node server (express), using the plugin section inside webpack's config.
It all works fine but now I'm trying to go isomorphic and use client-side components inside the express application.
So far the only problem I'm encountering is that without webpack 'parsing' my server-side code I get to a situation where I require components but the paths are not solved
I.E.
Inside a component
'use strict';
import React from 'react';
import { RouteHandler, Link } from 'react-router';
import Header from 'components/header/main'; // <-- This line causes the error because webpack is not working when parsing this JSX server-side
export default React.createClass({
displayName: 'App',
render() {
return ( // ... More code
Shall I configure webpack in another way or do I have to change all the imports to be valid server-side?
the codebase is here in case you want to see the actual state https://github.com/vshjxyz/es6-react-flux-node-quickstart
In order to be able to require components in a way such as require('components/Header.js'); and avoid using long relative paths such as require('../../../../../../Header.js'); you can add this code to your node app before any require() calls:
process.env.NODE_PATH = __dirname;
require('module').Module._initPaths();
However, since this relies on a private Node.js core method, this is
also a hack that might stop working on the previous or next version of
node.
Other possible solutions to this problem can be found at https://gist.github.com/branneman/8048520
I see 2 options:
Compile client code with webpack as well. If client's entry
point is in the same dir as server's - it should work with your
present code. This looks natural to me.
Use relative paths i.e.
import Header from './components/header/main'