Single-SPA and Microfrontend Troubleshooting

Browser Error Console Errors

"exports is not defined" or "require is not defined"

If you see one of these errors, it means that your import map is currently pointing at a JavaScript file that is a CommonJS module. CommonJS is no longer supported by SystemJS. To see the types of modules supported, see the SystemJS docs. The module that is being imported as CommonJS should be named in the error.

For example, let's say it's i18next. We look at the import map line

    "i18next": "/openmrs/frontend/i18next@19.0.1/dist/cjs/i18next.js"

and see that, indeed, it is importing a file in the dist/cjs directory. cjs here stands for CommonJS.

To fix this, we'll look at the contents of the i18next module.

  $ ls node_modules/i18next/ CHANGELOG.md i18next.js index.d.ts karma.backward.conf.js package.json rollup.config.js tslint.json dist i18next.min.js index.js LICENSE README.md tsconfig.nonEsModuleInterop.json $ ls node_modules/i18next/dist/ cjs esm umd


Okay! So this tells us there are a few different distribution options for this module. We want umd. So we change the import map line to

    "i18next": "/openmrs/frontend/i18next@19.0.1/dist/umd/i18next.min.js"

If we are using packmap, we do this by adding that line to override-import-map.json.

Uncaught foo: Application 'foo' died in status LOADING_SOURCE_CODE: systemjs-webpack-interop: There is no such module 'bar' in the SystemJS registry. Did you misspell the name of your module?

This means that there's a module that's looking for bar in the import map and not finding it. It probably should be in your import map, but isn't. If you're using packmap, make sure the module exists in your package.json.

GET http://localhost:8080/openmrs/frontend/foo/index.js net::ERR_ABORTED 404 (Not Found)

Your import map has a value that resolves to the URL in the error. That's a bad URL. Fix it to point to the correct file.

If you're using packmap, add it to override-import-map.json.

If it's very much like the above, in that the file sought is a top-level index.js in the module, that means that the module's package.json doesn't have the key "main". You can suggest to the maintainers of the foo module, perhaps with a pull request, that they add a "main" key to the package.json that points to the distribution file.