Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ReactDOM is not defined server side by default #186

Closed
SoonDead opened this issue Nov 6, 2015 · 8 comments
Closed

ReactDOM is not defined server side by default #186

SoonDead opened this issue Nov 6, 2015 · 8 comments

Comments

@SoonDead
Copy link
Contributor

SoonDead commented Nov 6, 2015

I'm using React.NET with Webpack.

The internals of my ReactConfig:

ReactSiteConfiguration.Configuration.SetLoadBabel(false)
    .AddScriptWithoutTransform("~/Scripts/build/server.bundle.js");

The server bundle does not contain React. Therefore I put this in my webpack.config.js:

externals: {
    react: 'React',
    "react-dom": 'ReactDOM',
}

ReactDOM is undefined on the serverside.

The workaround will get me fired :(

externals: {
    react: 'React',
    "react-dom": 'React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED',
}
@PeteDuncanson
Copy link

I went through all this too for several days with Browserify, in the end I just included React in my bundle (via Webpack which is far easier to use and reason about than Browserify). I understand this might not be ideal (which is why I worked on it for days) but in the end it solved a lot of my issues. Is that something you can do?

@SoonDead
Copy link
Contributor Author

SoonDead commented Nov 6, 2015

I might be able to pack react-dom into my bundle, only React needs to be in he global scope. I will try that on monday.

The woraround I mention works fine too, it is just ugly.

@Daniel15
Copy link
Member

Daniel15 commented Nov 6, 2015

How are you loading React? If you're loading it from a CDN, you just need to load ReactDOM in addition to React:

<script src="https://fb.me/react-0.14.2.js"></script>
<script src="https://fb.me/react-dom-0.14.2.js"></script>

@SoonDead
Copy link
Contributor Author

SoonDead commented Nov 6, 2015

On the client side I'm referencing react.js and react-dom.js locally.

On the server side I'm using whatever ReactJS.NET uses by default.

My issue is only a server-side one. I'll explain it in more detail on monday since it's on my work machine.

@Daniel15
Copy link
Member

Daniel15 commented Nov 6, 2015

ReactDOM shouldn't be used server-side, it's only for client-side stuff. Perhaps something is unintentionally using it server-side. Are you able to provide a stack trace of the error you're encountering?

@SoonDead
Copy link
Contributor Author

SoonDead commented Nov 6, 2015

It is used by the modal component of react-bootstrap. There is a import ReactDOM from 'react-dom'; at the start of a file and although the server does not actually call anything on it the import fails if react-dom is not available.

@Daniel15
Copy link
Member

Daniel15 commented Nov 7, 2015

To be honest I think your workaround is fine for now, even with the scary SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED 😆

I'll probably end up doing something like this in shims.js:

var ReactDOM = React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

as this matches up with what react-dom.js on the CDN does.

At which point you could do 'react-dom': 'ReactDOM'in your Webpack externals

@onethread
Copy link

@PeteDuncanson How were you able to avoid an invariant violation/"multiple copies of React error" doing it that way (since you'll need to import React/ReactDOM again to get the client-side working)?

Nevermind, I imagine you exposed them via webpack. That seems to work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants