I have a CRA project, the whole app and its package.json file are located inside the /app folder, so does the node_module folder.
I use vs code and I installed the jest extension, when I try to run a single test by click right button and then run test, I get the following jest error:
Error: Cannot find module '/Users/my_user_name/myApp/node_modules/.bin/jest'
As you can see it looks for jest in the wrong folder, it should be instead:
Error: Cannot find module '/Users/my_user_name/myApp/app/node_modules/.bin/jest'
Any suggestion where I can change this setting?
I know there's a VS Code setting called jest.pathToJest but it doesn't work for my case.
Related
I'm facing an issue in my React project, It works on Windows, but it does'nt work on my Ubuntu laptop. The error occurs when I'm performing the npm start. I have the error below for every redux actions and in src/common/routeConfig.js
Module not found: Error: You attempted to import /path/to/my/project/node_modules/babel-preset-react-app/node_modules/#babel/runtime/helpers/esm/objectSpread2
which falls outside of the project src/ directory.
Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
I've already tried the solution that told to use babel-preset-react-app-webpack-5 instead of babel-preset-react-app but nothing change (https://stackoverflow.com/a/67383306/12837824)
I'm using webpack 5 on a Rekit React app
I had the same issue inside my docker node:16.13, to fix it I had to do this command: yarn add #babel/runtime#7.5.1 to work with specific version 7.5.1 from #babel/runtime.
I'm trying to integrate eslint with react
I'm getting this error when I run lint command
enter image description here
because you installed eslint locally (inside your current project), you have to call it from .node_modules folder of your project like this
./node_modules/.bin/eslint src/**/*.js src/**/*.jsx
I am using react build and trying to import some files from a folder outside of the create-react-app directory. It doesn't allow me to do that so I try to make a symlink of the folder inside of the directory. Then I got errors from react-dev-utils/ModuleScopePlugin.js, it seems that react is not very happy about symlinks? Everything works fine when I replace the symlink folder with the actual folder.
Creating an optimized production build...
..../src/frontend/project-editor/node_modules/react-dev-utils/ModuleScopePlugin.js:31
request.descriptionFileRoot.indexOf('/node_modules/') !== -1 ||
^
TypeError: Cannot read property 'indexOf' of undefined
Looks like you used react-app-rewired package to import the files outside of the src directory.
This issue implies that you included wrong path imports anywhere.
To trace the issue, please run yarn build.
It will show you a tip where you included the wrong imports.
My React project (made with create-react-app) was ejected before I started the project. I included an SCSS loader in the webpack file.
Now, when I try to run 'npm run build', the following error gets shown:
Invalid CSS after "i": expected 1 selector or at-rule, was "import React from '"
I don't know where exactly I had gone wrong, but it might have been something with css-loader.
I created a fresh project (didn't eject the project this time), installed node-sass-chokidar [guide for using sass/scss in your React project], copied my src folder into the new project, installed all the other dependencies, and finally changed the import statements from '.scss' to '.css'.
This worked.
I am using the jsx-control-statements node module for React with webpack.
Normally this works great, but when I copied my project to another folder and ran npm install using the same package.json as before, jsx-control-statements doesnt seem to be getting recognized by webpack.
jsx-control-statements is meant to desugar the tags in the render() and turn it into code react recognizes. Its not doing that in this case.
I see the final code running in the inspector that 'Choose' was never transpiled into valid code.
_react2.default.createElement(Choose, null,
The error I am getting is:
Uncaught ReferenceError: Choose is not defined
webpack.config.js and package.json and my source code for the app are unchanged. from a working app and this new one in another folder.
I have tried:
installing jsx-control-statements manually locally and globally.
copying and pasting the entire node_modules folder from the good project into this new project.
Run eslint with eslint-jsx-control-statements plugin, no errors
Still the problem persists. I believe their is a problem in the building of project, but I am out of ideas what to try next.
The issue was simple as I felt it would be. I was missing a tiny .babelrc file which included a plugin reference to jsx-control-statements
{
// my babel config here
"plugins": ["jsx-control-statements"]
}
Just need to put this file at my root next to webapck.config.js