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

Enforcing strict property validation on variables passed into TypeScript functions

The API call for /api/users/create was resolved without a response, which could potentially lead to requests getting stuck. This issue was detected in

Node C++ Addon Typescript declaration file

Performing server operations within a client-side component using Next.js

Exploring the process of selecting checkboxes in Angular 6

Using Angular 6 shortcodes in HTML

The Unhandled Promise Rejection Warning in mocha and ts-node is due to a TypeError that arises when attempting to convert undefined or null values

Enhance the navigation scroll bar with a blur effect

``There was an issue with the connection while fetching data using Nextjs middleware

What are the best practices for handling dynamic content internationalization in Angular?

Extract from Document File

Tips for reloading data with getServerSideProps and enabling data changes in NextJS pages

Can data be cached from the server side using react-query and Next.js?

What is the best way to compile TypeScript files without them being dependent on each other?

Injectable error occurred while injecting one @Injectable() into another

Leverage the power of openCv.js within your next.js projects

Having trouble deploying through fab.dev because the Actions module is missing?

What is the proper way to provide parameters for express.use to avoid encountering a type error?

How to redefine TypeScript module export definitions

Struggling to establish a stable MQTT connection with Next.js? Many users have encountered errors and faced unstable connections. Read on