Route pointing to @noView with React component returns TypeError

[peacechen]

I'm submitting a bug report

I've written an app that contains React components. However the Aurelia Router doesn't like pages that have @noView, returning TypeError. #415 touched on this but there doesn't seem to be a resolution on it. getViewStrategy is mentioned but it's not clear whether it plays nice with Aurelia's router.

The flow looks like:

.------------------.      .---------------.
|  Landing Page:   |  --> | React         |  --> ....
| Aurelia template |      |  Component    |
`------------------'      `---------------'

• Library Version: Aurelia 1.1.2

Please tell us about your environment:

• Operating System: Windows 7

• Node Version: 6.2.0

• NPM Version: 3.8.9

• JSPM OR Webpack AND Version Webpack 2.4.1

• Browser: Chrome

• Language: ES6

Current behavior: Route with @noView results in TypeError.

Expected/desired behavior:

• What is the expected behavior? Render a React component without errors.

• What is the motivation / use case for changing the behavior? The ability to leverage modules from React and other libraries is very powerful.

[EisenbergEffect]

The main issue is that Aurelia doesn't know how to insert the React component into the router-view.

[peacechen]

Is there any work-around, short term or long term?

[EisenbergEffect]

You can use an @inlineView with a single element that you render the React component into. You could also create a custom view strategy that returned an Aurelia View that owned the React component's DOM element (though this is a bit more involved). The second option is probably the best way to handle it because it could be applied via a decorator.