There seems to be an issue with executing an imported function from a .ts file within a TSX file in NextJs, resulting

Question

There seems to be an issue with executing an imported function from a .ts file within a TSX file in NextJs, resulting

I've encountered an issue that seems to be related to using NextJs with TypeScript.

For 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>
  )
}

This same error occurs with my custom functions as well, not just lodash functions.

When I import a function from a .ts file into my .tsx file and try to execute it within TSX, I receive a ModuleNotFound error. Sometimes I also encounter

ModuleNotFoundError: Module not found: Error: Can't resolve 'child_process'

. Interestingly, I can import and run a custom function imported from a .js file without any issues.

Here is my tsconfig.json configuration:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "...other options..."
  },
  "...other entries..."
}

Additionally, here is my package.json setup:

{
  "dependencies": {
    "@mdx-js/loader": "^1.6.22",
    "...other dependencies..."
  },
  "devDependencies": {
    "@types/lodash": "^4.14.172",
    "...other devDependencies..."
  }
}

In my next.config file, I use withMDX for handling MDX files:

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

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

It seems like I may have overlooked something in configuring NextJs to work seamlessly with TSX and TypeScript. Any insights or solutions would be greatly appreciated!

typescript next.js tsx react-tsx

Answer 1

Answer №1

Prefer to Resemble a Syntax Error

Your component needs to be returned with parentheses () to directly return JSX.

Additionally, import lodash functions by name like this:

import { map } from "lodash";

as it will aid in code-splitting

Thus, your component should look something like this:

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 might not require using the lodash map in this scenario:

Simply utilize js Array.map

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

Answer 2

Prefer to Resemble a Syntax Error

Your component needs to be returned with parentheses () to directly return JSX.

Additionally, import lodash functions by name like this:

import { map } from "lodash";

as it will aid in code-splitting

Thus, your component should look something like this:

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 might not require using the lodash map in this scenario:

Simply utilize js Array.map

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

Answer 3

Answer №2

Typescript had no part in causing the error. The problem stemmed from using serialize outside of NextJS's pages directory while utilizing the next-mdx-remote package.

Answer 4

Typescript had no part in causing the error. The problem stemmed from using serialize outside of NextJS's pages directory while utilizing the next-mdx-remote package.

There seems to be an issue with executing an imported function from a .ts file within a TSX file in NextJs, resulting

Answer №1

Prefer to Resemble a Syntax Error

Answer №2

Similar questions

The type 'myInterface' cannot be assigned to the type 'NgIterable<any> | null | undefined' in Angular

Updating documents within an array in MongoDB is a common task that can be easily accomplished

Refine the category based on a specified key

Exploring the capabilities of Angular 4 with the integration of the Web

Is a donut chart graph visible on the webpage?

Error encountered following the upgrade of Angular and RxJS 5 to 6: Compilation failed

getStaticProps only runs on IIS after the entire page is refreshed

A solution to the error message "Type 'unknown' is not assignable to type 'Country[]' in React TypeScript" is to explicitly define the type of the

Typescript - Creating a Class with Constructor that Extends an Interface without Constructor

Is it feasible to utilize math.max with an array of objects?

Revise Swagger UI within toggle button switch

Encountering the error "ERR_HTTP_HEADERS_SENT" after attempting to send emails through the next.js API

Ways to resolve eslint typedef error when using angular reactive forms with form.value

The application is having trouble accessing the property 'isXXXXX' because it is undefined

Why does the final value appear when passing an incrementing counter as a prop to multiple React Components created in a loop?

The ins and outs of Angular's type checking mechanisms

Retrieve the 90 days leading up to the current date using JavaScript

Creating specific union types for a bespoke React hook

Convert C# delegate into TypeScript

Vercel - Scheduled Tasks, Running Code exclusively during Deployment