Minimal Configuration error

[chppppp]

I am a newb to React so forgive me :)

I have a base project using this tutorial: https://reactjs.org/tutorial/tutorial.html

I am trying to display the default Minimal Configuration table on my page. I have added all the relevant config, including the webpack.config.js in my root dir. When I npm start the webserver boots but my page gives me an error: Error: Target container is not a DOM element.

Any help/advice is appreciated. Thank you!

[chppppp]

Ooops - I did not add the appropriate code to index.html. After doing so I get a new error

Error: Element ref was specified as a string (tableLoaded) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a function component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
See https://fb.me/react-refs-must-have-owner for more information.

[arthurkushman]

Hello thanks for issue, I'll definitely take a look at this problem later probably at week-end. It seems like deprecated features in ReactJS.

[chppppp]

Thanks Arthur! I was thinking it could be webpack related as well, the webpack.config.js references a main.js but in my project im using index.js.

I am a newb to React so I am still figuring out all the little pieces :)

[arthurkushman]

Launched on webpack config:

const path = require('path');

const config = {
    mode: 'development',
    entry: './main.js',
    output: {
        path: path.normalize(__dirname + '/build'),
        publicPath: '',
        filename: 'index.js',
        library: '[name]',
        chunkFilename: '[name].[chunkhash].js'
    },
    devServer: {
        inline: true,
        port: 8888
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['@babel/preset-react'] // stage-2 = transform-object-rest-spread etc
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
            },
            {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    externals: {
        'react/addons': true
    },
    node: {
        console: false,
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    }
};
module.exports = config;

There are actually crucial changes again as always in webpack

Also check package.json file there shouldn't be any presets, but

presets: ['@babel/preset-react'] // stage-2 = transform-object-rest-spread etc

an example of package.json file:

const path = require('path');

const config = {
    mode: 'development',
    entry: './main.js',
    output: {
        path: path.normalize(__dirname + '/build'),
        publicPath: '',
        filename: 'index.js',
        library: '[name]',
        chunkFilename: '[name].[chunkhash].js'
    },
    devServer: {
        inline: true,
        port: 8888
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['@babel/preset-react'] // stage-2 = transform-object-rest-spread etc
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
            },
            {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    externals: {
        'react/addons': true
    },
    node: {
        console: false,
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    }
};
module.exports = config;

[chppppp]

So I think my issue was with webpack... I just cant get any data now using https://jsonplaceholder.typicode.com/todos for testing. My table just says Loading...

[arthurkushman]

Now I see - u don't have required rows key in the document, so it should look like that:

{ "rows": [
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
.....
]
}

[chppppp]

Thank you!!!

[chppppp]

Is there a way to change the "rows" part to accept different formatted json feeds?

[arthurkushman]

For example?

[chppppp]

give me a bit to figure out what to ask :) need to test some code!

Thanks so much!

[chppppp]

I created an API that follows the spec:

{
  "rows": [
    {
      "date": "Oct 30 ", 
      "hostname": "frickyou", 
      "msg": "anacron[23035]: Job `cron.daily' terminated", 
      "time": "00:07:40"
    }, 
    {
      "date": "Oct 30 ", 
      "hostname": "frickyou", 
      "msg": "anacron[23035]: Normal exit (1 job run)", 
      "time": "00:07:40"
    }, 

I modified my code to match the dictionary keys. I no longer get Loading... but I get no data now.

edit - i have a network error in my console logs. sorry!

PS -> really appreciate the help :) Thank you

[chppppp]

I have a network error in my console logs but the api works fine from my browser... when this makes the ajax call, does the server or the browser make that call?

the console says TypeError: NetworkError when attempting to fetch resource.

but in the network tab i see

it is responding with a 200. My api endpoint is a flask app that looks like:

import re
@app.route("/api/syslog", methods=["GET"])
def syslog():
    f = open("/var/log/syslog","r").readlines()
    l = []
    for i in f:
        a = re.match('(\S*\s\S*\s)(\d*:\d*:\d*)\s(\S*)\s(.*)\\n',i)
        #print( a.groups() ) 
        e = { "date": a.group(1),
                "time": a.group(2),
                "hostname": a.group(3),
                "msg": a.group(4) }
        l.append(e)
        d = {"rows": l }
    print( d )
    return jsonify(d)

On the webserver I see

192.168.1.70 - - [30/Oct/2019 19:58:58] "OPTIONS /api/syslog HTTP/1.1" 200 -

seems the ajax request is only making an OPTIONS request?

thanks for your help

edit - adding requestType: 'GET', to my main.js didnt fix it =[

edit2 - it appears this OPTIONS thing is related to CORS. I tweaked the backend API and I am getting GET requests from my api. However, I am back to the Loading... situation :) my browser console has an error uncaught exception: Object but in the network tab i see we did GET from the api.

My API is returning in the right format... idk what to do.

[chppppp]

apparently the id key is required in the json results :)

[arthurkushman]

rows must be anyway, but the inner structure is free to change in any way:

{ "rows": [
  {
   {"log":"Oct 30 00:07:40 frickyou anacron[23035]: Job `cron.daily' terminated\n"}, 
   {"log":"Oct 30 00:07:40 frickyou anacron[23035]: Normal exit (1 job run)\n"}, 
  },
.....
]
}

so there will be 1 column log, you can put as many columns as u wish and those which shouldn't be displayed will be empty. PS imagine this as rows/columns - nothing more nothing less.

[arthurkushman]

apparently the id key is required in the json results :)

Yes, if you didn't set GT_RowId, then the 'id' will be taken for data manipulation.