Error after updated to v7.3.0

[colloquet]

Hi,

I have updated react-waypoint to 7.3.0 today and I am getting this error:

Everything is working fine after I revert back to v7.2.0

Is this a bug or am I missing something?

Thanks!

[trotzig]

The mjs extension was added (and discussed) in #220. I don't have much context on that change, so I'm going to ask @lencioni for help here. Thanks for taking the time to report this.

[lencioni]

Hi, sorry you are running into this issue! It's a little hard for me to understand what might be going wrong from just looking at your screenshot. Is there any chance you could put up a repo that minimally reproduces the issue?

…

On Wed, Oct 4, 2017, 4:13 AM Henric Trotzig ***@***.***> wrote: The mjs extension was added (and discussed) in #220 <#220>. I don't have much context on that change, so I'm going to ask @lencioni <https://github.com/lencioni> for help here. Thanks for taking the time to report this. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#221 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAL7zrcI_-LMeom6oH-0nlUsJWRWhiMJks5so2hFgaJpZM4PtEOJ> .

[colloquet]

Hi @lencioni ,

I have quickly setup a react app using create-react-app:

https://github.com/colloquet/waypoint-test

I have only added react-waypoint v7.3.0 and a Waypoint component to App.js and still getting the same error.

Colloque

[dominikbulaj]

I have exactly the same problem after upgrading to 7.3.0
When I force version 7.2.0 it works. Same issue as in @colloquet case.

[waterizzet]

Unfortunately I've run into the same problem. After updating it to 7.3 it started giving me a similar error:

invariant.js:42 Uncaught Error: Invalid tag: /static/media/index.73a4b08a.mjs
at invariant (invariant.js:42)
at validateDangerousTag (ReactDOMComponent.js:343)
at new ReactDOMComponent (ReactDOMComponent.js:370)
at Object.createInternalComponent (ReactHostComponent.js:39)
at instantiateReactComponent (instantiateReactComponent.js:77)
...

[lencioni]

Thanks for the repo, it was very helpful.

I'm not super familiar with create-react-app, but it seems to me that its webpack has been configured to recognize files with names that end in .mjs as a static asset, so instead of returning a reference to what is being exported, it is outputing the file in static/media and giving you a string with the path to this file.

I opened an issue on create-react-app here: facebook/create-react-app#3237

In the short term, you can either stick with 7.2.0 for now, or import waypoint like import Waypoint from 'react-waypoint/build/index.js';

Sorry for the trouble, I hope we can get this resolved soon!

[jnsdls]

same issue here, glad you reported it upstream to CRA, will track both that and this and stick with 7.2.0 for now :)

[trotzig]

A fix for this was released in 7.3.1. Thanks for the quick reports everyone!

[colloquet]

Thanks! Appreciate your help!

[benbrandt]

What is the motivation for going with .mjs? Most libraries that have /es/ imports still use .js. It just requires a lot of changes in the build process (webpack/eslint/jest/flow) to support an additional file extension, that from my understanding, is a new extension for node?
Just curious to get some insight on the decision. Thanks!

[jamesplease]

that from my understanding, is a new extension for node?

This is exactly right, and is the primary reason for the decision. Although it's still early on, there's a good chance that .mjs will one day be the extension that is typically associated with the usage of ES2015 modules. This library has just adopted the pattern a bit early.

It just requires a lot of changes in the build process (webpack/eslint/jest/flow) to support an additional file extension

I brought up these concerns when we merged in the PR that added this extension. The team decided in that PR that it's worth trying it out. My favorite part of the folks who work on Waypoint is that they're really reasonable. If the extension ends up causing too many issues for users, then I'm sure the team would consider switching back to .js, even if only for a period of time. For now, though, 7.3.1 seems stable. Have you run into specific issues with other tooling on the latest release?