I need to build shareable React component which could be used across apps.
For this, I was/am following the below article
https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library
My Configuration looks exactly the same except the npm packages version (even tried with the same versions)
The folder structure looks the same as below
rollup.config.js
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "#rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
const packageJson = require("./package.json");
export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
},
];
npm script
"rollup": "rollup -c"
However when I run npm run rollup this throws the below error
[!] Error: Could not resolve entry module (dist/esm/types/index.d.ts).
Error: Could not resolve entry module (dist/esm/types/index.d.ts)
Please suggest. Thanks!
I also ran into the same problem you are experiencing when working with rollup. After spending some while digging for the solution, I finally got to solve this problem.
My Configuration looks exactly the same except the npm packages version (even tried with the same versions)
The exception you have stated is actually the problem. The problem lies in package versioning. The package #rollup/plugin-typescript versions later than 8.3.3 are not generating nor storing the declaration files in the types folder expected to be at the path: dist/cjs/ and dist/esm/.
The latest version at this point in time is 8.5.0 which still breaks. Hopefully it is fixed in near future.
Steps to fix your error
Make sure your tsconfig.json file has "declarationDir": "types" to direct the bundler's typescript plugin to create and store declaration files in the types folder when you run npm run rollup
Uninstall the existing #rollup/plugin-typescript package version by running npm un #rollup/plugin-typescript --save-dev
Install #rollup/plugin-typescript with the command npm i #rollup/plugin-typescript#8.3.3 --save-dev. As you see, we are picking a specific version.
If you still encounter problems:
Manually update the package.json file like: "#rollup/plugin-typescript": "8.3.3". Note that I have removed the caret(^) symbol to tie the package to version 8.3.3.
Delete the node_modules folder. You could use the command rm -rf node_modules.
Delete package-lock.json.
Run npm i to install the packages again with versions specified in package.json
Here's an working answer for people coming from 2023 that doesn't lock you to an outdated version of #rollup/plugin-typescript:
Preconditions: Make sure that you get rid off your package-lock.json and your node_modules directory so that you can start from a clean slate and install your project again.
run npm install tslib --save-dev
add "type": "module" to package.json
in tsconfig.json, add "rootDir": "src"
in rollup.config.js, change plugins: [dts()] to plugins: [dts.default()]
back in package.json, add --bundleConfigAsCjs as a parameter to the rollup command in scripts
After that you should be able to continue with the tutorial and be able to create a new build via npm run rollup.
I fixed the error of 'Could not resolve entry module (dist/esm/index.d.ts)'.
I tried removing types, downgrading react to match the version in the tutorial but none worked.
I found this comment on the tutorial which was helpful: https://dev.to/nasheomirro/comment/239nj
I got rid of main and common js set up in both rollup config and package json.
i changed the packagejson variable to import packageJson from "./package.json" assert { type: "json" };
added types back into the input in the rollup config
Set "#rollup/plugin-typescript" to be version "8.3.3" as mentioned above.
I now have a Dist folder with an ESM folder and didn't get any errors.
I want to achieve that by clicking on a button in a ReactJS project a MQTTjs handler sends/publishes a message to a broker. MQTT functionality is already tested without React. Im running my React Project on macOS (v11.6.2) with WebStorm (v2021.3).
For solving that I followed the instructions from MQTTjs on Github and NPM. Namely:
npm install -g webpack
npm install mqtt
cd node_modules/mqtt
npm install .
webpack mqtt.js --output-library mqtt
While npm install . throws no errors webpack mqtt.js --output-library mqtt does:
Module not found: Error: Can't resolve 'mqtt.js' in '/Users/Marco/JetBrains/WebStorm/WG/kitchen_control_view/node_modules/mqtt'
Did you mean './mqtt.js'?
So I tried it again with adding ./: webpack ./mqtt.js --output-library mqtt. This time I don't get any errors but warnings:
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
I thought 'No errors?! Let's give it a try'.
Edit: I could get rid of the warning with ./node_modules/.bin/webpack ./mqtt.js --mode=development --output-library mqtt
So in one of my JSX files I import mqtt as stated at Github or NPM.
import mqtt from "mqtt"
function App() {
return (
<div>
<p>Test</p>
<div>
)
}
I didn't use the mqtt package already, just imported it. And this throws me an error in console:
and this error in web browser:
Compiled with problems:
ERROR in ./node_modules/mqtt/lib/connect/index.js 7:12-26
Module not found: Error: Can't resolve 'url' in '/Users/Marco/JetBrains/WebStorm/WG/kitchen_control_view/node_modules/mqtt/lib/connect'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "url": false }
Here are the versions of mqtt and react from package.json:
"mqtt": "^4.3.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
I then installed buffer with npm install buffer. But then React throws a lot of errors in the browser. I just picked the first one. The others are quite similar and point to the same path /Users/Marco/JetBrains/WebStorm/WG/kitchen_control_view/node_modules/mqtt/node_modules/[PACKAGE_NAME]
Compiled with problems:
ERROR in ./node_modules/mqtt/node_modules/debug/src/browser.js
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '/Users/Marco/JetBrains/WebStorm/WG/kitchen_control_view/node_modules/mqtt/node_modules/debug/src/browser.js'
The console error changed to:
I appreciate any help and please let me know if I forgot some important information.
Best,
Marco
I too faced the same issue, after lot of research I was able to make it work. So I decided to publish a build version of mqtt#4.3.7 here . So instead of
import mqtt from "mqtt";
import the precompiled-mqtt package
import mqtt from "precompiled-mqtt";
And everything will be same the official mqtt.js
I've created react app with create-react-app and I'm unable to add alias to resolve -> alias node in webpack.config.js located in node_modules/react-scripts/config:
Module not found: Can't resolve '#/_components' in 'c:\my-app\src\app'
alias: {
'#': path.resolve(__dirname, 'src/'),
Probably missing smth simple... Here are webpack docs: https://webpack.js.org/configuration/resolve/#resolvealias
once you use create-react-app the standard way to modify your webpack setting is to run npm run eject as stated docs and not modify directly at node_modules as you are trying to.
to avoid the ejecting command you could use a helper lib react-app-rewired which simplifies the process for overriding some default webpack configurations.
nevertheless, create-react-app offers the option to point absolute paths through a jsconfig.json file like stated in the docs reference which might suit you better:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
I have sample installation of react-app and I got the following
Error: Failed to load parser '#typescript-eslint/parser' declared in '.eslintrc » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'
after running
npm run lint -> eslint .
I don't use typescript in this project.
I tried to install it from scratch and got it again.
also tried to remove tslint from vscode plugin
You can add this to your .eslintignore file in the root of your project.
node_modules
create-react-app team will release a new version with that fix also
https://github.com/facebook/create-react-app/pull/8376
I had the same issue when trying to create a new react app today.
You can try the following steps:
Make sure you update your nodejs to the latest version
Make sure your folder path is short and does not contain spaces
Run: npm install -g create-react-app
Run: npm i --save-dev typescript #typescript-eslint/parser
Run: create-react-app my-app
Create React App adds eslint config to package.json, so you just have to add eslintIgnore with node_modules in package.json. A cleaner alternative to creating a separate file .eslintignore
// package.json
// ...
"eslintConfig": {
"extends": "react-app"
},
"eslintIgnore": [
"node_modules",
"build/*"
],
Most likely, you have this in your .eslintrc:
extends: react-app
It means the following rule is applied:
files: ['**/*.ts?(x)'],
parser: '#typescript-eslint/parser',
Which probably means you have *.ts/*.tsx files in your root folder. But maybe it's the vscode-eslint. Did you try to run yarn lint from the terminal?
Your error message says eslint is looking for typescript because of a setting in the file .eslintrc so try looking in that file for #typescript-eslint/parser and remove it.
I was removing typescript from a project and I got the same error because I had forgotten a typescript definition somewhere under the src folder... deleting the file fixed the issue.
In my case, I wanted typescript, but didn't get it installed.
This question still helped me figure out my problem which is described below.
I was watching a YouTube video, React Typescript Tutorial that explained how to get started with typescript and react, and the video said to run:
npx create-react-app cra-ts --typescript
This didn't work (but I didn't know it). As soon as I created a hello.ts file, I got the error the OP describes.
Error: Failed to load parser '#typescript-eslint/parser' declared in 'package.json » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'
The fix was to use the command:
npx create-react-app myappts --template typescript
This used create-react-app#4.0.0 and react-scripts#4.0.0.
ProTip: If your newly created React App doesn't have a file named App.tsx, then you haven't actually created it correctly.
I am trying to import components from react-materialize as -
import {Navbar, NavItem} from 'react-materialize';
But when the webpack is compiling my .tsx it throws an error for the above as -
ERROR in ./src/common/navbar.tsx
(3,31): error TS7016: Could not find a declaration file for module 'react-materi
alize'. 'D:\Private\Works\Typescript\QuickReact\node_modules\react-materialize\l
ib\index.js' implicitly has an 'any' type.
Is there any resolution for this? I'm unsure how to resolve this import statement to work with ts-loader and webpack.
The index.js of react-materialize looks likes this. But how do I resolve this for the module import in my own files?
https://github.com/react-materialize/react-materialize/blob/master/src/index.js
I had a similar error but for me it was react-router. Solved it by installing types for it.
npm install --save #types/react-router
Error:
(6,30): error TS7016: Could not find a declaration file for module 'react-router'. '\node_modules\react-router\index.js' implicitly has an 'any' type.
If you would like to disable it site wide you can instead edit tsconfig.json and set noImplicitAny to false.
For those who wanted to know that how did I overcome this . I did a hack kind of stuff .
Inside my project I created a folder called #types and added it to tsconfig.json for find all required types from it . So it looks somewhat like this -
"typeRoots": [
"../node_modules/#types",
"../#types"
]
And inside that I created a file called alltypes.d.ts . To find the unknown types from it . so for me these were the unknown types and I added it over there.
declare module 'react-materialize';
declare module 'react-router';
declare module 'flux';
So now the typescript didn't complain about the types not found anymore . :) win win situation now :)
I've had a same problem with react-redux types. The simplest solution
was add to tsconfig.json:
"noImplicitAny": false
Example:
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["es6"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext",
"noImplicitAny": false,
},
"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}
If there is no #types/<package> for the module you are using, you may easily circumvent the issue by adding a // #ts-ignore comment above i.e.
// #ts-ignore
import { Navbar, NavItem } from 'react-materialize';
Alternatively you may create the missing #types/<package> following:
declaration files publishing
DefinitelyTyped how can i contribute
Make sure to stop your react local server and start it again after doing the following:
1- Create .d.ts file manually, you just need to do the following:
2 - enter src folder
3 - create global.d.ts file
4 - declare modules in it like:
declare module 'module-name';
I answered it here before and it was nice
In my case I had a problem with react, so I started doing:
npm install #types/react
and then to the
npm install #types/react-dom
This worked for me
Just install the necessary types for react and it should solve the error.
if you are using yarn:
yarn add #types/react #types/react-dom #types/react-router-dom -D
if you are using npm:
npm install #types/react #types/react-dom #types/react-router-dom --save-dev
I had this same problem but not necessarily relating to typescript, so I struggled a bit with these different options. I am making a very basic create-react-app using a specific module react-portal-tooltip, getting similar error:
Could not find a declaration file for module 'react-portal-tooltip'. '/node_modules/react-portal-tooltip/lib/index.js' implicitly has an 'any' type.
Try npm install #types/react-portal-tooltip if it exists or add a new declaration (.d.ts) file containing declare module 'react-portal-tooltip';ts(7016)
I tried many steps first - adding various .d.ts files, various npm installs.
But what eventually worked for me was touch src/declare_modules.d.ts
then in src/declare_modules.d.ts:
declare module "react-portal-tooltip";
and in src/App.js:
import ToolTip from 'react-portal-tooltip';
// import './declare_modules.d.ts'
I struggled a bit with the different locations to use this general 'declare module' strategy (I am very much a beginner) so I think this will work with different options but I am included paths for what worked work me.
I initially thought import './declare_modules.d.ts' was necessary. Although now it seems like it isn't! But I am including the step in case it helps someone.
This is my first stackoverflow answer so I apologize for the scattered process here and hope it was still helpful! :)
All you need to do is run the below script. Then, remove/re-install the module that you want to use.
npm install --save #types/react-redux
Had the same error with react-router-dom.
This error occurs when you're working on a typescript project, default modules doesn't come with types that are needed with typescript.
So I searched on npmjs.com a package named #types/react-router-dom if it's not react-router-dom you're seeking for then replace the react-router-dom by your untyped module.
Seek for the last version on the npm website, then add this in your package.json like so :
[...]
"dependencies": {
[...]
"#types/react-router-dom": "^5.1.8",
[...]
},
[...]
Once it's done, run yarn install
Then it should rocks !
I had this issue when I added react-router-dom to the new CRA app using typescript. After I added #types/react-router, the issue was fixed.
A more hacky way is to add eg., in boot.tsx the line
import './path/declare_modules.d.ts';
with
declare module 'react-materialize';
declare module 'react-router';
declare module 'flux';
in declare_modules.d.ts
It works but other solutions are better IMO.
Could not find a declaration file for module 'react/jsx-runtime'
If someone's having this error, then you'll be surprised to know that when creating react app with create-react-app, it only shows #types/react in package.json. But if you check inside the node_modules/#types folder, you'll not find any folder of react.
Solution is to just wipe out the node_modules folder completely and reinstall - npm install or maybe can go with the individual module installation - npm install #types/react.
Also, this error gets fixed if the package you're trying to use has it's own type file(s) and it's listed it in the package.json typings attribute
Like so:
{
"name": "some-package",
"version": "X.Y.Z",
"description": "Yada yada yada",
"main": "./index.js",
"typings": "./index.d.ts",
"repository": "https://github.com/yadayada.git",
"author": "John Doe",
"license": "MIT",
"private": true
}
What I did was run the following commands from nodejs command prompt while in the project folder directory:
npm init
npm install -g webpack
npm install --save react react-dom #types/react #types/react-dom
npm install --save-dev typescript awesome-typescript-loader source-map-loader
npm install ajv#^6.0.0
npm i react-html-id
import the package(in node modules) in App.js file by adding the code: import UniqueId from 'react-html-id';
I did the above(although I already had npm installed) and it worked!
I got it after lots of trouble
In react app
there will be a react-app-env.d.ts file in src folder
just declare module there
/// <reference types="react-scripts" />
declare module 'react-color/lib/components/alpha/AlphaPointer'
For my case the issue was that the types were not getting added to package.json file under devDependencies to fix it I ran npm install --save-dev #types/react-redux note the --save-dev
try adding to tsconfig.json file: "noImplicitAny": false
worked for me
In case if you have problem with react npm install --save #types/reactnpm install --save #types/react
Like this one:
{
"name": "some-package",
"version": "X.Y.Z",
"description": "Yada yada yada",
"main": "./index.js",
"typings": "./index.d.ts",
"repository": "https://github.com/yadayada.git",
"author": "John Doe",
"license": "MIT",
"private": true
}
Also, this error gets fixed if the package you're trying to use has it's own type file(s) and it's listed it in the package.json typings attribute
These are notes if you want to just declare types for a node module where typings are not available.
Solution--->
create a global.d.ts file inside src directory.
because typescript is already watching src directory
and thus we avoid explicitly stating in tsconfig.json to load particular type files also, because in doing so we other default typing location can get overriden
Try npm i --save-dev #types/react-materialize if it exists or add a new declaration (.d.ts) file containing declare module 'react-materialize';
You can find a proper solution over here. You just need to replace react-items-carousel with react-materialize.
I've had the same problem, The simplest solution was
npm i --save-dev #types/react-router && npm i --save-dev #types/react-router-dom
Created a file called index.d.ts in the src folder and added
declare module 'react-materialize';
then included the file in tsconfig.json file like:
"include": [
"src",
"index.d.ts"
]
works just fine
npm install #types/react-materialize
There might be cases when some dependencies doest not have types and ts forces you to include types for that. There is a workaround to resolve the issue, which is to use javascript instead.
e.g.
import {Charts} from "react-charts"; //error: Could not find a declaration file for module 'react-charts'.
Workaround: const ReactChart = require("react-charts"); //no-error