Error: initializeBlock should only be called once

[Fredrick_Esedo]

Am trying to export or call two functions Eg. (teachers.js and student.js) that are link up to index.js but it throws error initializeBlock should only be called once.

If i tried to call the both at index.js as per below, it will not work.

initializeBlock(() => {<Teachers />; <Students />});

How do I solve this issue.

student.js

import {initializeBlock, useBase, useRecords, createRecordAsync, updateRecordAsync, updateRecordsAsync, table, useRecordIds} from '@airtable/blocks/ui';
import React, { Component } from "react";
import {base} from '@airtable/blocks';

function Students (){ 
const base = useBase();
 const tab = base.getTableByNameIfExists('students_table');
 const records = useRecords(tab);
return (
         <ul>

   <h1>Welcome to Students Records</h1> <br />

             {records.map(record => {

                 return <li key={record.id}>{record.id}</li>
             })}
         </ul>
     );
} 
  
//initializeBlock(() => <Students />);

export default Students;

teachers.js

import {initializeBlock, useBase, useRecords,createRecordAsync, updateRecordAsync, updateRecordsAsync, table, useRecordIds} from '@airtable/blocks/ui';
import React, { Component } from "react";
import {base} from '@airtable/blocks';

function Teachers (){ 
const base = useBase();
 const tab2 = base.getTableByNameIfExists('teachers_table');
 const records = useRecords(tab2);
return (
         <ul>

   <h1>Welcome to Teachers Records</h1> <br />

             {records.map(record => {

                 return <li key={record.id}>{record.id}</li>
             })}
         </ul>
     );
} 
  
//initializeBlock(() => <Teachers />);

export default Teachers;

index.js

import {
    initializeBlock,
    useBase,
    useRecords,
} from '@airtable/blocks/ui';

import React, { Component } from 'react'; 
import { BrowserRouter as Router, Route, HashRouter,Link, Switch } from 'react-router-dom';

import Teachers from './teachers'; 
import Students from './students'; 
  
class App extends Component { 
  render() { 
    return ( 
// rounting links goes here

   ); 




  } 
} 
  
//initializeBlock(() => {<Teachers />; <Students />});
export default App;

[Matthew_Thomas · Accepted solution]

initializeBlock() is the Airtable function to “start” your Custom Block. Teachers and Students aren’t separate blocks within your “main” custom block, but as you say functions, or in React-speak, Components, that you want to use.

From the code you’ve posted, index.js is the main code for your custom block and is where you should have the call to initializeBlock(). You’ve already imported the Teachers and Student files, so you would be able to use those components inside index.js with code that looks something like:

<Student
    customProp1=val
    customProp2=val2
>

I believe React handles both function- and class-based components, so you might be able to keep your index.js as is with

class App extends Component {}

but if you take a look at some of the example Blocks, most if not all, take a function-based approach like you do in the Teacher/Student files.

---

If this answers your question, please consider marking it as “solution”. If not, I’m happy to work with you further. Thanks!

[Fredrick_Esedo]

@Matthew_Thomas thanks for the explanations.

[Fredrick_Esedo]

@Matthew_Thomas, I have another question. am trying to import my css files style.css and bootstrap files. but the default helloworld does not have webpack.config file. Do I have to configure and install webpack myself

[Kasra]

Importing CSS files isn’t currently supported, but you can do something like this:

import {loadCSSFromString} from '@airtable/blocks/ui';
loadCSSFromString('body { background: red; }');

[Fredrick_Esedo]

Thanks alot for the insight