ReferenceError when using an AtlasKit Field component

Looking at the source code of the component you are using, it is trying to access the global variables process.env.NODE_ENV and process.env.CI. Those would normally be only available in a Node.js environment, but some frontend build tools (like webpack) have or used to have support for these and substitute them with static strings representing their values during the build process.

Now if the published version of these components still includes the reference to the global variable, this is a bug in the build process of AtlasKit. But since it is not allowed to open Pull Requests for AtlasKit, and you will probably not manage within your lifetime to find anyone at Atlassian to fix this bug for you, you will have to implement a workaround yourself.

In case you are using webpack, webpack 5 removed native support for the process.env variable. You can find information about alternatives here and here.

In our case, we use webpack as a build tool and have the following in the plugins section of our webpack config:

        new webpack.DefinePlugin({
            'process.env': {
                ENV: devMode ? 'development' : 'production'
            }
        })

However, we are still on webpack 4, so I’m not sure this will work on webpack 5. I vaguely remember trying to upgrade to webpack 5 one day but reverting back to 4 because I ran into lots of trouble with AtlasKit.

1 Like