fix: Remove webpack imports in npm package

babel.config.js

@@ -18,6 +18,12 @@ module.exports = function (api, ...args) {
     '**/*.component-test.js',
     '**/__mocks__/*.js'
   ]
+  const npmIgnore = [
+    ...ignore,
+    'src/common/config/env.cdn.js',
+    'src/loaders/configure/nonce.cdn.js',
+    'src/loaders/configure/public-path.cdn.js'
+  ]
   const presets = [
     '@babel/preset-env'
   ]
@@ -45,15 +51,7 @@ module.exports = function (api, ...args) {
       ]
     },
     webpack: {
-      ignore,
-      plugins: [
-        [
-          './tools/babel/plugins/transform-import',
-          {
-            '(constants/)env$': '$1env.cdn'
-          }
-        ]
-      ]
+      ignore
     },
     'webpack-ie11': {
       ignore,
@@ -73,55 +71,26 @@ module.exports = function (api, ...args) {
             }
           }
         ]
-      ],
-      plugins: [
-        [
-          './tools/babel/plugins/transform-import',
-          {
-            '(constants/)env$': '$1env.cdn',
-            'polyfill-detection$': 'polyfill-detection.es5'
-          }
-        ]
       ]
     },
     'npm-cjs': {
-      ignore,
+      ignore: npmIgnore,
       presets: [
         [
           '@babel/preset-env', {
             modules: 'commonjs'
           }
         ]
-      ],
-      plugins: [
-        [
-          './tools/babel/plugins/transform-import',
-          {
-            '(/constants/|^\\./)env$': '$1env.npm',
-            '(/configure/|^\\./)public-path$': '$1public-path.npm',
-            '(/configure/|^\\./)nonce$': '$1nonce.npm'
-          }
-        ]
       ]
     },
     'npm-esm': {
-      ignore,
+      ignore: npmIgnore,
       presets: [
         [
           '@babel/preset-env', {
             modules: false
           }
         ]
-      ],
-      plugins: [
-        [
-          './tools/babel/plugins/transform-import',
-          {
-            '(/constants/|^\\./)env$': '$1env.npm',
-            '(/configure/|^\\./)public-path$': '$1public-path.npm',
-            '(/configure/|^\\./)nonce$': '$1nonce.npm'
-          }
-        ]
       ]
     }
   }

src/common/constants/env.js

@@ -1,28 +1,26 @@
 /**
- * @file This file exposes build time environment variables that will be included in the
- * build output of the agent. This file specifically contains the normal environment variables
- * for the NPM agent build and will be overridden by webpack/babel during the build based on the
- * type of build being performed.
+ * @file This file exposes NPM build environment variables. These variables will
+ * be overridden with babel.
  */
 
-import pkgJSON from '../../../package.json'
-
 /**
  * Exposes the version of the agent
  */
-export const VERSION = pkgJSON.version
+export const VERSION = process.env.BUILD_VERSION
 
 /**
  * Exposes the build type of the agent
+ * Valid values are LOCAL, PROD, DEV
  */
 export const BUILD_ENV = 'NPM'
 
 /**
  * Exposes the distribution method of the agent
+ * Valid valuse are CDN, NPM
  */
 export const DIST_METHOD = 'NPM'
 
 /**
  * Exposes the lib version of rrweb
  */
-export const RRWEB_VERSION = pkgJSON.dependencies.rrweb
+export const RRWEB_VERSION = process.env.RRWEB_VERSION

src/loaders/configure/nonce.cdn.js

@@ -0,0 +1,12 @@
+/* global __webpack_require__ */
+
+__webpack_require__.nc = (() => {
+  try {
+    return document?.currentScript?.nonce
+  } catch (ex) {
+    // Swallow error and proceed like nonce is not defined
+    // This will happen when the agent is loaded in a worker scope
+  }
+
+  return ''
+})()

src/loaders/configure/nonce.js

@@ -1,12 +1 @@
-/* global __webpack_require__ */
-
-__webpack_require__.nc = (() => {
-  try {
-    return document?.currentScript?.nonce
-  } catch (ex) {
-    // Swallow error and proceed like nonce is not defined
-    // This will happen when the agent is loaded in a worker scope
-  }
-
-  return ''
-})()
+// We don't support setting automating the nonce attribute in the npm package

src/loaders/configure/public-path.cdn.js

@@ -0,0 +1,9 @@
+// Set the default CDN or remote for fetching the assets; NPM shouldn't change this var.
+
+export const redefinePublicPath = (urlString) => {
+  const isOrigin = urlString.startsWith('http')
+  // Input is not expected to end in a slash, but webpack concats as-is, so one is inserted.
+  urlString += '/'
+  // If there's no existing HTTP scheme, the secure protocol is prepended by default.
+  __webpack_public_path__ = isOrigin ? urlString : 'https://' + urlString // eslint-disable-line
+}

src/loaders/configure/public-path.js

@@ -1,9 +1,3 @@
-// Set the default CDN or remote for fetching the assets; NPM shouldn't change this var.
-
-export const redefinePublicPath = (urlString) => {
-  const isOrigin = urlString.startsWith('http')
-  // Input is not expected to end in a slash, but webpack concats as-is, so one is inserted.
-  urlString += '/'
-  // If there's no existing HTTP scheme, the secure protocol is prepended by default.
-  __webpack_public_path__ = isOrigin ? urlString : 'https://' + urlString // eslint-disable-line
+export const redefinePublicPath = () => {
+  // We don't support setting public path in webpack via NPM build.
 }

tools/webpack/configs/common.mjs

@@ -87,7 +87,16 @@ export default (env, asyncChunkName) => {
       new NRBARemoveNonAsciiPlugin(),
       new NRBALoaderApmCheckPlugin(),
       new NRBASubresourceIntegrityPlugin(),
-      new NRBAFuzzyLoadersPlugin()
+      new NRBAFuzzyLoadersPlugin(),
+      new webpack.NormalModuleReplacementPlugin(/(?:[\\/]constants)?[\\/]env/, (resource) => {
+        resource.request = resource.request.replace(/env$/, 'env.cdn')
+      }),
+      new webpack.NormalModuleReplacementPlugin(/(?:[\\/]configure)?[\\/]public-path/, (resource) => {
+        resource.request = resource.request.replace(/public-path$/, 'public-path.cdn')
+      }),
+      new webpack.NormalModuleReplacementPlugin(/(?:[\\/]configure)?[\\/]nonce/, (resource) => {
+        resource.request = resource.request.replace(/nonce$/, 'nonce.cdn')
+      })
     ]
   }
 }

tsconfig.json

@@ -10,5 +10,12 @@
     "skipLibCheck": true
   },
   "include": ["src/**/*"],
-  "exclude": ["**/*.test.js", "**/*.component-test.js","**/__mocks__/*.js"]
+  "exclude": [
+    "**/*.test.js",
+    "**/*.component-test.js",
+    "**/__mocks__/*.js",
+    "src/common/config/env.cdn.js",
+    "src/loaders/configure/nonce.cdn.js",
+    "src/loaders/configure/public-path.cdn.js"
+  ]
 }