Fix types for TS projects not using esModuleInterop (#31)

package.json

@@ -38,9 +38,8 @@
   ],
   "jest": {
     "preset": "ts-jest/presets/js-with-ts",
-    "setupFilesAfterEnv": [
-      "<rootDir>/test/setupJest.js"
-    ]
+    "setupFilesAfterEnv": ["<rootDir>/test/setupJest.js"],
+    "globals": {"ts-jest": {"diagnostics": {"ignoreCodes": [151001]}}}
   },
   "dependencies": {
     "prop-types": "^15.7.2"

rollup.config.js

@@ -30,7 +30,14 @@ export default [
         },
       },
     ],
-    plugins: [ts(), resolve(), babel(), commonjs()],
+    plugins: [
+      ts(),
+      resolve(),
+      babel(),
+      commonjs({
+        namedExports: {'prop-types': ['func', 'object', 'any', 'string']},
+      }),
+    ],
   },
   // Minified UMD Build without PropTypes
   {
@@ -51,7 +58,9 @@ export default [
       resolve(),
       babel(),
       replace({'process.env.NODE_ENV': JSON.stringify('production')}),
-      commonjs(),
+      commonjs({
+        namedExports: {'prop-types': ['func', 'object', 'any', 'string']},
+      }),
       terser(),
     ],
   },

src/components/Elements.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {act} from 'react-dom/test-utils';
 import {mount} from 'enzyme';
 import {Elements, useElements, useStripe, ElementsConsumer} from './Elements';

src/components/Elements.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react';
+import {
   useContext,
   useMemo,
   useState,
@@ -7,7 +8,7 @@ import React, {
   ReactNode,
   ReactElement,
 } from 'react';
-import PropTypes from 'prop-types';
+import * as PropTypes from 'prop-types';
 import * as stripeJs from '@stripe/stripe-js';
 
 import {isEqual} from '../utils/isEqual';

src/components/createElementComponent.test.js

@@ -1,15 +1,10 @@
-import React, {useLayoutEffect} from 'react';
+import * as React from 'react';
+import {useLayoutEffect} from 'react';
 import {mount} from 'enzyme';
 import {Elements} from './Elements';
 import createElementComponent from './createElementComponent';
 import {mockElements, mockElement, mockStripe} from '../../test/mocks';
 
-jest.mock('react', () => {
-  const actual = jest.requireActual('react');
-  jest.spyOn(actual, 'useLayoutEffect');
-  return actual;
-});
-
 describe('createElementComponent', () => {
   let stripe;
   let elements;
@@ -27,6 +22,7 @@ describe('createElementComponent', () => {
     element = mockElement();
     stripe.elements.mockReturnValue(elements);
     elements.create.mockReturnValue(element);
+    jest.spyOn(React, 'useLayoutEffect');
     element.on = jest.fn((event, fn) => {
       switch (event) {
         case 'change':

src/components/createElementComponent.tsx

@@ -1,5 +1,6 @@
-import React, {useRef, useEffect, useLayoutEffect} from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
+import {useRef, useEffect, useLayoutEffect} from 'react';
+import * as PropTypes from 'prop-types';
 import * as stripeJs from '@stripe/stripe-js';
 
 import {useElementsContextWithUseCase} from './Elements';

src/types/index.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import * as stripeJs from '@stripe/stripe-js';
 
 export interface ElementProps {

src/utils/usePrevious.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {mount} from 'enzyme';
 import {usePrevious} from './usePrevious';
 

test/setupJest.js

@@ -1,4 +1,4 @@
 import {configure} from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import * as Adapter from 'enzyme-adapter-react-16';
 
 configure({adapter: new Adapter()});

tsconfig.json

@@ -10,7 +10,7 @@
     "removeComments": false,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "esModuleInterop": true
+    "esModuleInterop": false // Must remain `false` to emit types compatible with other projects not using `esModuleInterop`
   },
   "include": ["./src"]
 }