I have created react application using npx create-react-app. I have json files in public/strings folder.I need to access this json file from the reducer in src.I have code as below in src/reducers/lang_reducer.js
let resources =require("/strings/strings_" + language + ".json");
let englishStrings=require("/strings/strings_en.json");
It is throwing following error:
./src/reducers/languages_reducer.js
Module not found: Can't resolve '/strings' in 'E:Code\src\reducers'
Is there any other way by which i can access json file which is in public folder from src ?
Thanks in advance :)
create-react-app configures a lot of features automatically. This restricts you from accessing files which are not in src folder. One workaround for this is to eject and then overwrite the configuration. Other wise instead of using create-react-app you can do your webpack configuration on your own.
Related
I've just started using Nx and I'm moving my existing project over to a Monorepo environment.
The problem I have is with the NestJs app. For some reason the configuration file never gets read. I've tried moving it to different locations but I can't find where to put the config file. It doesn't ever seem to get read?
Are configs supported?
Do you have any ideas of where I should put the file?
Looks like you need to use the env files directly now.
import { environment } from './environments/environment';
...
environment.settingName
wondering if anyone can help me. Im following a tutorial which has told me to put the images in the public folder in an app created with create-react-app
'./img/newyork.jpeg'
this is the path the tutorial told me to use for images in the public folder however the images aren't loading and i cant understand why any help would be much appreciated
Build File Structure
You shouldn't keep any image assets in the public folder other than favicons etc See this thread also: The create-react-app imports restriction outside of src directory (TLDR: "This is special restriction added by developers of create-react-app. It is implemented in ModuleScopePlugin to ensure files reside in src/. That plugin ensures that relative imports from app's source directory don't reach outside of it.")
Generally in a create-react-app I would import images like so:
import lovelyImage from 'images/lovely-image.jpg'
and then rendered:
<img src={lovelyImage} alt={''} />
(the example above would assume the images directory is in the src directory (not public))
process.env.PUBLIC_URL + 'your image path'
is a solution I found that works
In my project I'm using the Microsoft React Redux Template (Microsoft React) with typescript. My problem is I need to keep set of frontend configurations like API base URL ect. I've used a Config.Json file. But when the project is build, every javascript file that referenced the Config.Json file get referenced and copied the content of the .Json file, at the minifying process. So I have to manually go through the each minified .js file and change the configurations when moving from Dev to QA or QA to Prod.
I tried to keep the configurations in a JS file, but still same problem occurs.
Is there a way to stop referencing the Config.Json file at JS minifying process. So that when I change the Config.Json file, the changes of the configurations will get applied.
Maybe you need to use environment variables.
npm i dotenv -D
import configTest from 'config.test.json';
import configProd from 'config.prod.json';
const config = process.env.BUILD_TARGET === 'prod' ? configProd : configTest;
I'm trying to separate my projects and keep logic as separate components that I will end up publishing. For now, before I do so, I'd like to keep it organized as such:
A library of TS scripts in a project called project-a
A separate React app that I created with create-react-app (using Typescript as the template) called project-b
The React app's .tsx components will pull from project-a's .ts files.
I've gone ahead in project-b and ran yarn add ../project-a. This installs the library as a dependency. I then import the .ts files and my code editor is able to see all the types and definitions really nicely. Great!
When I run the application, Webpack complains:
./node_modules/project-a/src/calc.ts 2:7
Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
> export enum Position {
| Inner = 0,
| Outer = 1
I don't understand why it's not parsing the file as a .ts. The whole React application is setup with TypeScript and I'm even import some .ts files locally. Do I need to tell Webpack to handle the files imported from this module as Typescript source (assuming Webpack wouldn't attempt parsing them if it didn't need to)?
The React template didn't setup a webpack (I'm assuming it's using a hidden default) but I am able to adjust the tsconfig.json file. I added my modules direct path into the include array. That didn't seem to do much either.
Basically: how can I get passed the above error and continue importing the TypeScript files from my dependency module in my main application?
You have to compile down project-a to javascript and emit the typings file, because imports from packages have to be Javascript.
The type infos you get from external packages is delivered via the .d.ts file alongside the package.
When you import other packages, you always import the Javascript file.
Even locally, Webpack doesn't compile the typescript for you, a loader during bundling does. So once running inside the browser, it's all Javascript.
But you are trying to import a Typescript file during runtime.
Im trying to use the azure environment variables with my react build. So far I have an appsettings.json file that I load into react with:
import settings from './appsettings.json';
I then have webpack copy the json into build folder which goes to azure. However I think after build the app isnt actually loading the file as I can see some of my variables embedded in the "chunk.js" so its not actually reaching out the the json file in root anymore? Am I importing the file in the wrong way?
C
Two possible solutions:
var json = require('./data.json'); //with path
change your settings.json to settings.js and use module.exports = {} in it.
I believe azure would accept different forms of setting files, not limited to json.