diff --git a/.gitignore b/.gitignore
index 4cd1d9706b737..1d75f9f429d86 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@ build
 build-module
 build-style
 build-types
+build-wp
 node_modules
 gutenberg.zip
 coverage
diff --git a/package-lock.json b/package-lock.json
index 80abc752c9212..b06206e07edd9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -84,6 +84,7 @@
 				"cssnano": "6.0.1",
 				"deep-freeze": "0.0.1",
 				"equivalent-key-map": "0.2.2",
+				"esbuild": "0.18.20",
 				"escape-html": "1.0.3",
 				"eslint-import-resolver-node": "0.3.4",
 				"eslint-plugin-eslint-comments": "3.1.2",
diff --git a/package.json b/package.json
index 741475d817770..cb9733e69c473 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,7 @@
 		"cssnano": "6.0.1",
 		"deep-freeze": "0.0.1",
 		"equivalent-key-map": "0.2.2",
+		"esbuild": "0.18.20",
 		"escape-html": "1.0.3",
 		"eslint-import-resolver-node": "0.3.4",
 		"eslint-plugin-eslint-comments": "3.1.2",
@@ -177,9 +178,10 @@
 		"build:package-types": "node ./bin/packages/validate-typescript-version.js && ( tsc --build || ( echo 'tsc failed. Try cleaning up first: `npm run clean:package-types`'; exit 1 ) ) && node ./bin/packages/check-build-type-declaration-files.js",
 		"prebuild:packages": "npm run clean:packages && npm run --if-present --workspaces build",
 		"build:packages": "npm run --silent build:package-types && node ./bin/packages/build.js",
+		"postbuild:packages": " npm run --if-present --workspaces build:wp",
 		"build:plugin-zip": "bash ./bin/build-plugin-zip.sh",
 		"clean:package-types": "tsc --build --clean && rimraf \"./packages/*/build-types\"",
-		"clean:packages": "rimraf \"./packages/*/@(build|build-module|build-style)\"",
+		"clean:packages": "rimraf \"./packages/*/@(build|build-module|build-wp|build-style)\"",
 		"component-usage-stats": "node ./node_modules/react-scanner/bin/react-scanner -c ./react-scanner.config.js",
 		"dev": "cross-env NODE_ENV=development npm run build:packages && concurrently \"wp-scripts start\" \"npm run dev:packages\"",
 		"dev:packages": "cross-env NODE_ENV=development concurrently \"node ./bin/packages/watch.js\" \"tsc --build --watch\"",
diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index ff20386862929..512a2d09ab128 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -17,6 +17,8 @@ npm install @wordpress/dataviews --save
 
 <div class="callout callout-info">At <a href="https://wordpress.github.io/gutenberg/">WordPress Gutenberg's Storybook</a> there's and <a href="https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs">example implementation of the Dataviews component</a>.</div>
 
+**Important note** If you're trying to use the `DataViews` component in a WordPress plugin or theme and you're building your scripts using the `@wordpress/scripts` package, you need to import the components from `@wordpress/dataviews/wp` instead of `@wordpress/dataviews`.
+
 ### Usage
 
 The `DataViews` component receives data and some other configuration to render the dataset. It'll call the `onChangeView` callback every time the user has interacted with the dataset in some way (sorted, filtered, changed layout, etc.):
diff --git a/packages/dataviews/build.js b/packages/dataviews/build.js
new file mode 100644
index 0000000000000..582826d18c184
--- /dev/null
+++ b/packages/dataviews/build.js
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line import/no-extraneous-dependencies
+const esbuild = require( 'esbuild' );
+
+const wpExternals = {
+	name: 'wordpress-externals',
+	setup( build ) {
+		build.onResolve( { filter: /^@wordpress\// }, () => {
+			// Bundle wordpress packages
+			return { external: false };
+		} );
+		build.onResolve( { filter: /^\.[\.\/]/ }, () => {
+			// Bundle relative paths
+			return { external: false };
+		} );
+		build.onResolve( { filter: /.+/ }, ( args ) => {
+			// Mark everything else as external
+			return { path: args.path, external: true };
+		} );
+	},
+};
+
+esbuild.build( {
+	entryPoints: [ 'src/index.ts' ],
+	bundle: true,
+	outdir: 'build-wp',
+	plugins: [ wpExternals ],
+	jsx: 'automatic',
+	logLevel: 'info',
+	format: 'esm',
+} );
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index df30fea1a1c71..8cb24b0e6dac9 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -24,6 +24,20 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"exports": {
+		".": {
+			"types": "./build-types/index.d.ts",
+			"import": "./build-module/index.js"
+		},
+		"./wp": {
+			"types": "./build-types/index.d.ts",
+			"default": "./build-wp/index.js"
+		},
+		"./package.json": {
+			"default": "./package.json"
+		},
+		"./build-style/": "./build-style/"
+	},
 	"react-native": "src/index",
 	"wpScript": true,
 	"types": "build-types",
@@ -48,5 +62,8 @@
 	},
 	"publishConfig": {
 		"access": "public"
+	},
+	"scripts": {
+		"build:wp": "node build"
 	}
 }
diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js
index cc99986024476..49b16986cda81 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/util.js
+++ b/packages/dependency-extraction-webpack-plugin/lib/util.js
@@ -5,6 +5,7 @@ const WORDPRESS_NAMESPACE = '@wordpress/';
 // !!
 const BUNDLED_PACKAGES = [
 	'@wordpress/dataviews',
+	'@wordpress/dataviews/wp',
 	'@wordpress/icons',
 	'@wordpress/interface',
 	'@wordpress/sync',
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index 1dc396a4d75a1..4459cc063d001 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -36,6 +36,7 @@ const WORDPRESS_NAMESPACE = '@wordpress/';
 // !!
 const BUNDLED_PACKAGES = [
 	'@wordpress/dataviews',
+	'@wordpress/dataviews/wp',
 	'@wordpress/icons',
 	'@wordpress/interface',
 	'@wordpress/sync',