Skip to content

Commit 6668dd1

Browse files
piaskowykpiaskowyk
committed
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
1 parent d42b63c commit 6668dd1

File tree

16 files changed

+127
-92
lines changed

16 files changed

+127
-92
lines changed

‎Example/babel.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ module.exports = (api) => {
77
'module:metro-react-native-babel-preset',
88
],
99
plugins: [
10+
'@babel/plugin-proposal-export-namespace-from',
1011
'@babel/plugin-proposal-optional-chaining',
1112
'@babel/plugin-transform-modules-commonjs',
1213
'../plugin',

‎Example/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"pod-install": "cd ios && pod install && cd .."
2323
},
2424
"dependencies": {
25-
"@babel/plugin-proposal-export-namespace-from": "^7.17.12",
25+
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
2626
"@fortawesome/fontawesome-svg-core": "^1.2.28",
2727
"@fortawesome/free-solid-svg-icons": "^5.13.0",
2828
"@fortawesome/react-native-fontawesome": "^0.2.3",

‎Example/yarn.lock

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1012,16 +1012,16 @@
10121012
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
10131013
integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
10141014

1015-
"@babel/helper-plugin-utils@^7.17.12":
1016-
version "7.17.12"
1017-
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96"
1018-
integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==
1019-
10201015
"@babel/helper-plugin-utils@^7.18.6":
10211016
version "7.18.6"
10221017
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz#9448974dd4fb1d80fefe72e8a0af37809cd30d6d"
10231018
integrity sha512-gvZnm1YAAxh13eJdkb9EWHBnF3eAub3XTLCZEehHT2kWxiKVRL64+ae5Y6Ivne0mVHmMYKT+xWgZO+gQhuLUBg==
10241019

1020+
"@babel/helper-plugin-utils@^7.18.9":
1021+
version "7.18.9"
1022+
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz#4b8aea3b069d8cb8a72cdfe28ddf5ceca695ef2f"
1023+
integrity sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==
1024+
10251025
"@babel/helper-plugin-utils@^7.8.3":
10261026
version "7.8.3"
10271027
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
@@ -1601,12 +1601,12 @@
16011601
"@babel/helper-plugin-utils" "^7.13.0"
16021602
"@babel/plugin-syntax-export-namespace-from" "^7.8.3"
16031603

1604-
"@babel/plugin-proposal-export-namespace-from@^7.17.12":
1605-
version "7.17.12"
1606-
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.17.12.tgz#b22864ccd662db9606edb2287ea5fd1709f05378"
1607-
integrity sha512-j7Ye5EWdwoXOpRmo5QmRyHPsDIe6+u70ZYZrd7uz+ebPYFKfRcLcNu3Ro0vOlJ5zuv8rU7xa+GttNiRzX56snQ==
1604+
"@babel/plugin-proposal-export-namespace-from@^7.18.9":
1605+
version "7.18.9"
1606+
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
1607+
integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
16081608
dependencies:
1609-
"@babel/helper-plugin-utils" "^7.17.12"
1609+
"@babel/helper-plugin-utils" "^7.18.9"
16101610
"@babel/plugin-syntax-export-namespace-from" "^7.8.3"
16111611

16121612
"@babel/plugin-proposal-json-strings@^7.12.13", "@babel/plugin-proposal-json-strings@^7.14.2":

‎docs/docs/fundamentals/installation.md

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,30 +20,34 @@ yarn add react-native-reanimated
2020

2121
Add Reanimated's babel plugin to your `babel.config.js`:
2222

23-
```js {5}
23+
```js {7}
2424
module.exports = {
25+
presets: [
2526
...
26-
plugins: [
27-
...
28-
'react-native-reanimated/plugin',
29-
],
27+
],
28+
plugins: [
29+
...
30+
'react-native-reanimated/plugin',
31+
],
3032
};
3133
```
3234

3335
By default, Reanimated plugin generate source location using absolute path. You can configure to use relative path:
3436

35-
```js {5}
37+
```js {9}
3638
module.exports = {
39+
presets: [
3740
...
38-
plugins: [
39-
...
40-
[
41-
'react-native-reanimated/plugin', {
42-
relativeSourceLocation: true,
43-
},
44-
]
45-
],
46-
};
41+
],
42+
plugins: [
43+
...
44+
[
45+
'react-native-reanimated/plugin', {
46+
relativeSourceLocation: true,
47+
},
48+
]
49+
],
50+
};
4751
```
4852

4953
:::caution
@@ -81,6 +85,27 @@ If you're using Proguard, make sure to add rule preventing it from optimizing Tu
8185

8286
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.
8387

88+
## Web
89+
90+
You need to add [`@babel/plugin-proposal-export-namespace-from`](https://babeljs.io/docs/en/babel-plugin-proposal-export-namespace-from) Babel plugin.
91+
92+
```bash
93+
yarn add @babel/plugin-proposal-export-namespace-from
94+
```
95+
96+
```js {7}
97+
module.exports = {
98+
presets: [
99+
...
100+
],
101+
plugins: [
102+
...
103+
'@babel/plugin-proposal-export-namespace-from',
104+
'react-native-reanimated/plugin',
105+
],
106+
};
107+
```
108+
84109
## Sample React-Native project configured with Reanimated
85110

86111
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.

‎docs/docs/fundamentals/web-support.md

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,26 @@ Since the
88
[2.0.0-alpha.7](https://github.com/software-mansion/react-native-reanimated/releases/tag/2.0.0-alpha.7)
99
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.
1010

11-
If you use our
11+
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`.
12+
13+
```bash
14+
yarn add @babel/plugin-proposal-export-namespace-from
15+
```
16+
17+
```js {5,6}
18+
module.exports = {
19+
presets: [
20+
...
21+
],
22+
plugins: [
23+
...
24+
'@babel/plugin-proposal-export-namespace-from',
25+
'react-native-reanimated/plugin',
26+
],
27+
};
28+
```
29+
30+
If you use
1231
[playground](https://github.com/software-mansion-labs/reanimated-2-playground)
1332
app and want to start it in the browser just type:
1433
```shell

‎docs/versioned_docs/version-2.0.x/installation.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,15 +55,17 @@ To use Reanimated 2 built from the main branch:
5555

5656
## Babel plugin
5757

58-
Add Reanimated's babel plugin to your `babel.config.js`:
58+
Add Reanimated's Babel plugin to your `babel.config.js`:
5959

60-
```js {5}
60+
```js {7}
6161
module.exports = {
62+
presets: [
6263
...
63-
plugins: [
64-
...
65-
'react-native-reanimated/plugin',
66-
],
64+
],
65+
plugins: [
66+
...
67+
'react-native-reanimated/plugin',
68+
],
6769
};
6870
```
6971

‎docs/versioned_docs/version-2.1.x/installation.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,15 +55,17 @@ To use Reanimated 2 built from the main branch:
5555

5656
## Babel plugin
5757

58-
Add Reanimated's babel plugin to your `babel.config.js`:
58+
Add Reanimated's Babel plugin to your `babel.config.js`:
5959

60-
```js {5}
60+
```js {7}
6161
module.exports = {
62+
presets: [
6263
...
63-
plugins: [
64-
...
65-
'react-native-reanimated/plugin',
66-
],
64+
],
65+
plugins: [
66+
...
67+
'react-native-reanimated/plugin',
68+
],
6769
};
6870
```
6971

‎docs/versioned_docs/version-2.2.x/installation.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,15 +55,17 @@ To use Reanimated 2 built from the main branch:
5555

5656
## Babel plugin
5757

58-
Add Reanimated's babel plugin to your `babel.config.js`:
58+
Add Reanimated's Babel plugin to your `babel.config.js`:
5959

60-
```js {5}
60+
```js {7}
6161
module.exports = {
62+
presets: [
6263
...
63-
plugins: [
64-
...
65-
'react-native-reanimated/plugin',
66-
],
64+
],
65+
plugins: [
66+
...
67+
'react-native-reanimated/plugin',
68+
],
6769
};
6870
```
6971

‎docs/versioned_docs/version-2.3.x/fundamentals/installation.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,17 @@ yarn add react-native-reanimated
1818

1919
## Babel plugin
2020

21-
Add Reanimated's babel plugin to your `babel.config.js`:
21+
Add Reanimated's Babel plugin to your `babel.config.js`:
2222

23-
```js {5}
23+
```js {7}
2424
module.exports = {
25+
presets: [
2526
...
26-
plugins: [
27-
...
28-
'react-native-reanimated/plugin',
29-
],
27+
],
28+
plugins: [
29+
...
30+
'react-native-reanimated/plugin',
31+
],
3032
};
3133
```
3234

‎docs/versioned_docs/version-2.5.x/fundamentals/installation.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,17 @@ yarn add react-native-reanimated
1818

1919
## Babel plugin
2020

21-
Add Reanimated's babel plugin to your `babel.config.js`:
21+
Add Reanimated's Babel plugin to your `babel.config.js`:
2222

23-
```js {5}
23+
```js {7}
2424
module.exports = {
25+
presets: [
2526
...
26-
plugins: [
27-
...
28-
'react-native-reanimated/plugin',
29-
],
27+
],
28+
plugins: [
29+
...
30+
'react-native-reanimated/plugin',
31+
],
3032
};
3133
```
3234

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@
7373
},
7474
"homepage": "https://github.com/software-mansion/react-native-reanimated#readme",
7575
"dependencies": {
76-
"@babel/plugin-proposal-export-namespace-from": "^7.17.12",
7776
"@babel/plugin-transform-object-assign": "^7.16.7",
7877
"@babel/preset-typescript": "^7.16.7",
7978
"@types/invariant": "^2.2.35",

‎plugin.js

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -758,16 +758,6 @@ function isPossibleOptimization(fun) {
758758
return flags;
759759
}
760760

761-
const pluginProposalExportNamespaceFrom =
762-
require('@babel/plugin-proposal-export-namespace-from').default;
763-
const apiMock = {
764-
assertVersion: () => {
765-
// do nothing.
766-
},
767-
};
768-
const ExportNamedDeclarationFn =
769-
pluginProposalExportNamespaceFrom(apiMock).visitor.ExportNamedDeclaration;
770-
771761
module.exports = function ({ types: t }) {
772762
return {
773763
pre() {
@@ -790,7 +780,6 @@ module.exports = function ({ types: t }) {
790780
processIfGestureHandlerEventCallbackFunctionNode(t, path, state);
791781
},
792782
},
793-
ExportNamedDeclaration: ExportNamedDeclarationFn,
794783
},
795784
};
796785
};

‎src/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// tree-shaken side effects
1+
import * as Animated from './Animated';
22
import webGlobalIsInitialized from './reanimated2/js-reanimated/global';
33
if (!webGlobalIsInitialized) {
44
/*
@@ -12,4 +12,4 @@ if (!webGlobalIsInitialized) {
1212
// @ts-ignore backward compatibility with treeshaking
1313
export * from './reanimated1';
1414
export * from './reanimated2';
15-
export * as default from './Animated';
15+
export default Animated;

‎src/index.web.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// tree-shaken side effects
2+
import './reanimated2/js-reanimated/global';
3+
4+
export * from './reanimated2';
5+
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

‎src/reanimated2/core.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,18 @@ const testWorklet: BasicWorkletFunction<void> = () => {
4141
'worklet';
4242
};
4343

44+
const throwUninitializedReanimatedException = () => {
45+
throw new Error(
46+
"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"
47+
);
48+
};
49+
4450
export const checkPluginState: (throwError: boolean) => boolean = (
4551
throwError = true
4652
) => {
4753
if (!testWorklet.__workletHash && !shouldBeUseWeb()) {
4854
if (throwError) {
49-
throw new Error(
50-
"Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?"
51-
);
55+
throwUninitializedReanimatedException();
5256
}
5357
return false;
5458
}
@@ -62,11 +66,7 @@ export const isConfigured: (throwError?: boolean) => boolean = (
6266
};
6367

6468
export const isConfiguredCheck: () => void = () => {
65-
if (!isConfigured(true)) {
66-
throw new Error(
67-
'If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation'
68-
);
69-
}
69+
checkPluginState(true);
7070
};
7171

7272
function pushFrame(frame: (timestamp: Timestamp) => void): void {

‎yarn.lock

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -612,11 +612,6 @@
612612
resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz"
613613
integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
614614

615-
"@babel/helper-plugin-utils@^7.17.12":
616-
version "7.17.12"
617-
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96"
618-
integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==
619-
620615
"@babel/helper-plugin-utils@^7.18.6":
621616
version "7.18.6"
622617
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz#9448974dd4fb1d80fefe72e8a0af37809cd30d6d"
@@ -1088,14 +1083,6 @@
10881083
"@babel/helper-plugin-utils" "^7.16.7"
10891084
"@babel/plugin-syntax-export-namespace-from" "^7.8.3"
10901085

1091-
"@babel/plugin-proposal-export-namespace-from@^7.17.12":
1092-
version "7.17.12"
1093-
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.17.12.tgz#b22864ccd662db9606edb2287ea5fd1709f05378"
1094-
integrity sha512-j7Ye5EWdwoXOpRmo5QmRyHPsDIe6+u70ZYZrd7uz+ebPYFKfRcLcNu3Ro0vOlJ5zuv8rU7xa+GttNiRzX56snQ==
1095-
dependencies:
1096-
"@babel/helper-plugin-utils" "^7.17.12"
1097-
"@babel/plugin-syntax-export-namespace-from" "^7.8.3"
1098-
10991086
"@babel/plugin-proposal-export-namespace-from@^7.18.6":
11001087
version "7.18.6"
11011088
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.6.tgz#1016f0aa5ab383bbf8b3a85a2dcaedf6c8ee7491"

0 commit comments

Comments
 (0)