Enable SSR rendering again

[miracle2k]

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]

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

[FezVrasta]

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

[jquense]

yeah that seems odd to me as well.

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

[miracle2k]

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]

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]

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]

@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]

oops, fixed in 3.1.2