I am trying to write some tests for a library I'm making. This is not a creat-react-app project, but something built from scratch with babel. I'm using jest, and I'm having this problem. I saw similar quesitons, but nothing quite like this. I have "test": "jest" in my package.json scripts. I have a __tests__ directory in my root folder. One of my test files, called Component.js, starts with some simple imports:
import React from 'react';
import { MyComponent } from '../src/MyComponent.js';
When I run npm run test, I get this error:
Cannot find module 'react' from '__tests__/MyComponent.js'
> 1 | import React from 'react';
Even if I comment out the react import, I get this error:
Cannot find module 'react' from 'src/MyComponent.js'
Require stack:
src/MyComponent.js
__tests__/MyComponent.js
> 1 | import React from 'react';
This is happening not just with react, but with any node modules imported in the test, or imported in any module that the test imports. I don't understand. Does jest not know to look for these modules in the node_modules folder? I do not have any jest.config.js or any jest property in my package.json - I didn't think I needed one to specify that jest should be looking for these modules in the node_moduldes folder. Do I need to set up some config for jest to look in the node_modules for these type of imports? I feel like there's a simple fix here that's alluding me. Thanks for reading.
Edit: Mocha giving me a similar issue
I thought I woul try and bypass this whole issue by using mocha instead. With a test script of "mocha": "mocha --require #babel/register '**/__tests__/*' -R spec", I get a similar error:
Error: Cannot find module 'react'
Require stack:
- /Users/seth/Documents/GitHub/react-esri-leaflet/__tests__/MyComponent.js
- /Users/seth/Documents/GitHub/react-esri-leaflet/node_modules/mocha/lib/esm-utils.js
- /Users/seth/Documents/GitHub/react-esri-leaflet/node_modules/mocha/lib/mocha.js
- /Users/seth/Documents/GitHub/react-esri-leaflet/node_modules/mocha/lib/cli/one-and-dones.js
- /Users/seth/Documents/GitHub/react-esri-leaflet/node_modules/mocha/lib/cli/options.js
- /Users/seth/Documents/GitHub/react-esri-leaflet/node_modules/mocha/bin/mocha
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:713:15)
What the heck is going on here? Shouldn't these testing libraries know to look in my rootFolder/node_modules for these things? Might something in my package.json or (now obsolete) webpack.config.js file be interfering? Rather than copy those files into this post, you can see them, with the whole project directory, at the repo here: https://github.com/slutske22/react-esri-leaflet
The more I thought about this the more I realized that this is a peerDependencies issue. The dependencies that jest couldn't find were all peerDependencies. If I were to run my package through travisci, it would run npm install and npm test, and it would never install these dependencies or be able to use them in the tests.
Thanks to this question, I copied all my peerDependencies into the devDependencies, reran npm install, and then the tests started working.
Rather than delete the question, I'll leave this here if anyone ever has this specific case happen to them.
Related
Inside a file of an npm workspace-a, when I import a React Component located in a npm workspace-b I am getting the error: plugin babel) SyntaxError: xxx.ts: Missing semicolon. (x:x)
import MyComponentLocatedInWorspaceB from ‘../../anotherPackageWorkspace/direct/import’;
On dev time (eg: Running storybook) the relative/absolute import work fine, but when I create the npm run build then I get the error.
If I "disable" the "npm workspaces" the build works fine.
The problem is you can't use relative/absolute import from one workspace into another.
So this is wrong:
import MyComponentLocatedInWorspaceB from ‘../../anotherPackageWorkspace/direct/import’;
The correct way of importing is
import MyComponentLocatedInWorspaceB from ‘#myDomain/workspaceB’;
Also, be sure to add/install workspaceB as a dependency of workspaceA in your package.json
{
"dependencies": {
...
"#myDomain/workspaceB": "^0.0.1"
}
}
The dependency version number needs to coincide with the one in workspaceB owns package.json
PS: The Babel syntax error is completely misleading and doesn't help at all.
I made a new react project using npx create-react-app app-name --template typescript and it ran fine until I imported another .tsx file. Now when I try to import another .tsx file it gives me an error: Module not found: Error: Can't resolve './components/component' in '/Users/benbaldwin/Desktop/project/frontend/teacher/src'
The only thing I'm doing differently than normal is the file structure. Since I have multiple react projects in the frontend folder that share dependancies I moved the node_modules to cover all of those subdirectories. my file structure looks like this:
- frontend
- node_modules
- project-1
- public
- src
index.tsx
react-app-env.d.ts
- components
component.tsx
- project-2
package.json
tsconfig.json
the component file looks like this:
import React from 'react';
const Component: React.FC = () => {
return <div>hello</div>;
};
export default Component;
and the index file looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import Component from './components/component';
import './index.css';
ReactDOM.render(
<React.StrictMode>
<Component />
</React.StrictMode>,
document.querySelector('#root')
);
do I need to eject create-react-app and write out my own web pack config or is there a better way to fix this?
the full source code is on my GitHub: https://github.com/baldwin-dev-co/mountaineer
I just came across this problem as well, with a brand new React project.
Temporarily downgrading react-scripts from version 5.0.0 to 4.0.3 solved it for me, because after invoking npm install and npm run start this added the missing tsconfig.json file - which was the actual cause of the problem.
After this I could safely go back to 5.0.0 and everything worked fine.
I've run into this issue as well upgrading a project to typescript, using react-scripts 5.0.1.
In an attempt to diagnose what was going on, since there are only a few hits on this searching the problem, I setup 2 new projects.
First, is the npx create-react-app myapp non-typescript-template project;
Let it run and install as is
Builds as expected
Run npm install --save typescript #types/node #types/react #types/react-dom #types/jest
Change a file to tsx, didn't matter which one, any change had the same result
No tsconfig.json generated (as spoken about in the documentation), build fails with errors Module not found: Error: Can't resolve './App' in 'E:\create-react-tsx\myappts\src'
Second, run npx create-react-app myappts --template typescript typescript-template project;
Let it run and install as is
Builds as expected
Observations;
Copying the generated tsconfig.json from the typescript-template project (myappts) to the non-typescript-template project (myapp) didn't resolve the issue. The errors relate to the svg import etc. Cannot find module './logo.svg' or its corresponding type declarations.
Additionally copying the typescript-template project (myappts) react-app-env.d.ts over to the non-typescript-template project (myapp) got the project to build.
As an alternative, downgrading to react-scripts#4 in the non-typescript-template project (myapp), then changing a file to tsx and run a build generates the two required files. A subsequent upgrade to react-scripts continues to generate successful builds.
There is a bug filed for this issue;
https://github.com/facebook/create-react-app/issues/10951
Further links;
What is the react-app-env.d.ts in a react typescript project for
https://create-react-app.dev/docs/adding-typescript/
I have a monorepo which exposes a TypeScript module, which is consumed & used by a React TypeScript project.
When the module inserts arbitrary React elements to the virtual DOM - everything works as expected, including when I try to use React Router (which was initially problematic but I was able to fix that).
However, when I try to use react-intl, via FormattedMessage, I get the error:
Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
Which is especially annoying as I see this printed in the console logs:
The above error occurred in the <Context.Consumer> component:
in FormattedMessage
in h2
in div
in Loading (at App.tsx:11)
in IntlProvider (at App.tsx:8)
in App (at src/index.tsx:9)
in StrictMode (at src/index.tsx:8)
(note the IntlProvider wrapping Loading - which is the element that uses FormattedMessage which can't find IntlProvider).
I imagine this is somehow related to versioning, or having 2 instances of React / React DOM / IntlProvider, but I have no idea to how solve this, and I have spent quite a lot of time trying everything I could think of.
For what it's worth, here's what I use:
TypeScript - for both module and project
Webpack to pack the module, where I declared React, ReactDOM and react-intl as externals and added them as peerDependencies rather than direct dependencies
create-react-app for the project
I was able to create a minimal repro repository, here's how to repro my issue:
<cd somewhere>
git clone https://github.com/chakaz/repro-repo .
cd repro-lib
npm install
npm run build:dev
cd ../project
npm install
npm run start
Anyone has any idea? Tons of thanks in advance!
With your above way in order to make it work, you have to delete node_modules in your repro-lib dir cause it will install dependencies in both dirs.
So in order to resolve problem of monorepo, I'd like to suggest you use yarn's workspace functionality as described carefully here: https://classic.yarnpkg.com/en/docs/workspaces/
To summary, it's a great functionality to help working with multiple workspaces by just only yarn install once.
Here are a few steps to make your repo working:
Put package.json at the root level of the project with following content:
{
"private": true,
"workspaces": ["project", "repro-lib"]
}
Go to project dir and replace following line in package.json:
"pf-common": "file:../repro-lib"
to
"pf-common": "1.0.0"
Finally, just go back to root top level install deps again:
yarn install
That's it! Now you can re-run your application to see how it works.
NOTE: In terms of having interest in monorepo, lerna is also great tool comes to help by providing great CLI.
I've created a repository which contains a React app (created with create-react-app) and a components directory which contains a simple Material UI button. The folder structure is:
/components
/react-app
Both directories are set up to use Yarn 2, and are not in a workspace (as I'm trying to simulate projects in separate directories and simplify my real world scenario).
I build the components:
$ cd ~/components && yarn build
I then Yarn link the components to the React app:
$ cd ~/react-app & yarn link ../components -r -p
This results in a modification to package.json file in the react-app directory:
{
"name": "react-app",
...
"resolutions": {
"components": "portal:../components"
}
}
My App.tsx file looks like this:
import './App.css';
import { Button } from 'components';
import React from 'react';
function App() {
return (
<Button>Test</Button>
);
}
export default App;
However, when I run the React app using yarn start I get the following error:
./src/App.tsx
Module not found: Your application tried to access components, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.
I'm not sure what I'm doing wrong. If I add an explicit reference to the components directory within dependencies (which I don't believe I should have to do because I've already linked it) such as:
"dependencies": {
"components": "portal:../components"
}
Then I get the error:
./src/App.tsx
Module not found: You attempted to import ~/react-app/.yarn/$$virtual/components-virtual-de9a8055ab/2/components which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Surely, I don't have to eject the app and find a way to bypass this error?
EDIT: According to the Yarn documentation "Webpack 5 will support PnP natively, but if you use Webpack 4 you'll need to add the pnp-webpack-plugin plugin yourself". At the time of writing, the latest version of create-react-app relies on v3.4.1 of react-scripts which in turn relies on Webpack 4. I therefore ejected my app to inspect the Webpack configuration, and it appears that this plugin is already installed. It's therefore not a CRA/Webpack issue. I also upgraded my version of Node from v10.16.0 to v12.16.3 to no avail.
TLDR; Add the package as a dependency then modify your React setup to import files outside of the /src directory.
In my case, it doesn't look like yarn link is doing anything other than adding a resolutions entry in package.json, which according to the documentation is only used to specify the version to resolve. Perhaps my understanding of Yarn link is wrong (even though it held up in v1).
To fix the issue I had to add the reference to dependencies in package.json (even though I'd already run yarn link):
"dependencies": {
"components": "portal:../components"
}
This caused the aforementioned You attempted to import components which falls outside of the project src/ directory error. To resolve this we either need to eject the React app and disable the ModuleScopePlugin in Webpack (therefore allowing the import of files outside the /src folder), or use craco with custom configuration. I've created yarn-eject and craco branches to demonstrate both.
It's not a particularly elegant solution, and I'm hoping someone can post a better alternative. I switched to Yarn 2 so that I could utilise the "Improved Peer Dependency Links" feature (so that I'm only relying on one version of react across my applications and shared components packages). I'd rather not have to eject my React app or use custom configuration if possible.
In all my components i have imported other components like
import PrevArrow from 'components/Slider/PrevArrow';
when I want to test a component I always get the error:
Error: Cannot find module 'components/Slider/PrevArrow'
because it assumes the wrong path.
Right import method would be
import PrevArrow from '../../components/Slider/PrevArrow';
with this the test passes, but I dont want to refactor all components just because of this.
Is there a way that i can leave my import statements as they are and still get my test passed?
Thanks in advance!
Turns out it is because we are using webpack in our codebase.
So mocha will not work as it should.
I needed to install
npm install --save-dev mocha-webpack
and rewrite my test script in package.json from
"test": "mocha './build/**/*.test.js' --compilers js:babel-core/register --require ignore-styles"
to
"test": "mocha-webpack --webpack-config webpack.config.js './build/**/*.test.js'"
and now it works