0

I have an issue which is likely related to using NextJs with typescript.

Example:

// /pages/index.tsx

import _ from 'lodash' 

export const MyComponent = () => {
  return {
   <ul>{
    _.map(someArray, el => <li>{el}</li>) // Error: Module not found: Can't resolve 'fs'
   }</ul>
}

I have the same error also for my own functions, not only with lodash functions.

If I import a function from a .ts file into my .tsx file and then execute it inside TSX, I get a ModuleNotFound error, also sometimes ModuleNotFoundError: Module not found: Error: Can't resolve 'child_process'. I can however import and execute a custom function imported from a .js file.

This is my tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

package.json:

  "dependencies": {
    "@mdx-js/loader": "^1.6.22",
    "@next/mdx": "^11.0.1",
    "lodash": "^4.17.21",
    "next": "^11.0.1",
    "next-mdx-remote": "^3.0.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-markdown": "^6.0.2",
    "typescript": "^4.3.5"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.172",
    "@types/react": "^17.0.20",
    "@typescript-eslint/eslint-plugin": "^4.30.0",
    "eslint": "^7.32.0",
    "eslint-config-next": "^11.1.2"
  }
}

next.config:

const withMDX = require('@next/mdx')({
  extension: /\.mdx$/
})

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
})

I guess I missed something when configuration NextJs to work with TSX and Typescript. Thank you!

Laurent Dellere
  • 21
  • 3

2 Answers2

0

Rather look like a syntax error

Your component should be returned with a () to return direct JSX.

And also, named import lodash function like so: import { map } from "lodash"; this will help on code-splitting

So, you component should be like so:

import _ from "lodash";

export const MyComponent = () => {
  return (
    <ul>
      {_.map(someArray, el => (
        <li>{el}</li>
      ))
      }
    </ul>
  );
};

OR implicitly returned:

import _ from 'lodash';

export const MyComponent = () => (
  <ul>
    {_.map(someArray, el => (
      <li>{el}</li>
    ))
      }
  </ul>
);

OR you probably don't need to use lodash map in your case:

Just use js Array.map

export const MyComponent = () => (
  <ul>
    {someArray.map(el => (
      <li key={el}>{el}</li>
    ))}
  </ul>
);
Ryan Le
  • 7,708
  • 1
  • 13
  • 23
  • thanks for your comment. However changing it to `return (..)` does not fix the issue. – Laurent Dellere Sep 10 '21 at 08:31
  • Try to import lodash like: `import { map } from "lodash";` see if it works? – Ryan Le Sep 10 '21 at 08:31
  • And you might not need to use lodash for your case, like the last section in my answer. – Ryan Le Sep 10 '21 at 08:33
  • Thanks for the code splitting improvement. – Laurent Dellere Sep 10 '21 at 08:36
  • using `import { map } from "lodash"`or VanillaJS `map` both don't work. No function, also not functions I define myself, are working in this context when used inside TSX so I guess the error lies in my NextJS/typescript configuration. Please note that executing functions in NextJS `getStaticProps` works. – Laurent Dellere Sep 10 '21 at 08:38
  • I see, so the error might causing by somewhere else in the configuration. – Ryan Le Sep 10 '21 at 08:40
  • 1
    Solved. The issue was when configuring the mdx module, see solution here: https://www.reddit.com/r/nextjs/comments/plkc51/cannot_import_function_from_another_file_in_my/ – Laurent Dellere Sep 10 '21 at 19:35
  • Can you please post answer how actually you solved this issue? @LaurentDellere – Suroor Ahmmad Nov 27 '21 at 16:42
  • @SuroorAhmmad My issue had nothing to do wit typescript or TSX. The problem was coming from the @next/mdx package. The serializer function from that package can only be used inside a /pages template in NextJs. – Laurent Dellere Nov 29 '21 at 08:11
0

The error had nothing to do with typescript. The issue was that I used serialize from next-mdx-remote package outside NextJS pages directory which does not work.

Laurent Dellere
  • 21
  • 3