Can not import 'agora-classroom-sdk'

[agoraio-community]

Can not import 'agora-classroom-sdk'

[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/[email protected]"
/>