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 am working with create-react-app + typescript + eslint application and during build have such error:
Line 1:8: 'React' was used before it was defined #typescript-eslint/no-use-before-define
Code in my component starts with:
import React from "react";
Eslint settings:
module.exports = {
parser: "#typescript-eslint/parser",
parserOptions: {
ecmaVersion: 2020,
sourceType: "module",
ecmaFeatures: {
jsx: true
}
},
settings: {
react: {
version: "detect"
}
},
extends: [
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint",
"plugin:prettier/recommended"
],
rules: {
"#typescript-eslint/explicit-module-boundary-types": 0,
"#typescript-eslint/triple-slash-reference": 0,
"no-use-before-define": "off",
"#typescript-eslint/no-use-before-define": "off"
},
};
Some part of package.json:
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.1.0",
"#typescript-eslint/parser": "^4.1.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.20.0",
"prettier": "^2.0.5",
"start-server-and-test": "^1.11.3"
},
"dependencies": {
...
"react-scripts": "3.4.3",
...
}
I tried:
Read https://github.com/typescript-eslint/typescript-eslint/issues/2502
Disable #typescript-eslint/no-use-before-define and no-use-before-define in .eslintrc.js
Actually I tried to delete .eslintrc.js at all, but had the same error.
From the official documentation.
"rules": {
// note you must disable the base rule as it can report incorrect errors
"no-use-before-define": "off",
"#typescript-eslint/no-use-before-define": ["error"]
}
The bug occurs due to mismatch of #typescript-eslint versions in react-scripts and your local package.json - GitHub issue
You can downgrade the packages until react-scripts updates their version.
"#typescript-eslint/eslint-plugin": "4.0.1",
"#typescript-eslint/parser": "4.0.1",
EDIT 2020-09-14
It seems the bug is not related to react-scripts version of #typescript-eslint since multiple people reported the same bug without using react-scripts.
Anyway, the workaround remains the same - downgrade to the working version of #typescript-eslint until the fix is available.
EDIT 2020-10-24
react-scripts#4.0.0 has been published with updated #typescript-eslint. Using the newest version should solve the issue.
EDIT 2020-11-04
If after upgrading the packages the error is still there, most probably your eslint config uses the wrong rule. Check out Igor's answer to fix it.
If you are only getting this error for .js files, make sure #typescript-eslint/parser is being used exclusively on Typescript files.
.eslintrc.json (abbreviated)
{
"overrides": [
{
"files": ["**/*.ts", "**/*.tsx"],
"plugins": ["#typescript-eslint"],
"rules": {
"no-use-before-define": "off",
"#typescript-eslint/no-use-before-define": ["error"],
},
}
],
// WRONG: Do not use #typescript-eslint/parser on JS files
// "parser": "#typescript-eslint/parser",
"plugins": [
"react",
// "#typescript-eslint"
],
}
That is how I resolved my problem.
First of all, go to the node_modules/react-scripts/config/webpack.config.js and change cache to false, because this will help you to understand what works and what is not then you changing eslint file. I found it here
cache: true, // You can set it to false
formatter: require.resolve('react-dev-utils/eslintFormatter'),
Add ENV varialbe to .env file. More info
EXTEND_ESLINT=true
From now CRA will have to use your local eslint for linting during your build and we have control to disable some rules, in my case in .eslintrc:
rules: {
"#typescript-eslint/no-use-before-define": "off"
},
I landed on this page after I started getting issues with a Gatsby project that was using Typescript and an ESLint config that extended eslint-config-airbnb-typescript. In addition to OP's error, ESLint was also giving errors on various rules not being defined, like Definition for rule '#typescript-eslint/no-redeclare' was not found. and a few others.
The underlying problem ended up being that Gatsby was using fairly old versions of both #typescript-eslint/eslint-plugin and #typescript-eslint/parser. Forcing yarn to install only up-to-date versions solved the issue:
// package.json
"resolutions": {
"#typescript-eslint/eslint-plugin": "^4.4.0",
"#typescript-eslint/parser": "^4.4.0"
}
My fix for that:
Use eslint 6 as react-scripts is using
Force react scripts to use newer #typescript-eslint packages as the rest of the repo.
I'm using selective resolution here
"resolutions": {
"**/react-scripts/**/#typescript-eslint/eslint-plugin": "^4.4.1",
"**/react-scripts/**/#typescript-eslint/parser": "^4.4.1"
}
#typescript-eslint 4.x does still support es6
I got this error from the airbnb-base ruleset in a typescript project. Also extending airbnb-typescript (that has the correct rules for typescript) resolved the issue.
This has been resolved in 4.4.0. Upgrade these dependencies to version 4.4.0
Update: This may work for some use cases. This resolved my issue.
"#typescript-eslint/eslint-plugin": "^4.4.0",
"#typescript-eslint/parser": "^4.4.0",
I just wanted to add that for me, I did the following.
Removed all eslint related dependencies from package.json if they were already included in package-lock.json by react-scripts (for me that was all of them)
Deleted my node_modules folder, and package-lock.json file
Ran npm install
After completing those steps I finally got that error to go away. I prefer removing the dependencies to downgrading them since this will help avoid the same issue happening again in the future.
Try adding import/resolver to your Eslint settings:
"settings": {
"react": { "version": "detect" },
"import/resolver": { "typescript": {} }
}
Maybe you will need to install it too:
$ yarn add -D eslint-import-resolver-typescript
If that doesn't work, you could change this rule
"#typescript-eslint/no-use-before-define": "off"
like this:
"no-use-before-define": "off"
It is an issue present in ESLINT.
The way I resolve is to add the following lines to the ESLINT/rules:
"no-use-before-define": [0],
"# typescript-eslint / no-use-before-define": [1],
If you use Create React App. Getting the latest version of react-scripts fixed this issue for me. Currently: 4.0.3
// Get this specific version:
npm uninstall react-scripts
npm install react-scripts#4.0.3
// Get latest version:
npm uninstall react-scripts
npm install react-scripts
(not enough rep to comment)
#sashko's workaround seems to work - deleting node_modules was necessary as well.
One thing I missed was the caret in "^4.0.1". The version needs to be fixed without the caret ^, which seems to be the issue that #Rolly is having. Make sure it's 4.0.1.
Only a workaround until react-scripts updates to v4 (I'm using create-react-app)
deleting the node_modules folder and reinstalling it worked for me. I'm using yarn as package manager.
I deleted packages #typescript-eslint/eslint-plugin and #typescript-eslint/parser from my package.json,
deleted node_modules and package-lock.json,
reinstalled packages: npm install
The error disappeared.
UPDATE
After that create-react-app uses their own #typescript-eslint/eslint-plugin module which is deprecated.
This Answer worked for me in a react-native project(airbnb style guide)
Extend your rules with airbnb-typescript inside the .eslintrc.json
"extends": {
"airbnb-typescript"
}
Press ctrl+shift+p or cmd+shift+p >Reload window (or simply close and re-open vscode)
Try using Yarn instead of NPM (make sure to remove your node_modules in between).
This worked for me.
I recently upgraded RN from version 0.59.4 to 0.61.5.
I want to use react-native-web and added react-scripts (3.4.1) and react-dom (16.13.1). After some cleaning up of native modules not supported, running react-scripts start results in failure to compile because of lint errors (no-undef, for example). These are not rules set up in my .eslintrc.js file and seem to come with the new way of running scripts.
Is there a way to ignore the lint errors to try and compile? While I could try and make these changes in my code base, there are some issues in dependencies as well.
Additionally, I updated my babel as per react-native-web
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
["module-resolver", {
"alias": {
"^react-native$": "react-native-web"
}
}]
]
};
I have read this might be webpack related, but there is currently no webconfig. I tried adding what was on the react-native-web getting starter page, but had no luck there either.
I built react project with webpack and babel.
It worked well.
But, today I got some error below.
ERROR in ./index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /home/rpf5573/react-discovery-v2/src/admin/admin-client/index.js: Invalid Option: corejs is not a valid top-level option.
Maybe you meant to use 'targets'? (While processing: "/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/#babel/preset-env/lib/index.js")
at validateTopLevelOptions (/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/#babel/preset-env/lib/normalize-options.js:49:13)
at normalizeOptions (/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/#babel/preset-env/lib/normalize-options.js:160:3)
at _default (/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/#babel/preset-env/lib/index.js:168:37)
....
error Command failed with exit code 2.
And this is my admin-client/.babelrc
module.exports = {
compact: true,
presets: [
[
"#babel/preset-env",
{
modules: false,
targets: {
browsers: ["since 2015"]
},
useBuiltIns: "usage",
corejs: "2"
}
],
"#babel/preset-react"
],
plugins: [
"#babel/plugin-proposal-class-properties"
]
}
What did I wrong ?
What should I do ?
Maybe you had some major version change recently?
In my case, that was the cause. And the solution was:
Completely remove node-modules folder from the project
Remove package-lock.json file from the project root folder
Perform a npm i to recreate everything
As an alternative to entirely deleting node-modules as suggested by #SysDragon. I looked deeper into why the complaint was specific to corejs. And i found a great remedy here.
In summary, these were the steps taken:
Install the latest version of core-js (or atleast version-3).
Whatever you are building "might" be making use of latest JavaScript functionality. For my case, i was working with react-16.9.0 and mdbreact-4.19.0.
Note: Core-js is a Modular standard library for JavaScript. Includes polyfills for ECMAScript up to 2019: promises, symbols, collections, iterators, typed arrays and many other features.
Then, you need to update your transpiler, babel and it's "relatives".
This block snippet helped accomplish that: yarn upgrade #babel/core #babel/plugin-transform-runtime #babel/polyfill #babel/preset-env #babel/runtime babel-loader --dev.
The --dev part is just to save them as devDependencies (if using yarn) (for npm, use --save-dev), which i advocate for especially if this is team project.
In my case, the subdirectory I was working on was part of a larger Yarn workspace in the root of the repository and removing that subdirectory from the workspace and reinstalling node_modules within the subdirectory fixed the issue.
This issue is most likely caused by dependency mismatches.
I'm getting an error when setting up Mobx with react, can anyone give me a simple step by step? I'm fairly new to React and I'm still getting my head around the files that come with it.
Here's what I did:
Used create-react-app
ejected app
Ran npm install --save mobx mobx-react
ran npm install --save-dev #babel/plugin-proposal-decorators
I then edited the package.json file:
"babel": {
"plugins": [
"#babel/plugin-proposal-decorators"
],
"presets": [
"react-app"
]
},
Here's the problem I'm getting:
What I tried:
The error seems to suggest that I need to set legacy to true in node_modules\#babel\plugin-proposal-decorators\lib\index.js. I tried that and it didn't work. I searched for the problem on google and it seems like it could be an issue with Babel 7?
You need to pass the option with the config you setup in your package.json
{
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }]
]
}
You can check the docs here: https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html