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.
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 am learning react from a playlist and had created a basic app with create-react-app it was up and running without any issues initially. After I deleted some files in 'src' and 'public' ,the terminal is showing this error:
./src/index.js
Module not found: Can't resolve './App' in 'C:\Users\user\Desktop\react-challenge\sample\src'
I deleted everything except for 'index.html' in public and 'index.js' in src file. I have attached the folder structure and index.js below.
EDIT: it was an issue regarding the files getting saved and reloading it is solved now.
It's fine to delete App.js if you're not using it, and it looks like you're not.
You probably just need to restart your development server.
Stop it with Ctrl + C
Start it again with npm start or yarn start
power off your code editor and start again the code editor then run npm start in the terminal
I have a React app with a directory of TypeScript scripts which I use to run admin tasks, etc.
I execute them with npm scripts in the package.json file, e.g.
"ts001test": "./node_modules/.bin/ts-node --skip-project scripts/ts_codeExamples/ts001_test.ts"
which works fine. (--skip-project prevents ts-node rom loading the .tsconfig file)
However, when two of these scripts have the same variable, VSCode complains that I cannot redeclare the same variable that is in another file.
How can I tell VSCode to treat each of these TypeScript files with their own individual scope and not look in other files to see if variables have been used elsewhere?
I solved this problem by putting the following line at the beginning of each TypeScript script:
export {};
as mentioned in this article:
TypeScript decided to solve the problem by simply stating that a module is any file which contains an import or export.
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.
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