ref(component-annotate): Use default export (#478)

* ref(component-annotate): Use default export

Author: 0Calories

packages/babel-plugin-component-annotate/README.md

@@ -69,7 +69,7 @@ Or alternatively, configure the plugin by directly importing it:
 ```js
 // babel.config.js
 
-import {componentNameAnnotatePlugin} from '@sentry/babel-plugin-component-annotate';
+import componentNameAnnotatePlugin from '@sentry/babel-plugin-component-annotate';
 
 {
   // ... other config above ...

packages/babel-plugin-component-annotate/src/index.ts

@@ -59,7 +59,8 @@ type IgnoredComponent = [file: string, component: string, element: string];
 
 type AnnotationPlugin = PluginObj<AnnotationPluginPass>;
 
-export function componentNameAnnotatePlugin({ types: t }: typeof Babel): AnnotationPlugin {
+// We must export the plugin as default, otherwise the Babel loader will not be able to resolve it when configured using its string identifier
+export default function componentNameAnnotatePlugin({ types: t }: typeof Babel): AnnotationPlugin {
   return {
     visitor: {
       FunctionDeclaration(path, state) {

packages/babel-plugin-component-annotate/test/test-plugin.test.ts

@@ -24,7 +24,7 @@
  */
 
 import { transform } from "@babel/core";
-import { componentNameAnnotatePlugin as plugin } from "../src/index";
+import plugin from "../src/index";
 
 const BananasPizzaAppStandardInput = `import React, { Component } from 'react';
 import { StyleSheet, Text, TextInput, View, Image, UIManager } from 'react-native';

packages/bundler-plugin-core/src/index.ts

@@ -1,6 +1,6 @@
 import SentryCli from "@sentry/cli";
 import { transformAsync } from "@babel/core";
-import { componentNameAnnotatePlugin } from "@sentry/babel-plugin-component-annotate";
+import componentNameAnnotatePlugin from "@sentry/babel-plugin-component-annotate";
 import * as fs from "fs";
 import * as path from "path";
 import MagicString from "magic-string";