Nicht sicher, warum mein Code den Fehler wirft

Ich render meine React App auf meinem Server und bin wirklich nah dran, aber auf einen Fehler stoßen. Ich habe online gesucht und alle anderen Antworten haben den Fehler nicht behoben. Ich bekomme den Fehler Invariant Violation: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)". Ich habe den Server-Code, den Index und die App zur Verfügung gestellt. Alle aktuellen Antworten sagen, dass die gerenderte Komponente, in der ich das gemacht habe, umgebrochen wurde, aber immer noch der Fehler kommt. Die Route / rendert die App-Komponente.Nicht sicher, warum mein Code den Fehler wirft

Servercode:

app.get('*', (req, res) => { 
    const error =() => res.status(404).send('404'); 
    const htmlFilePath = path.join(__dirname, '../build', 'index.html'); 
    fs.readFile(htmlFilePath, 'utf8', (err, htmlData) => { 
    if(err) { 
     error() 
    } else { 
     match({ routes, location: req.url }, (err, redirect, ssrData) => { 
     if(err) { 
      error() 
     } else if(redirect) { 
      res.redirect(302, redirect.pathname + redirect.search); 
     } else if(ssrData) { 
      const store = createStoreWithMiddleware(reducers) 
      const provider = react.createElement(Provider, { store: store }, [RouterContext]); 
      const ReactApp = renderToString(provider); 
      const RenderedApp = htmlData.replace('{{SSR}}', ReactApp); 
     } else { 
      error() 
     } 
     }) 
    } 
    }) 
})

Index:

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <Router history={browserHistory} routes={routes} /> 
    </Provider> 
    , document.getElementById('root'));

App:

class App extends Component { 

    componentWillMount() { 
    this.props.info(); 
    } 

    render() { 

    return (
     <div> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ info }, dispatch); 
} 

export default connect(null, mapDispatchToProps)(App);

Fehler: Unexpected token (8:15)

6 | switch(action.type) { 
    7 |  case TEST_CASE: 
> 8 |  return { ...state, check: true }; 
    |    ^
    9 |  case REAL_CASE: 
    10 |  return { ...state, check: false};

Quelle

2017-02-19 joethemow

Sie können ES6 Features wie Objekt Rest in Vanilla Node nicht verwenden. Sie müssen entweder ein Serverpaket mit Webpack kompilieren oder dieses Feature nicht verwenden. –

Ich habe 'babel-polyfill' installiert und '' babel-polyfill' 'am oberen Rand meines Server-Codes benötigt und bekomme immer noch den Fehler, muss ich noch etwas anderes tun? – joethemow

Wie Andy gesagt hat, musst du das webpack verwenden, um Codes zu bündeln, oder 'require ('babel-register')' oben auf deinem Servercode setzen, ein '.babelrc' erstellen, um das Preset wie' es2015' zu setzen. –

Sie müssen die Komponente <RouterContext /> mit der Komponente <Provider /> umhüllen. Ihr Server-Code sieht dann so aus:

Quelle

2017-02-19 13:42:34

Ah ok das macht Sinn, aber wie würde ich es ohne die Anker-Tags machen? Der Knoten erkennt diese Syntax nicht, deshalb habe ich 'react.createElement' verwendet. – joethemow

' const provider = React.createElement (Provider, {store: store}, [RouterContext]) 'Und übergebe den' provider' an 'renderToString() '. –

Also, wenn ich die Route zu meinen Reduzierungen hinzufügen '(createStoreWithMiddleware (Reduzierungen))' Ich bekomme einen Fehler. 'switch (action.type) { 7 | Fall STATUS: > 8 | return {... state, status: true}; 'Unexpected token – joethemow

Nicht sicher, warum mein Code den Fehler wirft

Antwort

Verwandte Themen