I have created a Asp.net core React project using the build in template in visual studio 2019
The project created a separated folder called ClientApp where the React project live. I have done npm init.
I have added a jsconfig.json file at the root of the folder ClientApp as follow.
Folders
jsconfig.json
When I try to import a component using the absolute paths defined in jsconfig, the compiler does not find the path.
and generate the error
I tried to remove the "./" starting the path from "./src/components/" to "src/components/" like below
But the error is still there
UPDATE
based on this thread https://dev.to/larswaechter/path-aliases-with-typescript-in-nodejs-4353 , when configuring alias in jsconfig.json file, then you can use the new path aliases for module imports in your application. There occur any errors in your IDE or when you compile the code.
However, When you try compile the TS code into JS you won't see any errors. But as soon as you run your compiled JS code you will get an error:
For example:
Error: Cannot find module '#modules/user'
That's because JS can't resolve the modules for the declared path aliases... Based on the article it can be solved by installing a npm package called module-alias.
Which you have been set baseUrl with . you don't need add ./ in paths property
"baseUrl": ".",
"paths": {
"#Components/*": [ "src/components/*" ]
}
Related
Is there any way to specify that create react app to not create src folder, rather I want the files to stay at root directory so I can work on my project.
I'm afraid, there is no way.
From the documentation about the folder structure
For the project to build, these files must exist with exact filenames:
public/index.html is the page template;
src/index.js is the JavaScript entry point.
Even if you try to use a custom template, it requires src/index.js or src/index.tsx files to exist
There are two possible solutions you can try:
Use craco and adjust webpack configuration to allow the source code to be in the root folder
Eject create-react-app and re-configure webpack
Importing local package dependencies throws
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /< path to root >/common/< path to js file >: Support for the experimental syntax 'jsx' isn't currently enabled (3:5):
but with any common js files that have jsx, I get the following message:
Repo structure:
root
common
svgs
package.json
*.js
scss
package.json
*.scss
site_0
package.json
src
index.js
site_1
package.json
src
index.js
site_* package.json dependency statements:
dependencies: {
"common-svgs": "file:../common/svgs"
}
site_* index.js import statement of common-* package
import "common-svgs/alert.js"
Importing common files like the above work for my common .scss files, but with any common js files that have jsx, I get the following message:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /< path to root >/common/svgs/alert.js: Support for the experimental syntax 'jsx' isn't currently enabled (3:5):
This link talks about editing webpack configuration, but I am using the default react-scripts webpack dev server.
In site_*/node_modules/react-scripts/config/webpack.config.js, the loader that processes javascript outside of the app scope does not ( compile ? ) jsx unlike the loader that process application javascript.
Question:
How do I process ( compile ? ) jsx files outside of the application scope that are local dependency imports without changing the webpack.config.js file in react-scripts ???
Possible ways to do it:
Is there a way to have a hook run before react-scripts start?
Is there a way to run a post npm install hook and alter react-scripts webpack.config.js?
Would it be better to build my common packages?
If yes, wouldn't I have to rebuild the common packages for changes?
I added
[
require.resolve('babel-preset-react-app'),
{
runtime: hasJsxRuntime ? 'automatic' : 'classic',
}
],
to the presets of the loader that processes javascript outside of the app scope... It works, but someone else who clones my app would not be able to render the project with the dev server right out of the box... also, there might be another reason why what i have done is wrong...
I recently published a simple React module that I wrote in TypeScript. I tested my module by importing the local package into a project, and it worked flawlessly. However, now that I've published the module, whenever I try to import it into a project, I get the following error:
Failed to compile.
./src/...
Module not found: Can't resolve '<module>' in '.../src/...'
Package is listed in both package.json and package-lock.json, and the module shows up in node_modules. Additionally, VS Code doesn't throw any fits, so I'm not quite sure what could be the issue.
NPM, being the "Node Package Manager" interprets packages as node modules. in the documentation, it says it will try to load a folder by looking for a package.json file, and resolving the path in main relative to the folder it found.
So when publishing a package with a build step, always make sure to build it before its published (there is a prepublish hook for this, in the scripts object in package.json).
The other thing is to make sure that the package being published refers to the correct main, bin (if applicable), and module (if applicable) paths in the package.json file. if the source file is src/mylib.coffee and the built file is dist/mylib.js, the package.json must contain { "main": "dist/mylib.js" } in order that someone installing this module as a dependency into their node_modules folder would require the correct file.
in short make sure "main" in package.json points to the right file!
I am fiddling around with the following local drf-react setup. I'm really new to react and javascript overall and got absolutely no idea why I cannot import axios or any other node module for that matter in my react components, except for the modules that already shipped with the cookiecutter project itself. Is this related to the react-dev-utils..? I would like to use webpack, but I fail to set it up properly. My frontend docker container won't compose, telling me to install webpack-cli. Help is much appreciated.
https://github.com/moritz91/drf-react-app
You should run the command npm install inside your frontend folder:
Open the terminal
Find the frontend folder
Inside of it run the command npm install
This command will install the dependencies related to your package.json file, which is inside the frontend folder.
Inside your React files you will put the whole path to the node_modules folder.
The idea of using node_modules is to make it easier to control your dependencies in your project. You should consider again using webpack to handle these files from node_modules.
Wepack has a module called resolve which you have to fill with a list of directories and inside React components you don't need to use the whole path anymore, because Webpack will understand where to look:
// ALIAS
resolve: {
extensions: ['.js', '.jsx', '.scss'],
modules: [
'YOUR SOURCE FOLDER',
'YOUR NODE MODULES FOLDER',
'ANY OTHER FOLDER'
]
}
From the docs:
Tell webpack what directories should be searched when resolving modules.
The documentation: https://webpack.js.org/configuration/resolve/
Also, I have an example using Webpack + Bootstrap 4.
You can use to build your own Webpack config for React and Redux.
https://github.com/italoborges/webpack-bootstrap4-es6
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