Related
I am working on a React project without typescript where imports autocomplete feature doesn't work. What I mean by this is that I don't get an option to import a component:
this is the jsconfig.json:
{
"compilerOptions": {
"jsx": "react-jsx",
"target": "esnext",
"module": "esnext",
"types": ["node", "jest"],
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"checkJs": false
},
"include": [".", "src"]
}
If I enable "checkJs": true, the imports autocomplete is working:
The problem is that now I am getting typescript errors in my project, but I don't want typescript checking in my project:
I tried to disable typescript in .vscode/settings.json in the root project's folder like this:
"tslint.enable":false,
"typescript.validate.enable": false,
"javascript.validate.enable": false
but it didn't help.
package.json
{
"name": "name",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ant-design/icons": "^4.7.0",
"#fullcalendar/daygrid": "^5.11.0",
"#fullcalendar/interaction": "^5.11.0",
"#fullcalendar/react": "^5.11.1",
"#stripe/react-stripe-js": "^1.7.0",
"#stripe/stripe-js": "^1.24.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#testing-library/user-event": "^13.2.1",
"antd": "^4.19.1",
"axios": "^0.26.1",
"card-validator": "^8.1.1",
"clsx": "^1.1.1",
"env-cmd": "^10.1.0",
"formik": "^2.2.9",
"js-cookie": "^3.0.1",
"lodash": "^4.17.21",
"moment-timezone": "0.5.34",
"prop-types": "^15.8.1",
"react": "^17.0.2",
"react-calendly": "^4.0.1",
"react-dom": "^17.0.2",
"react-dropzone": "^14.2.1",
"react-lines-ellipsis": "0.15.0",
"react-lottie": "^1.2.3",
"react-phone-number-input": "3.2.2",
"react-player": "^2.10.0",
"react-responsive": "9.0.0-beta.8",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"react-spinners": "^0.12.0",
"rooks": "5.11.2",
"sass": "^1.49.9",
"web-vitals": "^2.1.0",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts --max_old_space_size=4096 start",
"build": "react-scripts --max_old_space_size=4096 build",
"build:development": "env-cmd -f .env.development react-scripts --max_old_space_size=4096 build",
"build:qa": "env-cmd -f .env.qa react-scripts --max_old_space_size=4096 build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint -c .eslintrc.cjs --ext .js,.jsx .",
"lint:fix": "npm run lint -- --fix"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "8.17.0",
"eslint-config-prettier": "8.5.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-prettier": "4.0.0",
"prettier": "2.6.2"
}
}
The issue is raised already and seems to have no any active fixes
The following links may be helpful:
Quick Fix popup stopped suggesting "Add missing import" for JS #1326
vscode-eslint not working with eslint-import-resolver-typescript#2.0.0 #944
In your TSconfig, add this "importHelpers": true, "allowSyntheticDefaultImports": true,
and in your settings.json add this (specify the type of path to use for imports): "javascript.preferences.importModuleSpecifier": "relative"
Alternatively you can also add this extension in your VSCode for auto imports:
Name: Auto Import
Steps: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
ext install steoates.autoimport
Have you tried excluding directories in tsconfig? If you exlude one, TS won't check it.
You're including types in the "types": [] field, but you don't have those types installed as dependencies. You need to install the types as devDependencies via the commands:
$ npm i -D #types/node #types/jest #types/react #types/react-dom #types/react-responsive`
Using "types": ["foo", "bar", etc...] will not add those types, fetch them from a URL, or Generate them. You still have to manually add them to your project. Even then the "type":[...] field is more for excluding types than it is for including them. Think of it as an "includes" field, but for types. Like the "includes" field, the "types" field, excludes everything, except for what you have included in the "types": [...] array.
The "TypeScript Reference Manual" says this:
If types is specified, only type-packages listed will be included in the global scope. For instance:
{
"compilerOptions": {
"types": ["node", "jest", "express"]
}
}
This tsconfig.json file will only include ./node_modules/#types/node, ./node_modules/#types/jest and ./node_modules/#types/express. Other packages under node_modules/#types/* will not be included.
TypeScript needs types to provide type information. The odd thing that gets me confused is why when you play with the JavaScript settings your able to get type information, even w/o the proper types being installed. Some of your packages already come typed. If I had to guess, I think when you add "allowJS", and "checkJS" you get type information, because VS Code provides types for JavaScript, using TypeScript's tsc compiler to do it, which means VS Code must provide types for tsc. So tsc is getting type information from VS Code when you enable the JS settings (but this is only a theory).
Also, typically, the "includes" field doesn't use "." as what to include. That is basically saying, "include all of my project when compiling", which doesn't make sense because usually no one wants to include everything. the entire project. If anything, at the very least, you would want to use the "exclude" field instead if you truly want to "include": ["."] there is no reason to also include "src", because "." covers source. My suggestion is to remove ".", but if you leave it for what ever reason, at least exclude your node_modules directory & your build directory so tsc knows not to recursively run checks through your dependencies, and the files that it generated.
I'm currently building a React design system library. I'm using Rollup.js as bundler.
The goal is improve the developer experience working with this DS (Design system) package, using NPM link in the host application to install DS and works locally. When I use npm link in the host application to use DS, then run the host application, the console throws to me Invalid hook call. I've tried all this issue explains and I can't solve it. This problem occurs when you have two instances of React, and I have it when I use npm link.
If I push the DS library on my remote repo and install it from GH, it works perfectly, something like this:
"design-system-library": "git://github.com/some-org/design-system-library.git#some-branch-name",
As I have the dist folder inside the files key in my package.json, when I install it from my remote repo, my node_modules only have the dist folder. When I use npm link all the files are in my node_modules
This is my design system library package.json
{
"version": "0.1.0",
"private": true,
"main": "dist/main.cjs.js",
"files": [
"dist"
],
"scripts": {},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"peerDependencies": {
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.58",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"styled-components": "^5.3.0"
},
"devDependencies": {
"#babel/cli": "^7.14.5",
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#babel/preset-react": "^7.14.5",
"#rollup/plugin-babel": "^5.3.0",
"#rollup/plugin-commonjs": "^19.0.0",
"#rollup/plugin-node-resolve": "^7.1.3",
"#svgr/rollup": "^5.5.0",
"react-router-dom": "^5.2.0",
"rollup": "^2.52.2",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"styled-components": "^5.3.0"
}
}
As you can see, I've react and react-dom as peerDependencies.
This is my rollup.config.js file:
import babel from "#rollup/plugin-babel";
import commonjs from "#rollup/plugin-commonjs";
import svgr from "#svgr/rollup";
import copy from "rollup-plugin-copy";
import del from "rollup-plugin-delete";
import external from "rollup-plugin-peer-deps-external";
import css from "rollup-plugin-css-only";
import resolve from "#rollup/plugin-node-resolve";
import pkg from "./package.json";
console.log(Object.keys(pkg.peerDependencies));
const config = {
input: "src/index.js",
output: [
{ file: "dist/main.cjs.js", format: "cjs" },
{ file: "dist/index.esm.js", format: "esm" },
],
plugins: [
external(),
resolve({
customResolveOptions: {
moduleDirectory: "node_modules",
},
dedupe: [...Object.keys(pkg.peerDependencies)],
}),
babel({
exclude: "node_modules/**",
babelHelpers: "bundled",
}),
del({ targets: ["dist/*"] }),
svgr(),
css({ output: "index.css" }),
copy({
targets: [
{ src: "src/assets/fonts", dest: "dist/assets" },
{ src: "src/assets/*.jpg", dest: "dist/assets" },
],
}),
commonjs(),
],
external: [...Object.keys(pkg.peerDependencies)],
};
export default config;
I would like to use my DS in my host application. If I use npm link and then I go to my host node_modules I've installed all my DS files included one playground app inside the the DS repo. This playground application is used to take a fast look about new components.
The DS project structure is something like this:
Design system project structure
The "demo" application uses react too but it works perfect because the react and react-dom that it uses is the same as the DS. This is the demo's package.json. I add this information because I don't know if can be possible that the problem where here.
{
"name": "demo",
"version": "0.1.0",
"private": true,
"devDependencies": {
"design-system-library": "file:..",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"web-vitals": "^1.1.2"
},
"peerDependencies": {
"react": "../node_modules/react",
"react-dom": "../node_modules/react-dom",
"react-scripts": "4.0.3"
},
"scripts": {
"start": "react-scripts start"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
You can be seeing it for one of three typical causes:
1.The versions of React and React DOM you have might not be compatible: It's possible that the version of react-dom you're using ( <16.80 ) doesn't currently support Hooks. To find out which version you're running, use npm ls react-dom command in your application folder. Problems may arise if you locate more than one instance of them.
2.The Rules of Hooks may not be being followed by you:
Call them at the top level in a function component's body, or at the top level in a custom Hook's body.
Hooks should not be called from class components,should not call nside Event handlers, in functions supplied to useMemo, useReducer, or useEffect, should not call Hooks.
3.Within a single app, React may exist in several instances (the most probable reason):
If you use Node for package management, you can run to check the React duplicity in your project folder:
npm ls react
to slove the issue :
don't use react , react-dom as dependencies or devDepenencies in your published package, rather just mention them as peerDependencies ( in your case already done)
2.(how usually I solve this issue when using webpack): mention inside the webpack.config.js file :
resolve: {
alias: {
react: path.resolve("./node_modules/react"),
},
},
get the concept : some how manage to have only single instance of react.
I am having an issue with cookies not being defined in angular scope.
npm run start builds and starts the app just fine,
but when trying to run npm test that executes jest command, I am getting this error:
`Test suite failed to run app/components/Component1/Component1.ts:1:10
error TS2305: Module '"../../../../../node_modules/#types/angular"' has no exported member 'cookies'.`
in Component1.ts there is this import: import { cookies } from 'angular';
Build and run - ok.
Testing - not ok.
If you know where the issue can be hidden, please help :) Thank you.
my package.json:
{
"dependencies": {
...,
"angular": "^1.8.0",
"angular-cookies": "1.8.0",
"babel-polyfill": "^6.2.0",
...
},
"devDependencies": {
"#types/angular": "^1.8.0",
"#types/angular-cookies": "^1.8.0",
"#types/jest": "^26.0.19",
"angular-mock": "^1.0.0",
"angular-mocks": "^1.8.2",
"angularjs-jest": "^0.1.4",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"jest": "^26.6.3",
"ts-jest": "^26.4.4",
...
}
}
solution for my issue was adding angular-cookies to tsconfig.test.json file.
I still do not understand why angular-cookies since source code and production build is taking types and definitions from angular package (and through IDE I can link to angular module rather than angular-cookies).
But that's life is all about - mysteries.
{
"extends": "./tsconfig.json",
"compilerOptions": {
"types": [
"node",
"jest",
"angular-cookies" --> THIS VERY LINE SOLVED MY ISSUE
]
},
"include": [
"index.d.ts",
"**/*.test.ts"
]
}
I just started using Ember and I have some trouble with the Ember Quickstart tutorial. Currently, I get Parsing error: Unexpected character '#' in line 5 of people-list.js:
import Component from '#glimmer/component';
import { action } from '#ember/object';
export default class PeopleListComponent extends Component {
#action
showPerson(person) {
alert(`The person's name is ${person}!`);
}
}
What's wrong here? The code is copied from the tutorial.
This is the output of ember -v:
ember-cli: 3.18.0
node: 11.13.0
os: darwin x64
This is my package.json. I can run npm install, but yarn install gives me The engine "node" is incompatible with this module. Expected version "10.* || >= 12". Got "11.13.0".
{
"name": "ember-quickstart",
"version": "0.0.0",
"private": true,
"description": "Small description for ember-quickstart goes here",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test"
},
"devDependencies": {
"#ember/jquery": "^0.5.2",
"#ember/optional-features": "^0.6.3",
"broccoli-asset-rev": "^2.7.0",
"ember-ajax": "^5.0.0",
"ember-cli-app-version": "^3.2.0",
"ember-cli-babel": "^7.1.2",
"ember-cli-dependency-checker": "^3.1.0",
"ember-cli-eslint": "^4.2.3",
"ember-cli-htmlbars": "^3.0.0",
"ember-cli-htmlbars-inline-precompile": "^1.0.3",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-sri": "^2.1.1",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-uglify": "^2.1.0",
"ember-data": "~3.9.0",
"ember-export-application-global": "^2.0.0",
"ember-load-initializers": "^1.1.0",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-qunit": "^3.4.1",
"ember-resolver": "^5.0.1",
"ember-source": "~3.9.0",
"ember-welcome-page": "^3.2.0",
"eslint-plugin-ember": "^5.2.0",
"loader.js": "^4.7.0",
"qunit-dom": "^0.8.0"
},
"engines": {
"node": "10.* || >= 12"
},
"dependencies": {
"ember-cli": "^3.18.0",
"#glimmer/component": "^1.0.0"
}
}
Adding some text here as SO won't let me post the question otherwise.
You're ember-source is set to ~3.9.0. I'm pretty sure #action is an Octane feature that was added in 3.14.
Either update ember-source to 3.14 or newer or switch to the 3.9.0 documentation. I'd recommend updating as Octane is awesome.
The output says you currently have ember-cli 3.18, but your app seems to have been generated by an older ember-cli 3.9 as indicated by devDependencies.
As mentioned in the comments, 3.9 does not have access to some of the current features unless you install some polyfills.
If regenerating the app is a possibility, I would suggest doing it.
Run ember --version to make sure 3.18 is being called
Run ember new my-app-name and check that package.json has 3.18 for ember-source.
Go through the quickstart!
Alternatively, you can run npx ember-cli new my-app-name and it should generate an app using the latest ember-cli version available in npm.
If you don't want to lose some work you might have done, you can check out ember-cli-update by running something like npx ember-cli-update. Check the README for more info.
I'm new to React Native and am trying to organize my React Native classes into modules to get rid of the "import from '../../../" mess. Here's my very simple folder structure:
Following the tutorial at here, I've structured my package.json as this for each folder:
{
"name": "#foldername"
}
Now, I'm trying to import Page (which is just a component superclass at this time, exported as default in the file):
import Page from '#app/components/core';
But it cannot be resolved. I've also tried:
import Page from '#app/#components/#core';
import { Page } from '#app/#components/#core';
import { Page } from '#app/components/core';
import { Page } from 'app/components/core';
None of them seem to be working. I've also tried them all without the # sign (removing it from both the package files and import statement), but no avail.
How can I organize my components to work that way (and it would be great if I knew what that # sign in front does, as I've also seen some tutorials without it)?
Here is my package.json in my root folder if it helps (haven't touched it, it's the way created by react-native init):
{
"name": "redacted",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.8.3",
"react-native": "0.59.3"
},
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/runtime": "^7.4.2",
"babel-jest": "^24.5.0",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
add babel-plugin-module-resolver to devDependencies.
If you have .babelrc just delete it and add babel.config.js. And add aliases there. It should look like this
function babelConfig(api) {
if (api) {
api.cache(false);
}
const presets = ['module:metro-react-native-babel-preset'];
const plugins = [
[
'module-resolver',
{
alias: {
appColors: './src/Colors',
appConstants: './src/Constants',
components: './src/Components',
screens: './src/Screens',
utils: './src/utils'
},
cwd: 'babelrc'
}
]
];
return {
presets,
plugins
};
}
module.exports = babelConfig;
Then you can use import like this
import { YourComonent } from 'components';
make sure you have exported as default.
Also, don't try to set the alias names with capital letters
This works with the latest react-native (0.59.3).
Here is my devDependencies
devDependencies": {
"#babel/core": "7.4.0",
"#babel/runtime": "7.4.2",
"#react-native-community/eslint-config": "0.0.3",
"babel-eslint": "8.2.2",
"babel-jest": "24.5.0",
"babel-plugin-module-resolver": "^3.2.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.10.0",
"enzyme-to-json": "^3.3.5",
"eslint": "5.15.3",
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-import": "2.12.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.9.1",
"eslint-plugin-react-native": "3.2.1",
"jest": "24.5.0",
"metro-react-native-babel-preset": "0.53.1",
"react-test-renderer": "16.8.3"
},
If you're using VSCode, Intellisense of the IDE does not recognise just the package.json; include a tsconfig/jsconfig JSON file (TypeScript [ftw]/ JavaScript)
In compilerOptions add :
"paths" : {
"#alias1*" : ["./alias1/*"],
.....
}
For all your aliases. Then the editor should pick up your files.
https://code.visualstudio.com/docs/languages/jsconfig
If you choose not to use VSCode, use Babel:
If your project doesn’t use Webpack - for example if you’re working with React Native, you can use your .babelrc file and a babel plugin to get aliasing set up.
Firstly, you’ll want to install babel-plugin-module-resolver with yarn or npm.
Once you’ve done that, open up your project’s .babelrc file, and under the plugins key, add this:
[
'module-resolver',
{
root: ['./src'],
alias: {
myAlias: './src',
},
},
];
Or use the package.json in root
It was my bad.
Instead of using it like:
import MyComponent from 'package/path/MyComponent'
I was using:
import MyComponent from 'package/path' (without my class file at the end).
I've imported it correctly (also removed the app package and the # prefixes and directly referenced components as a package in its package.json file) (including the component name):
import Page from 'components/core/Page';
It worked perfectly.
In tsconfig.json, add the following :
"compilerOptions": {
"baseUrl": "app"
...
}