Update 3.0.0-preview-known-issues.md (#2410)

Add react issues and workarounds to the list of known issues.
2019-03-08 23:24:03 +01:00 · 2019-03-08 23:24:03 +01:00 · 844d8f33fa
parent ca47ba0fce
commit 844d8f33fa
1 changed files with 96 additions and 0 deletions
--- a/release-notes/3.0/preview/3.0.0-preview-known-issues.md
+++ b/release-notes/3.0/preview/3.0.0-preview-known-issues.md
@ -83,3 +83,99 @@ This document lists known issues for **.NET Core 3.0 Preview releases** which ma
        })
        ...
    ```
+
+- **React template with authentication has a syntax error on build** in file /ClientApp/src/components/api-authorization/ApiAuthorizationConstants.js
+When building or running the react template with authentication, after opening the browser, the app won't work and the following error message will be displayed.
+  ```console
+  ×
+  Error: Module build failed: SyntaxError: ClientApp/src/components/  api-authorization/ApiAuthorizationConstants.js: Unexpected token (27:25)
+  
+    25 |   DefaultLoginRedirectPath: '/',
+    26 |   ApiAuthorizationClientConfigurationUrl: `/_configuration/$ {ApplicationName}`,
+  > 27 |   ApiAuthorizationPrefix = prefix,
+       |                          ^
+    28 |   Login: `${prefix}/${LoginActions.Login}`,
+    29 |   LoginFailed: `${prefix}/${LoginActions.LoginFailed}`,
+    30 |   LoginCallback: `${prefix}/${LoginActions.LoginCallback}`,
+  ```
+  * Workaround:
+  Replace `ApiAuthorizationPrefix = prefix,` with `ApiAuthorizationPrefix: prefix,`
+
+- **Import error "Cannot find module "./components/api-authorization/Login"**: When building or running the react template with authentication, after opening the browser, the app won't work and the following error message will be displayed.
+  ```console
+  ×
+  Error: Cannot find module "./components/api-authorization/Login"
+  ▼ 13 stack frames were expanded.
+  ./src/components/api-authorization/ApiAuthorizationRoutes.js
+  https://localhost:44315/static/js/bundle.js:53166:7
+  __webpack_require__
+  ClientApp/webpack/bootstrap 43633f0e2b726d97cc14:678
+  fn
+  ClientApp/webpack/bootstrap 43633f0e2b726d97cc14:88
+  ./src/App.js
+  https://localhost:44315/static/js/bundle.js:51925:111
+  __webpack_require__
+  ClientApp/webpack/bootstrap 43633f0e2b726d97cc14:678
+  fn
+  ClientApp/webpack/bootstrap 43633f0e2b726d97cc14:88
+  ./src/index.js
+  https://localhost:44315/static/js/bundle.js:54708:63
+  __webpack_require__
+  ClientApp/webpack/bootstrap 43633f0e2b726d97cc14:678
+  fn
+  ClientApp/webpack/bootstrap 43633f0e2b726d97cc14:88
+  0
+  https://localhost:44315/static/js/bundle.js:54860:18
+  __webpack_require__
+  ClientApp/webpack/bootstrap 43633f0e2b726d97cc14:678
+  (anonymous function)
+  ClientApp/webpack/bootstrap 43633f0e2b726d97cc14:724
+  (anonymous function)
+  https://localhost:44315/static/js/bundle.js:728:10
+  ```
+
+  * Workaround:
+    * Remove the file /ClientApp/src/components/api-authorizationApiAuthorizationRoutes.cs
+    * Replace the contents of App.js with these
+      ```javascript
+      import React, { Component } from 'react';
+      import { Route } from 'react-router';
+      import { Layout } from './components/Layout';
+      import { Home } from './components/Home';
+      import { FetchData } from './components/FetchData';
+      import { Counter } from './components/Counter';
+      import { Login } from './components/api-authorization/Login'
+      import { Logout } from './components/api-authorization/Logout'
+      import AuthorizeRoute from './components/api-authorization/AuthorizeRoute';
+      import { ApplicationPaths, LoginActions, LogoutActions } from './components/api-authorization/ApiAuthorizationConstants';
+
+      export default class App extends Component {
+        static displayName = App.name;
+
+        render () {
+          return (
+            <Layout>
+              <Route exact path='/' component={Home} />
+              <Route path='/counter' component={Counter} />
+              <AuthorizeRoute path='/fetch-data' component={FetchData} />
+              <Route path={ApplicationPaths.Login} render={() => loginAction(LoginActions.Login)} />
+              <Route path={ApplicationPaths.LoginFailed} render={() => loginAction(LoginActions.LoginFailed)} />
+              <Route path={ApplicationPaths.LoginCallback} render={() => loginAction(LoginActions.LoginCallback)} />
+              <Route path={ApplicationPaths.Profile} render={() => loginAction(LoginActions.Profile)} />
+              <Route path={ApplicationPaths.Register} render={() => loginAction(LoginActions.Register)} />
+              <Route path={ApplicationPaths.LogOut} render={() => logoutAction(LogoutActions.Logout)} />
+              <Route path={ApplicationPaths.LogOutCallback} render={() => logoutAction(LogoutActions.LogoutCallback)} />
+              <Route path={ApplicationPaths.LoggedOut} render={() => logoutAction(LogoutActions.LoggedOut)} />
+            </Layout>
+          );
+        }
+      }
+
+      function loginAction(name){
+          return (<Login action={name}></Login>);
+      }
+
+      function logoutAction(name) {
+          return (<Logout action={name}></Logout>);
+      }
+      ```