Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SSR problems

See original GitHub issue

Description

Hello, I was trying to use ElementUI with react-express-views and when I’m trying to use Button (or any other component) I get an error

Reproduce Steps

Set up express server with express-react-views

const express     = require('express');
const consoleUtil = require('../util/consoleUtil.js');

const app = express();

app.set('views', __dirname + '/views');
app.set('view-engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine());

const router = express.Router();
app.use('/', router);

router.get('/', (req, res, next) => {
    res.render('main/test.jsx', {
        test: 'test text',
        title: 'test title'
    });
});

app.listen(8080, () => {
    consoleUtil.log('Webserver running...')
});

Make test.jsx template in views folder

const React     = require('react');
const ElementUI = require('element-react');

class TestLayout extends React.Component {
    render() {
        return (
            <html>
            <head>
                
            </head>
            <body>
                <ElementUI.Button>
                    Hello
                </ElementUI.Button>
            </body>
            </html>
        );
    }
}

module.exports = TestLayout;

Run the server and go to localhost:8080

Error Trace (if possible)

ReferenceError: document is not defined
    at Object.<anonymous> (/home/jas777/Venom/node_modules/element-react/dist/npm/es5/src/table/TableHeader.js:45:17)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Object.require.extensions.(anonymous function) [as .js] (/home/jas777/Venom/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
    at Function.Module._load (internal/modules/cjs/loader.js:498:3)
    at Module.require (internal/modules/cjs/loader.js:598:17)
    at require (internal/modules/cjs/helpers.js:11:18)
    at Object.<anonymous> (/home/jas777/Venom/node_modules/element-react/dist/npm/es5/src/table/Table.js:37:20)

Solution

No idea

Additional Information

Any additional information, configuration or data that might be necessary to reproduce the issue.

Issue Analytics

State:
Created 5 years ago
Comments:5

Top GitHub Comments

3reactions

Jezfxcommented, Sep 25, 2019

Cheers @n8tb1t Ended up using a similar solution together with loadable to work with Gatsby.

Button = loadable((): any => import("element-react/dist/npm/es6/src/button"))

This did give me import issues when testing with Jest. However, managed to get around it by setting the moduleNameMapper to load element-react instead

moduleNameMapper: {
 "src/components/wrapper": "element-react",
}

1reaction

ondrejrohoncommented, Jul 12, 2019

this issue is still present in 1.4.33 😕

edit: I was able to overcome this issue by loading this problematic component dynamically using [loadable components](smooth-code/loadable-components: React code splitting … - GitHub https://github.com/smooth-code/loadable-components)

this however doesn’t solve this issue if you need to render anything from element-react on server…

Top Results From Across the Web

SSR problems and issues | Chevy SSR Forum

Hi, all. I just joined because I have been searching for an SSR and would like to know what the known issues are...

Chevrolet SSR - problems, statistics, and analysis

The following chart shows the 16 most common problems for Chevrolet SSR cars. The number one most common problem is related to the...

The Real Reason The Chevrolet SSR Failed - HotCars

It seems like an automobile that suffered from “wrong place, wrong time” syndrome. There was a lot of hype for the SSR before...

Chevy SSR Transmission Problems & Cost

Problem – A common Chevrolet SSR transmission problem is an intermittent hard 1-2 shift, often accompanied by engine bogging. This condition can be...

2004 Chevrolet SSR Problems | Kelley Blue Book

How reliable is the 2004 Chevrolet SSR? See the most common repairs performed and learn if your vehicle is at risk for major...