sindresorhus / react-extras Goto Github PK

To improve the TS definition.

See https://github.com/sindresorhus/typescript-definition-style-guide on how to do it.

Terminal output:

Failed to minify the code from this file:

    ./node_modules/auto-bind/index.js:2

Read more here: http://bit.ly/2tRViJ9

I'm on TypeScript 5.0.2 and I can't get type definitions to work with this package.

Could not find a declaration file for module 'react-extras'. '<project>/node_modules/.pnpm/[email protected][email protected]/node_modules/react-extras/dist/index.js' implicitly has an 'any' type.
  There are types at '<project>/node_modules/react-extras/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'react-extras' library may need to update its package.json or typings.

This error could be fixed by adding this key to package.json:

"exports": {
    ".": {
        "types": "./index.d.ts",
        "default": "./dist/index.js"
    }
},

Hey guys!

Does this package support server-side rendering? We tried to use it on a project and it started to raise a bunch of errors like

Object.entries is not defined... Object.setProperty etc.. Any idea how to fix it without disabling server-side rendering?

The If helper works fine but when we imported the classNames helper it wasn't as expected.

Thanks and thanks for this. It's super helpful!

Hi,

I am using a react app with create-react-app using Typescript including Jest to run some unit tests with @testing-library/react that includes components that use "react-extras".

When updating the version of react extras from 1.0.1 to 2.0.0, I encountered the issue:

Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    C:\rtc\products\ev_main\weert\prod\Anywhere\node_modules\react-extras\dist\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { default as autoBind } from 'auto-bind/react';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      4 | import { Trans } from "react-i18next";
      5 | import { FormLabelStyle } from "../../Theming/UserFormStyles";
    > 6 | import { If } from "react-extras";
        | ^
      7 | 
      8 | interface CubusUserFormGroupProps {
      9 |   labelI18nKey?: string;

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/Utilities/UserForms/CubusUserFormGroup.tsx:6:1)

Node version: 12.16.1

My first assumption would be that it is related to the change "Output build as ESM module (#14)", but honestly I don't know too much about it. Do I need to apply some custom transformation to it as suggested by the hint?

Hello guys, I use Next with Typescript and when upgrading to version 2, I had this error:

Does anyone have any suspicions?

The way the For component is defined here, is the user does not pass a render prop, it's going to appear a horrible syntax error in the console.

By placing isRequired for the render prop in the PropTypes of the For component, the console will show a nice error that the user did not pass the render function.

Do you think it's a valid issue? if yes, I'd like to contribute. =)

ERROR in ./node_modules/react-extras/dist/body-class.js 7:0-43

Module not found: Error: Can't resolve './element-class' in 'C:\Workspace\harv-Harvest-frontend\node_modules\react-extras\dist'
Did you mean 'element-class.js'?
BREAKING CHANGE: The request './element-class' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/react-extras/dist/choose.js 3:0-22

Module not found: Error: Can't resolve './if' in 'C:\Workspace\harv-Harvest-frontend\node_modules\react-extras\dist'
Did you mean 'if.js'?
BREAKING CHANGE: The request './if' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/react-extras/dist/index.js 1:0-54

Module not found: Error: Can't resolve 'auto-bind/react' in 'C:\Workspace\harv-Harvest-frontend\node_modules\react-extras\dist'
Did you mean 'react.js'?
BREAKING CHANGE: The request 'auto-bind/react' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/react-extras/dist/root-class.js 7:0-43

Module not found: Error: Can't resolve './element-class' in 'C:\Workspace\harv-Harvest-frontend\node_modules\react-extras\dist'
Did you mean 'element-class.js'?
BREAKING CHANGE: The request './element-class' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

I have been successfully using react-extras v0.7.1 for the past year or so. Today, I tried to upgrade to a more recent version but the build failed. Rollup is having trouble importing components from react-extras v0.9.0 and later due to the convoluted way that Babel is defining the CommonJS exports.

[!] Error: 'Choose' is not exported by node_modules/react-extras/dist/index.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
lib/components/payment/payment-preview.jsx (3:9)
1: import React, { useEffect, useState } from 'react';
2: import PropTypes from 'prop-types';
3: import { Choose } from 'react-extras';
            ^
4: import { Dimmer, Loader, Message } from 'semantic-ui-react';
5: import { load } from '../../constants';
Error: 'Choose' is not exported by node_modules/react-extras/dist/index.js
    at error (/Users/sholladay/Code/<redacted>/client/node_modules/rollup/dist/rollup.js:5363:30)
    at Module.error (/Users/sholladay/Code/<redacted>/client/node_modules/rollup/dist/rollup.js:9701:9)
    at handleMissingExport (/Users/sholladay/Code/<redacted>/client/node_modules/rollup/dist/rollup.js:9618:21)
    at Module.traceVariable (/Users/sholladay/Code/<redacted>/client/node_modules/rollup/dist/rollup.js:10011:17)
    at ModuleScope.findVariable (/Users/sholladay/Code/<redacted>/client/node_modules/rollup/dist/rollup.js:8678:39)
    at ReturnValueScope.findVariable (/Users/sholladay/Code/<redacted>/client/node_modules/rollup/dist/rollup.js:3054:38)
    at ChildScope.findVariable (/Users/sholladay/Code/<redacted>/client/node_modules/rollup/dist/rollup.js:3054:38)
    at Identifier$1.bind (/Users/sholladay/Code/<redacted>/client/node_modules/rollup/dist/rollup.js:4392:40)
    at CallExpression$1.bind (/Users/sholladay/Code/<redacted>/client/node_modules/rollup/dist/rollup.js:3137:31)
    at CallExpression$1.bind (/Users/sholladay/Code/<redacted>/client/node_modules/rollup/dist/rollup.js:6643:15)

Notably, with v0.9.0, node_modules/react-extras/dist/index.js contains:

Object.defineProperty(exports, "Choose", {
  enumerable: true,
  get: function get() {
    return _choose.default;
  }
});

Whereas, with previous versions, it was simply:

exports.Choose = Choose;

This change was introduced in 48b3170.

Needless to say, the former is much harder to statically analyze than the latter. We could try to blame Rollup for not being sophisticated enough, but it doesn't surprise me that it is having trouble with this.

I think the best solution would be for react-extras to publish a build in ES modules format. That way it's easier for modern bundlers to import.