spine-web NMP package is marked as containing "side effects"

[YegorUdovchenko]

Summary

When trying to use spine-web package in Angular-based application built for production, the runtime errors occur. The solution was to mark spine-web library as containing "side-effects".

What went wrong

The spine-web library carries the set of compiled Protobuf classes for common types used in Spine-based applications. They are located in spine-web/proto directory of the published package.

In a common case of developing a web client of a Spine-based application, you will use model types defined in Protobuf and compiled to common JS classes. These classes usually refer to the common Protobuf types (proto.google.* and proto.spine.*). By default, the JS Protobuf compiler adds imports of these files from the root directory of the generated classes. The io.spine.tools.proto-js-plugin then transforms these imports to look for common types in the project's node_modules/spine-web/proto directory. This connection requires the presence of node_modules/spine-web/proto/* files in the web application resulting build.

In the case of Angular-based web client, it is expected to build your application for the production using several built-in optimizations. The goal of build optimizations is to decrease the bundled app in size and improve its performance.

When running the production build over an application where compiled Protobuf messages refer to other messages from spine-web/proto as described above, the build optimizer gets rid of compiled messages from spine-web/proto. It may be specific to the way how these classes are imported in the generated code. A class generated from a Protobuf message doesn't expose any members but modifies the global namespace. This approach is considered as "non-pure" and containing side effects.

To solve this issue the spine-web package was marked as containing side effects. This causes build optimization to include npm package files despite they don't expose any members.

See Webpack optimization.
See Webpack tree shaking

The issue is to find out how to avoid corruption of generated Protobuf classes of the project and others stored in spine-web library without "sideEffects" flag.

Where to find

The "sideEffects": true property in the client-js/package.json marks the spine-web package as containing side effects.