I have the following directory structure
src
+actions
+components
+reducers
+utils
-views
-app
app-container.jsx
app.jsx
index.jsx
-more-info
index.js
more-info-container.jsx
more-info.jsx
-overview
index.jsx
overview-container.jsx
overview.jsx
Under src/views/more-info, if I try to update index.js to have the file extension index.jsx my build fails with Module build failed: Error: ENOENT: no such file or directory, open '/Users/smcclaine/Documents/Projects/ReactReduxBoilerPlate/src/views/more-info/index.js'.
If I remove the hyphen from the directory structure and the import, it will then allow me to use the .jsx extension.
Anyone have any idea how to configure my application so it will use the .jsx if the directory has a hyphen in it?
Git Repo: https://github.com/sethimcclaine/SALT
Related
I'm trying to extend the create-react-app with new folders and files outside of the /src directory. But this is by default not allowed by create-react-app. I tried to import a .json with this command:
const contractABI = require('../../artifacts/contracts/MyNFT.sol/MyNFT.json')
The error message:
Module not found: You attempted to import ../../artifacts/contracts/MyNFT.sol/MyNFT.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
I tried to create a symbolic link like so: mklink /d \MyContracts \artifacts\contracts\MyNFT.sol
This was successful \MyContracts <<===>> \artifacts\contracts\MyNFT.sol
Now, how can I import it into my react javascript file? I tried const contractABI = require('MyContracts/MyNFT.json') without success.
Any help would be great or any other approach how to solve this issue. Thanks a lot
I found a workaround by adding paths: {artifacts: "./src/artifacts"} to the hardhat.config.js I could configure that hardhat should create the directories and files inside the /src.
I am using eslint in a react project, I have .jsx, .js, .test.jsx, .test.js files, I want to configure my eslintrc.json file to such that, ,it check .js and .jsx files as well as ignore .test.jsx and .test.jsx file, how may I do that ?
Thanks for the help.
You can set a .eslintignore file, to ignore certain folders and files.
Refer document: ignoring-files-and-directories
You can tell ESLint to ignore specific files and directories by creating an .eslintignore file in your project's root directory.
The .eslintignore file is a plain text file where each line is a glob pattern indicating which paths should be omitted from linting.
For example:
src/serviceWorker.ts
src/react-app-env.d.ts
I've created a React app using create-react-app in VisualStudio. I'm trying to avoid having to use a bunch of ../../ in order to import my different components. Supposedly I should be able to use either the jsconfig.json file or .env files to setup baseUrl or NODE_URL. However, I'm clearly doing something wrong because I can't access my files. My file structure looks something like this:
+ClientApp
package.json
+public
+src
+buttons
Button.js
+components
+sidebar
Sidebar.js
SidebarButton.js
gulpfile.js
package.json
Program.cs
Startup.cs
What I want to do is to import the button component inside Button.js in my SidebarButton.js file using something like src/buttons/Button.js or a similar path. However, I can't get the environment to start its lookup for files from the src directory. An absolute path will start the lookup from my C:\ directory and any relative lookup will start from the current directory of the js file doing the import
Absolute Imports
You can configure your application to support importing modules using absolute paths. This can be done by configuring a jsconfig.json or tsconfig.json file in the root of your project. If you're using TypeScript in your project, you will already have a tsconfig.json file.
Below is an example jsconfig.json file for a JavaScript project. You can create the file if it doesn't already exist:
{ "compilerOptions": {
"baseUrl": "src" }, "include": ["src"] }
If you're using TypeScript, you can configure the baseUrl setting inside the compilerOptions of your project's tsconfig.json file.
Now that you've configured your project to support absolute imports, if you want to import your module located at src/buttons/Button.js, you can import the module like so:
import Button from 'buttons/Button';
For more information on these configuration files, see the jsconfig.json reference and tsconfig.json reference documentation.
An imported module contains a .png file that I would like to overwrite with another one. On the web application I can see that the reference to this file isn't change even though it is not just a module of another project.
My question is: How to file paths work in a node module that is being imported? The built project should have another structure, right?
The import statement always takes the relative path from the file or searches the module in node_modules.
If you are writing something like
import Abc from './abc.js'
it will search for abc.js in the same directory. If you want to go to the parent directory, you can use ../ instead of ./. Whatever the location of the file you give, will be calculated from the current file. This current file can be imported again and the next file cares about only this file and not what it imports
If you are not using ./ or ../ then nodejs will look for the module in node_modules folder.
import React from 'react'
I am new to react and I followed this to setup the react environment on my machine.
npm install -g create-react-app
create-react-app myapp
cd myapp
npm start
So this works completely fine and the app starts perfectly. I created a few test components inside the src file that is created and it works fine too.
But the moment I create a directory outside the src file and add my .js files there in which I have my components which were working fine inside src, I get this error.
Failed to compile.
Error in ./components/test.js
Module parse failed: /Users/foo/test/myapp/components/login.js Unexpected token (22:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (22:6)
# ./src/index.js 15:13-43
The components are inside test.js which is inside component directory. Here is the directory structure.
README.md
components/
test.js
node_modules
package.json
public/
index.html
src/
App.css
App.js
App.test.js
index.css
index.js
login.js
logo.svg
The root element is inside index.html and index.js renders the DOM with components of test.js
Your scripts should always follow the convention of Webpack where all your script files are placed within the 'src' directory. You wouldn't want to stray away from this folder structure as your project directory should look like:
[SRC]
[Folder] Components
header
header.js
header.css
login.js
[Folder] Containers
[Folder] Reducers
[Folder] Actions
routes.js * alternatively this can be a folder *
store.js
app.js
Ofcourse this is only an example.