ESM issue 😬 about react-children-utilities HOT 21 CLOSED

Hi, you can use next-transpile-modules .

const withTM = require('next-transpile-modules')(['react-children-utilities']);

from react-children-utilities.

Hello!

Sorry I'm in holidays and not on my professionnal project where I've got this issue. I'll try to let you know probably the next week if it's fine for you!

For the moment I downloaded the zip version and removed all the typescript part, and it worked.

But it's better if I can use your lib.

Thanks and sorry for the delay!

from react-children-utilities.

I couldn't get it to work with next.js even with the solution above but it turns out I misunderstood the solution above, my bad 😅

from react-children-utilities.

What version of node.js you are running? Please share more information on how to reproduce that error.

from react-children-utilities.

v14.2.0 @fernandopasik :)

I'm on next.js (so webpack):

My packages:

{
  "dependencies": {
    "@emotion/core": "10.0.28",
    "@emotion/styled": "10.0.27",
    "@mdx-js/loader": "1.6.1",
    "@next/mdx": "9.4.0",
    "@types/react": "16.9.35",
    "babel-plugin-emotion": "10.0.33",
    "dayjs": "1.8.27",
    "fast-glob": "3.2.2",
    "gh-pages": "2.2.0",
    "hint.css": "2.6.0",
    "next": "9.4.0",
    "next-compose-plugins": "2.2.0",
    "next-images": "1.4.0",
    "normalize.css": "8.0.1",
    "param-case": "3.0.3",
    "plop": "2.6.0",
    "prism-react-renderer": "1.1.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-icons": "3.10.0",
    "remark": "12.0.0",
    "remark-emoji": "2.1.0",
    "remark-images": "2.0.0",
    "remark-mdx": "1.6.1",
    "serve": "11.3.0",
    "webpack-merge": "4.2.2"
  },
  "scripts": {
    "plop": "plop",
    "clean": "rm -rf .next dist",
    "prestart": "npm run clean",
    "start": "next",
    "prebuild": "npm run clean",
    "build": "next build",
    "preexport": "npm run build",
    "export": "next export -o dist",
    "serve": "npm run export && serve dist",
    "deploy": "npm run export && gh-pages --dotfiles -d dist -b gh-pages"
  },
}

And I use there import, not require.

from react-children-utilities.

you don't have react-children-utilities in dependencies?

Is the error happening in the server or in the browser?

from react-children-utilities.

Please share code to reproduce the issue

from react-children-utilities.

@kud are you still having this issue?

from react-children-utilities.

Sure, no problem.

Please check if you are using a webpack loader or something that is transpiling the library to common js (cjs) because your error message is saying that the format is on that I think.

My library is distributed as esm, you can see there are no require statements in https://unpkg.com/browse/react-children-utilities/react-children-utilities.js

from react-children-utilities.

You can also check an issue that others had with jest (that is for any library distributed as esm) and the solution here
#15 (comment)

from react-children-utilities.

Okay thanks! I'll do that!

from react-children-utilities.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

from react-children-utilities.

@fernandopasik can this be reopened? the problem is that there is no commonjs build of this package, so anything transpiled using commonjs is going to have issues loading it.

i'm not sure how you feel about it, but most libraries seem to consider that the responsibility of the library, not the package loading it... it would be nice to have a cjs build included in the react-children-utilities itself :) (thanks for the great utility, btw! 😀)

from react-children-utilities.

Hi @rintaun, thank you for rising this again

I'm wondering what would be the use case now to rollback to publish the library from module into cjs.

• node 14 (lts) supports esm modules
• latest versions of jest support esm modules

I can't remember other challenges I faced when using libraries that are published as esm modules only.
(besides the next.js problem that has a solution also in this issue)

from react-children-utilities.

can this be reopened?

from react-children-utilities.

hi @hazem3500! please can you share the reason to reopen this?

from react-children-utilities.

First of all: Compliments for a great utility. It really would solve my problem.

But, same problem here on React:

package.json (relevant part)

  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "next": "10.0.9",
    "react": "17.0.2",
    "react-children-utilities": "^2.5.0",
    "react-dom": "17.0.2",
    "react-hook-form": "^6.15.5"
  },

Code:

export const Form = ({children, action}: FormProps) => {

    const methods = useForm();
    const {handleSubmit} = methods;

    const onSubmit = (data: any) => {
        action(data);
    }


    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            {
                Children.deepMap(children, (child: any) => {
                    if ("type" in child) {
                        console.log(child.type);
                    }
                    return child;
                })
            }

        </form>
    );
}

Output:

Error: Must use import to load ES Module: /Users/bert/project02/node_modules/react-children-utilities/react-children-utilities.js
require() of ES modules is not supported.
require() of /Users/bert/project02/node_modules/react-children-utilities/react-children-utilities.js from /Users/bert/project02/.next/server/pages/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename react-children-utilities.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/bert/project02/node_modules/react-children-utilities/package.json.

Looks like this lib does not work with ES6 and Typescript.

from react-children-utilities.

Thanks for the compliments!

Would it be possible to put more context on this? How are you building or running this?

Looks like this lib does not work with ES6 and Typescript.

Certainly the objective is the opposite as this lib is published as ES modules and not as commonjs

from react-children-utilities.

Standard React NextJS project.
Using react-hook-form.
I have my own components for Form and Field.
According to this example on ReactHookForm website it is possible to have the form working with Smart Components.

But the React.Children.map does a shallow search for the children of the parent component.
And I need a deep search. That's why your util would come in ver very handy.

Bringing the functionality in the problem description back to a simple console.log of the Child, I expect to see not only my shallow childs, but also the deep childs (grandchildren).

The form is called with this JSX:

return (
    <Form>
      <Field name={name} />
      <Field name={address} />
      <h3><Field name={city} /></h3>
    </Form>
)

The example on react-hook-form (standard React.Childre.map) sees only 'name' and 'address' and the h3.
Your util (deepMap) should also see the 'city' I expect.

from react-children-utilities.

After some investigation I found some clues of the problem. There are some moving pieces with next.js and libs that are published as ES modules

vercel/next.js#9607

In that thread some people suggests using:

https://www.npmjs.com/package/next-transpile-modules

from react-children-utilities.

With no SSR

When the module includes a library that only works in the browser:

import dynamic from "next/dynamic"

const DynamicComponentWithNoSSR = dynamic(
  () => import("../components/hello3"),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

from react-children-utilities.