react-bootstrap/react-overlays

Enable SSR rendering again

miracle2k opened this issue · 8 comments

miracle2k commented

With Version 3, I am running into the issue that it seems to no longer work in a SSR scenario. I am probably overlooking something obvious.

I am getting this message:

/Users/michael/Development/mine/foobar/node_modules/@popperjs/core/lib/modifiers/arrow.js:1
import getBasePlacement from "../utils/getBasePlacement.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1063:16)
    at Module._compile (internal/modules/cjs/loader.js:1111:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:996:32)
    at Function.Module._load (internal/modules/cjs/loader.js:896:14)
    at Module.require (internal/modules/cjs/loader.js:1036:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/michael/Development/mine/foobar/packages/foobar/node_modules/react-overlays/cjs/usePopper.js:14:37)
    at Module._compile (internal/modules/cjs/loader.js:1147:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)

That is, this seems to be a problem importing popper.js via node. Here is what I think is happening:

react-overlays/cjs/usePopper.js tries to require

var _eventListeners = _interopRequireDefault(require("@popperjs/core/lib/modifiers/eventListeners"));

However, @popperjs/core/lib actually uses import syntax, and it's cjs files are in dist/cjs.

jquense commented

@FezVrasta what is the intended way to do this? there aren't cjs modules to cherry-pick from it looks like

FezVrasta commented

Does the above error mean the whole application is running on Node without any build/transpilation step ahead?

jquense commented

yeah that seems odd to me as well.

I've got a work around here: #781 for the time being

miracle2k commented

Right, that was my mistake. The project is based on razzle, which indeed runs a compiled version of the server, so this should not happen I suppose. I'll have a closer look what is wrong with my project.

jquense commented

yeah It'd be great to understand why this happen if you can. It'll help us craft the right build setups. My guess is Razzle is intentionally ignoring stuff in node_modules and marking them as external so webpack or whatever is not dealing with the imports.

miracle2k commented

Seems the issue is that razzle uses nodeExternals to not bundle anything in node_modules, see:

https://github.com/jaredpalmer/razzle/blob/a7910dcf01aa5d0da4f7c760ce579b35e5d9eef6/packages/razzle/config/createConfig.js#L284

So exactly like you said, on purpose react-overlays will be imported via node without a transform.

qiqiboy commented

@jquense The same issue in react-overlays@3.1.1/cjs/Modal.js:

// react-overlays@3.1.1/cjs/Modal.js 
32: var _usePrevious = _interopRequireDefault(require("@restart/hooks/esm/usePrevious"));
33:
34: var _useEventCallback = _interopRequireDefault(require("@restart/hooks/esm/useEventCallback"));
/Users/qiqiboy/reproduce/node_modules/_@restart_hooks@0.3.22@@restart/hooks/esm/usePrevious.js:1
import { useEffect, useRef } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1070:16)
    at Module._compile (internal/modules/cjs/loader.js:1120:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1042:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object. (/Users/qiqiboy/develop/tigerNewTest/tiger-new/node_modules/_react-overlays@3.1.1@react-overlays/cjs/Modal.js:32:43)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
jquense commented

oops, fixed in 3.1.2