Update plugin error message (#3437)

## Description Tree-shaking requires `export * as default` syntax, but this syntax requires the babel plugin `@babel/plugin-proposal-export-namespace-from`. Previously I embedded this plugin inside the Reanimated plugin, but this doesn't work when someone doesn't add Reanimated plugin to their project. In this situation, users receive misleading information about syntax errors instead of messages about missing plugin configuration. Tree-shaking works only for the web, so I used `as default` syntax only for web implementation. In addition, I updated the exception message. The file `index.web.ts` contains information about exceptions in the comment because this is the only possibility to give users information on exceptions during static analyzes of code. Fixes #3410
software-mansion · Aug 17, 2022 · 6668dd1 · 6668dd1
1 parent d42b63c
commit 6668dd1
Show file tree

Hide file tree

Showing 16 changed files with 127 additions and 92 deletions.
diff --git a/Example/babel.config.js b/Example/babel.config.js
@@ -7,6 +7,7 @@ module.exports = (api) => {
       'module:metro-react-native-babel-preset',
     ],
     plugins: [
+      '@babel/plugin-proposal-export-namespace-from',
       '@babel/plugin-proposal-optional-chaining',
       '@babel/plugin-transform-modules-commonjs',
       '../plugin',

diff --git a/Example/package.json b/Example/package.json
@@ -22,7 +22,7 @@
     "pod-install": "cd ios && pod install && cd .."
   },
   "dependencies": {
-    "@babel/plugin-proposal-export-namespace-from": "^7.17.12",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-native-fontawesome": "^0.2.3",

diff --git a/Example/yarn.lock b/Example/yarn.lock
@@ -1012,16 +1012,16 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
   integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
 
-"@babel/helper-plugin-utils@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96"
-  integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==
-
 "@babel/helper-plugin-utils@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz#9448974dd4fb1d80fefe72e8a0af37809cd30d6d"
   integrity sha512-gvZnm1YAAxh13eJdkb9EWHBnF3eAub3XTLCZEehHT2kWxiKVRL64+ae5Y6Ivne0mVHmMYKT+xWgZO+gQhuLUBg==
 
+"@babel/helper-plugin-utils@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz#4b8aea3b069d8cb8a72cdfe28ddf5ceca695ef2f"
+  integrity sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==
+
 "@babel/helper-plugin-utils@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
@@ -1601,12 +1601,12 @@
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-proposal-export-namespace-from@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.17.12.tgz#b22864ccd662db9606edb2287ea5fd1709f05378"
-  integrity sha512-j7Ye5EWdwoXOpRmo5QmRyHPsDIe6+u70ZYZrd7uz+ebPYFKfRcLcNu3Ro0vOlJ5zuv8rU7xa+GttNiRzX56snQ==
+"@babel/plugin-proposal-export-namespace-from@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
+  integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.9"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
 "@babel/plugin-proposal-json-strings@^7.12.13", "@babel/plugin-proposal-json-strings@^7.14.2":

diff --git a/docs/docs/fundamentals/installation.md b/docs/docs/fundamentals/installation.md
@@ -20,30 +20,34 @@ yarn add react-native-reanimated
 
 Add Reanimated's babel plugin to your `babel.config.js`:
 
-```js {5}
+```js {7}
   module.exports = {
+    presets: [
       ...
-      plugins: [
-          ...
-          'react-native-reanimated/plugin',
-      ],
+    ],
+    plugins: [
+      ...
+      'react-native-reanimated/plugin',
+    ],
   };
 ```
 
 By default, Reanimated plugin generate source location using absolute path. You can configure to use relative path:
 
-```js {5}
+```js {9}
   module.exports = {
+    presets: [
       ...
-      plugins: [
-          ...
-          [
-              'react-native-reanimated/plugin', {
-                  relativeSourceLocation: true,
-              },
-          ]
-      ],
-  };
+    ],
+    plugins: [
+        ...
+        [
+            'react-native-reanimated/plugin', {
+                relativeSourceLocation: true,
+            },
+        ]
+    ],
+};
 ```
 
 :::caution
@@ -81,6 +85,27 @@ If you're using Proguard, make sure to add rule preventing it from optimizing Tu
 
 As reanimated is setup to configure and install automatically, the only thing you have to do is to run `pod install` in the `ios/` directory. Note that the auto-installation setup works for the standard React Native apps, if you have problems setting it up with a custom setup (e.g. brownfield) please start a new issue where we can find a way to guide you through that process.
 
+## Web
+
+You need to add [`@babel/plugin-proposal-export-namespace-from`](https://babeljs.io/docs/en/babel-plugin-proposal-export-namespace-from) Babel plugin.
+
+```bash
+yarn add @babel/plugin-proposal-export-namespace-from
+```
+
+```js {7}
+  module.exports = {
+      presets: [
+        ...
+      ],
+      plugins: [
+          ...
+          '@babel/plugin-proposal-export-namespace-from',
+          'react-native-reanimated/plugin',
+      ],
+  };
+```
+
 ## Sample React-Native project configured with Reanimated
 
 If you have troubles configuring Reanimated in your project, or just want to try the library without the need of setting it up ion a fresh project we recommend checking our [Reanimated Playground](https://github.com/software-mansion-labs/reanimated-2-playground) repo, which is essentially a fresh React-Native app with Reanimated library installed and configured properly.

diff --git a/docs/docs/fundamentals/web-support.md b/docs/docs/fundamentals/web-support.md
@@ -8,7 +8,26 @@ Since the
 [2.0.0-alpha.7](https://github.com/software-mansion/react-native-reanimated/releases/tag/2.0.0-alpha.7)
 release it's possible to launch reanimated 2 in a web browser. For that case all of the functionalities are implemented purely in javascript, hence the efficiency of the animations might drop.
 
-If you use our
+Reanimated for Web requires the following configuration steps. You need to add [`@babel/plugin-proposal-export-namespace-from`](https://babeljs.io/docs/en/babel-plugin-proposal-export-namespace-from) as well as Reanimated Babel plugin to your `babel.config.js`.
+
+```bash
+yarn add @babel/plugin-proposal-export-namespace-from
+```
+
+```js {5,6}
+module.exports = {
+  presets: [
+      ...
+  ],
+  plugins: [
+    ...
+    '@babel/plugin-proposal-export-namespace-from',
+    'react-native-reanimated/plugin',
+  ],
+};
+```
+
+If you use
 [playground](https://github.com/software-mansion-labs/reanimated-2-playground)
 app and want to start it in the browser just type:
 ```shell

diff --git a/docs/versioned_docs/version-2.0.x/installation.md b/docs/versioned_docs/version-2.0.x/installation.md
@@ -55,15 +55,17 @@ To use Reanimated 2 built from the main branch:
 
 ## Babel plugin
 
-Add Reanimated's babel plugin to your `babel.config.js`:
+Add Reanimated's Babel plugin to your `babel.config.js`:
 
-```js {5}
+```js {7}
   module.exports = {
+    presets: [
       ...
-      plugins: [
-          ...
-          'react-native-reanimated/plugin',
-      ],
+    ],
+    plugins: [
+      ...
+      'react-native-reanimated/plugin',
+    ],
   };
 ```
 

diff --git a/docs/versioned_docs/version-2.1.x/installation.md b/docs/versioned_docs/version-2.1.x/installation.md
@@ -55,15 +55,17 @@ To use Reanimated 2 built from the main branch:
 
 ## Babel plugin
 
-Add Reanimated's babel plugin to your `babel.config.js`:
+Add Reanimated's Babel plugin to your `babel.config.js`:
 
-```js {5}
+```js {7}
   module.exports = {
+    presets: [
       ...
-      plugins: [
-          ...
-          'react-native-reanimated/plugin',
-      ],
+    ],
+    plugins: [
+      ...
+      'react-native-reanimated/plugin',
+    ],
   };
 ```
 

diff --git a/docs/versioned_docs/version-2.2.x/installation.md b/docs/versioned_docs/version-2.2.x/installation.md
@@ -55,15 +55,17 @@ To use Reanimated 2 built from the main branch:
 
 ## Babel plugin
 
-Add Reanimated's babel plugin to your `babel.config.js`:
+Add Reanimated's Babel plugin to your `babel.config.js`:
 
-```js {5}
+```js {7}
   module.exports = {
+    presets: [
       ...
-      plugins: [
-          ...
-          'react-native-reanimated/plugin',
-      ],
+    ],
+    plugins: [
+      ...
+      'react-native-reanimated/plugin',
+    ],
   };
 ```
 

diff --git a/docs/versioned_docs/version-2.3.x/fundamentals/installation.md b/docs/versioned_docs/version-2.3.x/fundamentals/installation.md
@@ -18,15 +18,17 @@ yarn add react-native-reanimated
 
 ## Babel plugin
 
-Add Reanimated's babel plugin to your `babel.config.js`:
+Add Reanimated's Babel plugin to your `babel.config.js`:
 
-```js {5}
+```js {7}
   module.exports = {
+    presets: [
       ...
-      plugins: [
-          ...
-          'react-native-reanimated/plugin',
-      ],
+    ],
+    plugins: [
+      ...
+      'react-native-reanimated/plugin',
+    ],
   };
 ```
 

diff --git a/docs/versioned_docs/version-2.5.x/fundamentals/installation.md b/docs/versioned_docs/version-2.5.x/fundamentals/installation.md
@@ -18,15 +18,17 @@ yarn add react-native-reanimated
 
 ## Babel plugin
 
-Add Reanimated's babel plugin to your `babel.config.js`:
+Add Reanimated's Babel plugin to your `babel.config.js`:
 
-```js {5}
+```js {7}
   module.exports = {
+    presets: [
       ...
-      plugins: [
-          ...
-          'react-native-reanimated/plugin',
-      ],
+    ],
+    plugins: [
+      ...
+      'react-native-reanimated/plugin',
+    ],
   };
 ```
 

diff --git a/package.json b/package.json
@@ -73,7 +73,6 @@
   },
   "homepage": "https://github.com/software-mansion/react-native-reanimated#readme",
   "dependencies": {
-    "@babel/plugin-proposal-export-namespace-from": "^7.17.12",
     "@babel/plugin-transform-object-assign": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@types/invariant": "^2.2.35",

diff --git a/plugin.js b/plugin.js
@@ -758,16 +758,6 @@ function isPossibleOptimization(fun) {
   return flags;
 }
 
-const pluginProposalExportNamespaceFrom =
-  require('@babel/plugin-proposal-export-namespace-from').default;
-const apiMock = {
-  assertVersion: () => {
-    // do nothing.
-  },
-};
-const ExportNamedDeclarationFn =
-  pluginProposalExportNamespaceFrom(apiMock).visitor.ExportNamedDeclaration;
-
 module.exports = function ({ types: t }) {
   return {
     pre() {
@@ -790,7 +780,6 @@ module.exports = function ({ types: t }) {
           processIfGestureHandlerEventCallbackFunctionNode(t, path, state);
         },
       },
-      ExportNamedDeclaration: ExportNamedDeclarationFn,
     },
   };
 };
diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,4 @@
-// tree-shaken side effects
+import * as Animated from './Animated';
 import webGlobalIsInitialized from './reanimated2/js-reanimated/global';
 if (!webGlobalIsInitialized) {
   /* 
@@ -12,4 +12,4 @@ if (!webGlobalIsInitialized) {
 // @ts-ignore backward compatibility with treeshaking
 export * from './reanimated1';
 export * from './reanimated2';
-export * as default from './Animated';
+export default Animated;
diff --git a/src/index.web.ts b/src/index.web.ts
@@ -0,0 +1,5 @@
+// tree-shaken side effects
+import './reanimated2/js-reanimated/global';
+
+export * from './reanimated2';
+export * as default from './Animated'; // If this line fails, you probably forgot some installation steps. Check out the installation guide here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ 1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details) 2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache
diff --git a/src/reanimated2/core.ts b/src/reanimated2/core.ts
@@ -41,14 +41,18 @@ const testWorklet: BasicWorkletFunction<void> = () => {
   'worklet';
 };
 
+const throwUninitializedReanimatedException = () => {
+  throw new Error(
+    "Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ \n1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details) \n2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache"
+  );
+};
+
 export const checkPluginState: (throwError: boolean) => boolean = (
   throwError = true
 ) => {
   if (!testWorklet.__workletHash && !shouldBeUseWeb()) {
     if (throwError) {
-      throw new Error(
-        "Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?"
-      );
+      throwUninitializedReanimatedException();
     }
     return false;
   }
@@ -62,11 +66,7 @@ export const isConfigured: (throwError?: boolean) => boolean = (
 };
 
 export const isConfiguredCheck: () => void = () => {
-  if (!isConfigured(true)) {
-    throw new Error(
-      'If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation'
-    );
-  }
+  checkPluginState(true);
 };
 
 function pushFrame(frame: (timestamp: Timestamp) => void): void {

diff --git a/yarn.lock b/yarn.lock
@@ -612,11 +612,6 @@
   resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz"
   integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
 
-"@babel/helper-plugin-utils@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96"
-  integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==
-
 "@babel/helper-plugin-utils@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz#9448974dd4fb1d80fefe72e8a0af37809cd30d6d"
@@ -1088,14 +1083,6 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-proposal-export-namespace-from@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.17.12.tgz#b22864ccd662db9606edb2287ea5fd1709f05378"
-  integrity sha512-j7Ye5EWdwoXOpRmo5QmRyHPsDIe6+u70ZYZrd7uz+ebPYFKfRcLcNu3Ro0vOlJ5zuv8rU7xa+GttNiRzX56snQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-
 "@babel/plugin-proposal-export-namespace-from@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.6.tgz#1016f0aa5ab383bbf8b3a85a2dcaedf6c8ee7491"