Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – TypeError: hostOrText.readFile is not a function

I am trying to use npm rollup to make my repo into a npm module but I keep running into this error:

[!] (plugin commonjs--resolver) TypeError: hostOrText.readFile is not a function
    at readJsonOrUndefined (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:19519:74)
    at Object.readJson (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:19528:16)
    at getPackageJsonInfo (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:44772:41)
    at loadModuleFromSpecificNodeModulesDirectory (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:45350:27)
    at loadModuleFromImmediateNodeModulesDirectory (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:45301:58)
    at /Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:45291:39
    at Object.forEachAncestorDirectory (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:8224:26)
    at loadModuleFromNearestNodeModulesDirectoryWorker (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:45285:19)
    at loadModuleFromNearestNodeModulesDirectory (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:45277:16)
    at tryResolve (/Users/mng/Documents/UI-shared-library/node_modules/typescript/lib/typescript.js:44363:34)

Here is my rollup.config.js:

import nodeResolvePlugin from "@rollup/plugin-node-resolve";
import { defineConfig } from "rollup";
import PeerDepsExternalPlugin from "rollup-plugin-peer-deps-external";
import typescript from "rollup-plugin-typescript";
import sassPlugin from "rollup-plugin-sass";
import commonjsPlugin from "@rollup/plugin-commonjs";

const config = defineConfig({
  input: "./src/index.ts",
  output: [
    {
      file: "bundle.js",
      format: "es",
      sourcemap: true,
    },
  ],

  plugins: [
    PeerDepsExternalPlugin(),
    nodeResolvePlugin(),
    commonjsPlugin(),
    sassPlugin({
      insert: true,
    }),
    typescript(),
  ],
});

export default config;

Package.json Dependencies:

"dependencies": {
    "@babel/core": "^7.20.5",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.23.3",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.17",
    "@rollup/plugin-commonjs": "^25.0.7",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "babel-loader": "^9.1.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "rollup": "^2.79.1",
    "rollup-plugin-sass": "^1.12.21",
    "sass": "^1.69.5",
    "web-vitals": "^2.1.0"
  }

"devDependencies": {
    "@storybook/addon-essentials": "^7.5.3",
    "@storybook/addon-interactions": "^7.5.3",
    "@storybook/addon-links": "^7.5.3",
    "@storybook/addon-onboarding": "^1.0.8",
    "@storybook/blocks": "^7.5.3",
    "@storybook/preset-create-react-app": "^7.5.3",
    "@storybook/react": "^7.5.3",
    "@storybook/react-webpack5": "^7.5.3",
    "@storybook/testing-library": "^0.2.2",
    "babel-plugin-named-exports-order": "^0.0.2",
    "eslint-plugin-storybook": "^0.6.15",
    "prettier": "3.1.0",
    "prop-types": "^15.8.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-typescript": "^1.0.1",
    "rollup-plugin-typescript2": "^0.36.0",
    "storybook": "^7.5.3",
    "tslib": "^2.6.2",
    "typescript": "^4.9.5",
    "webpack": "^5.89.0"
  }

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noUnusedLocals": false,
    "rootDir": "src"
  },
  "include": [ "**/*.ts" ],
}

tsconfig.rollup.json

{
    "compilerOptions": {
      "composite": false,
      "declaration": false
    },
    "files": ["./rollup.config.ts"]
  }

These are all the file I believe are relevant. Let me know if there are any other relevant files I should share.

Thanks for your time,

-Matt

SOLUTION:

Downgrading TS from 4.9 -> 4.8 fixed this issue

Tags:

2

Answers


  1. 0

    To fix the error you’re facing with npm rollup and TypeScript, first, update TypeScript and all Rollup plugins to their latest versions. Compatibility issues often cause such errors. Replace rollup-plugin-typescript in your rollup.config.js with rollup-plugin-typescript2, which is more stable and handles errors better.

    Ensure your tsconfig.json and tsconfig.rollup.json are correctly configured. Pay attention to paths and options. In rollup.config.js, verify that the nodeResolvePlugin is correctly set up for handling node modules and TypeScript files.

    Check the configuration of the CommonJS plugin in your Rollup setup, as the error might be related to it. Review your package.json to make sure all dependencies and peer dependencies are correctly listed and compatible.

    Lastly, try clearing the npm cache with npm cache clean --force as this can sometimes resolve unexpected issues. 🛠️💻

    Login or Signup to reply.
  2. 0

    That seems to be a typescript issue. Check here.

    I tried running your project and it worked without any error. I did the following things:

    • Export a simple function that logs hello world.
    • Used node 18.17.0.
    • Ran the rollup command locally, npx rollup -c. This command runs the rollup package installed locally instead of running from the globally installed rollup package.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search