Can not import 'agora-classroom-sdk'

[dlwnsgml0328]

I want to use customized flexible classroom, so I read whole documents about Flexible classroom.

I alerady understand about which components can be customized. (concepts about open source and closed source)

On 'Integrate Flexible Classroom into Your App', the document said that If I want to integrate Flexible Classroom through npm, import agora-classroom-sdk.

$ npm install agora-classroom-sdk

Is there any problems with agora-classroom-sdk on react environment?
I tested two environments (react v-17, react v-18) to use agora-classroom-sdk.
But It didn't work and make same errors on two environments.

./node_modules/agora-electron-sdk/js/Api/index.js
Module not found: Can't resolve '../../build/Release/agora_node_ext' in '.../agora-classroom-immsi/node_modules/agora-electron-sdk/js/Api'

./node_modules/agora-rdc-core/lib/agora-rdc-core.es.js
Module not found: Can't resolve '../build/Release/agora-rc-extension' in '.../agora-classroom-immsi/node_modules/agora-rdc-core/lib'

It works through CDN, (<script src="https://download.agora.io/edu-apaas/release/edu_sdk@2.4.3.bundle.js"></script>)

But I want to customize UI components. So I need to use import 'agora-classroom-sdk' on my pacakage.json

"agora-classroom-sdk": "^2.6.0",

Can we use 'Flexible classroom' service by importing agora-classroom-sdk?

I just want to import my own projects and customize some layouts and color that's it.

repository URL is here

[SunGiantor]

If you encounter error: can't resolve'..// build/Release/agora_ node_ Ext' abnormal,

You need to add in webpack packaging configuration:

externals: { 'agora-electron-sdk': 'commonjs2 agora-electron-sdk' }

for example.
webpack.base.js =》

module.exports = {
externals: { 'agora-electron-sdk': 'commonjs2 agora-electron-sdk' },
resolve: {
fallback: {
crypto: require.resolve('crypto-browserify'),
stream: require.resolve('stream-browserify'),
buffer: require.resolve('buffer/'),
}

2、while in Linux ：Error:unsupported platform!，
update agora-classroom-sdk/package.json ：
"agora_electron": {"electron_version": "12.0.0","prebuilt": true}
to
"agora_electron": {"electron_version": "12.0.0","prebuilt": true,"platform":"win32" | "darwin",}

[dlwnsgml0328]

@SunGiantor
Thanks for replying my question!

If I create my project using CRA(create-react-app), should I have to eject my package to modify webpack?

eject means (react-script)

$ yarn eject 

[SunGiantor]

@dlwnsgml0328 YES

[SunGiantor]

Users who use CRA to create projects will report errors when importing agora-classroom-sdk library:
Could not resolve "../build/Release/agora-rc-extension"
Can't resolve '../../build/Release/agora_node_ext'
Can't resolve '../build/Release/agora-rc-extension'
，
you need to configure the externals property of the webpack config as below:
{
'agora-electron-sdk': 'commonjs2 agora-electron-sdk',
'agora-rdc-core': 'commonjs2 agora-rdc-core',
}
because there's no way to edit webpack configure file directly, so the 'react-app-rewired' project is a option to override the webpack configure.
you can follow the steps as below:
add react-app-rewired as a dev dependency to your your project
npm install react-app-rewired --save-dev
create a new file 'config-overrides.js' at your project's root directory,
module.exports = function override(config, env) {
//do stuff with the webpack config...
console.log('config', config);
if(!config.externals){
config.externals = {};
}
config.externals['agora-electron-sdk'] = 'commonjs2 agora-electron-sdk';
config.externals['agora-rdc-core'] = 'commonjs2 agora-rdc-core';
return config;
};

change the CRA commands:

"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
restart your project

[durdenx]

If i add externals like you said to my config

config.externals['agora-electron-sdk'] = 'commonjs2 agora-electron-sdk';
config.externals['agora-rdc-core'] = 'commonjs2 agora-rdc-core';

It doesn't work on Nextjs and vercel...

I'm using this instead:

<Script
  id="agora-edu-sdk"
  strategy="afterInteractive"
  src="https://download.agora.io/edu-apaas/release/edu_sdk@2.7.1.bundle.js"
/>