I am new to react and have been trying to find my way through. I have created a react component and published it to a private npm repo. so the component is accessed as #myorg/testcomponent.
I did an npm install --save #myorg/testcomponent to install the component into a project created via create-react-app
Inside react, when I do the following, the import fails
import TestComponent from '#myorg/testcomponent'
gives:
Failed to compile.
./src/App.js
Module not found: Can't resolve '#myorg/testcomponent' in '/mnt/c/Workspaces/ui/test_project/src'
I am not sure why it is trying to resolve it from the src directory, while the component is installed in node_modules
how do I get it to resolve from node_modules, is there some step i am missing?
Related
I used the following commands to create a react app:
npm install react-native
npx create-react-app my-app
cd my-app
npm start
The I added the following line of code in the App.js and reloaded the browser.
import {SafeAreaView} from 'react-native';
But it keeps showing the error:
./src/App.js
Module not found: Can't resolve 'react-native' in '/Users/sdan/Documents/Projects/my-app/src'
You are using react not react-native if you want to create and run react-native just flow document https://reactnative.dev/docs/environment-setup and then you can create react-native app like that:
npx react-native init AwesomeProject
I cannot seem to resolve why I'm receiving this error: Here are my configs:
lang-js
react - 15.3.1
react-dom - 15.3.1
react-testing-library - 6.0.0
jest - 23.6.0
lang-js
import React from 'react';
import { render, fireEvent, cleanup } from 'react-testing-library';
afterEach(cleanup);
test('loads and displays ', async() => {
})
I commented on an open GH issue on the react-testing-library page. Thanks in advance
This may have happened if something got modified or deleted in your react-dom dependency package.
Using yarn
You can verify that already installed files in node_modules did not get removed, reinstalling any missing files by using:
npm install --check-files
That should help you restore react-dom to what it should be.
If that doesn't work, you can always try to completely remove and reinstall all of your packages. From your project root folder, try:
rm -rf node_modules
yarn install
Using npm
First, you can try just to install react-dom again. That might solve your problem:
npm install react-dom
If that doesn't work, then you can try to reinstall all of your packages to get a fresh copy.
From your project root folder, try:
rm -rf node_modules
npm install
I am trying some react native code.
Added props for my component based on the instructions given in this blog.
End up in the error, Can't find variable: PropTypes
Found the same question in github but it was closed without any answers
Couldn't get any clues.
You need to do install prop-types with npm install --save prop-types or yarn add prop-types and then add this to your code:
import PropTypes from 'prop-types';
Make sure prop-types is installed:
npm install --save prop-types
Make sure the following line is added in the file where the error originated
import PropTypes from 'prop-types'; .
Ok, so I was having a similar issue when configuring my react router (react-router-dom),
then I realized I used YARN to add react, react-dom and prop-types, and NPM to add the react-router-dom, then I got suspicious it was this the problem and I:
removed it with:
npm uninstall react-router-dom
and installed it with:
yarn add react-router-dom --dev
and it stopped giving me the error / fixed it.
Am developing a React Application where I want to use #types/history module..
Installed
npm install --save #types/history
And in my component file trying to import like
import { createBrowserHistory, History } from 'history'
And
import { createBrowserHistory, History } from '#types/history'
But throwing exception like
Module not found: Can't resolve 'history' in
Thanks in advance.
When installing #types/history you are just providing typescript compiler with type information about history package. Not the package itself. See for example this thread for some details.
Therefore - you must install history package in order to use it:
$ npm install --save history
See more info about its usage at their github rep.
try to install history and react router dom package using npm
npm install --save history
npm install react-router-dom --save
I work on Webstorm and I try to compile via TypeScript *.tsx.
I put react folder at the root of my project.
I imported react with the relevant typescript command.
While I tsc I get the following error:
react-definition/react.d.ts(2267,9): error TS2300: Duplicated identifier 'tspan'.
and it's pointing files in the react-definition folder.
UPDATE:
here is the code:
import * as react from "react-definition"
<div>
<Check/>
</div>
Can anyone help?
If you are using npm in your project, you can run the following commands (in console or terminal) to automatically add typescript definition files for react:
npm install --save-dev #types/react
npm install --save-dev #types/react-dom
Then, when importing in your code:
import * as React from 'react';
If you are not using npm already, you should initialize your project using npm. Run the following commands in your terminal or console, while in your project folder:
npm init
npm install --save react react-dom
npm install --save-dev typescript