Popular posts

The concert component is in a subfolder of the src folder, and imported here:

//index.js
import {Concert} from './Concert/concert';

I tried an absolute path for my system (C:/... and so on), which doesn't work either, but I didn't try an url, no.

Then it should be the issue. You will need to form the path uri compliant since during runtime there is no such thing like local. Everything is served by a Webserver.

Is there a way to amend my code to use my local json file or do I need to do something like localhost:3000/path-to-the-json as source? Or should I just upload my json or something?

The easiest way is to tell your Webserver to serve the file. Then you can access it by localhost:3000/etc...

Webpack dev Server has options to serve stuff. What toolchain are you using?

I'm using NPM with node.js installed.

Ok but npm doesn’t bundle or serves your webpage. Do you use webpack-dev-Server or something else? Basically you json file has to be served from you Webserver so axios can grab it.

I have used this to setup my project: github.com/facebook/create-react-app

As I'm reading now, Webpack and Babel are both included preconfigured.

Ok, i have a custom webpack script but create-react-App also uses webpack-dev-Server under the hood.

The comment over the contentBase property says to put files that should be served in the source folder and reference them in the entry js file.

github.com/facebook/create-react-app/blob/next/pa…

So I should just do this

import './concerts.json';

in my index.js file? How would I reference it down in

<Concert source="" />

Well I’m theory at the Webserver root. Add the import and then look with browser dev tools where the file exactly is served. Then you can test it in the browser by accessing the json via url. The working url you can put in axios, it should work there es well

The path seems to be "localhost/static/js/C:/Users/Marvin/WebstormProje… but that doesn't work either

More likely localhost:3000/static/js/concerts.json?

In the end it should be handled like any other resource file like images. If you have a GitHub repo with a sample we can take a look at it

No, doesn't work either. Here's a link to an image of the developer tools:

abload.de/img/react_problemkyst3.png

Well the file is served. Good so far. Sometimes the folders shown there can be misleading. Take the full url to index.html off you browser adress bar and replace index.html and any trailing characters with src/concerts.json

Edit: sry didn’t see the src subfolder

Yeah, I'm a bit at a loss what to do now. Wouldn't the full url to index.html just be localhost ?

Edit: Maybe this might be useful? abload.de/img/react_problem2vqj9q.png

yep. try localhost:3000/src/concerts.json

the file is served by the webserver. you have just to find correct url to it.

That url is also sadly not working :/

When I hover over the concerts.json file name in that last picture it also only shows me that long path from earlier.

In case it helps in any way, here are screenshots of the error:

abload.de/img/react_errorstack1w9ot5.png

abload.de/img/react_errorstack2e1ri7.png

you have to add http:// before localhost. have you tried the url in the browser? when it works in the browser line the axios will work too.

Doesn't work with http:// either, regardless of what I add after localhost:3000/ in the browser, it defaults to the main site

Edit: Not as in I get redirected to localhost:3000, but that even if it says localhost:3000/src/concerts.json in the address bar, the main site is displayed and then gives the error

well the try something different.

github.com/facebook/create-react-app/blob/master/…

try moving the file to that public folder and look again with devtools where the file is served and try to access it via browser line

Okay, I managed for concerts.json to be served under localhost/concerts.json and typing it into the browser shows me the file, by adding

<link rel="json" href="%PUBLIC_URL%/concerts.json">

into the index.html header.

Now I still have the problem that I'm getting the same error stack even with

ReactDOM.render(<Concert source="localhost/concerts.json" />, document.getElementById('concert'));

try building the URL within JSX like in this example:

sadly the docs don't tell the final URL, just out of curiousity print "process.env.PUBLIC_URL" to the console

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

Logging "process.env.PUBLIC_URL" returns an empty string.

As for building the URL within JSX, do you mean like this?

ReactDOM.render(<Concert source={process.env.PUBLIC_URL + '/concerts.json'}/>, document.getElementById('concert'));

yes th JSX looks good.

Empty is kind of unexpected, but if it works then it would also make sense.

The JSX looks right to me too, but it still wasn't the solution apparently

Edit: Hovering over "process" shows me the line 'Element not imported' (autocompletion for the PUBLIC_URL part worked though in my IDE)

well thats very strange. I can only again encourage you to create a sample project and upload it to github. tomorrow I would take a look at it.

Will do, and will post the link here. Thank you very much for the lasting help you're giving a newbie like me!

Edit: Have it on github now github.com/mdick1611/react-konzertportal

just looked at it. problem was that the state of concerts was never initialized. though it never got a chance to request the json because of the uninitialized state. class should look like this and it works fine. probably there was never an issue with the json.

/**
 * Created by Marvin on 15.02.2018.
 */
import React from 'react';
import './concert.css';

var axios = require('axios');

export class Concert extends React.Component {
 constructor(props) {
 super(props);
 this.state = this.getInitialState();
    }

 getInitialState() {
 return {
 concerts: []
        };
    }

 componentDidMount() {
 var th = this;
 this.serverRequest = axios
            .get(this.props.source)
            .then(function(result) {
 th.setState({
 concerts: result.data.concerts
                });
            });
    }

 componentWillUnmount() {
 this.serverRequest.abort();
    }

 render() {
 return (
 <div>
 <h1>Concerts!</h1>
 {this.state.concerts &&
 this.state.concerts.map(function(concert) {
 return (
 <div key={concert.id} className="concert">
 <a href="placeholder.asp">
 {concert.name}
                                    has a price of
 {concert.price}
 </a>
 </div>
                        );
                    })}
 </div>
        );
    }
}

Thank you very much! I can't believe that I didn't notice something like this.