React Native- How to access .csv files in my project hierarchy - reactjs

I am trying to load a CSV file in my js class and I am unable to do so in react native. This file is available locally. Not downloaded. Whenever I give a path to the CSV file, I get an error that says The module could not be found. No such module exists. I have tried placing the CSV in various folders and also at my project root level. It does not work. I noticed images do not face the same problem.
I have even tried doing this.
https://willowtreeapps.com/ideas/react-native-tips-and-tricks-2-0-managing-static-assets-with-absolute-paths/
Again it works for images but strangely not for CSVs.
I have tried the import statement, require statement and even relative path for the files. Same error every time.
I am new to react maybe I am missing some step?
EDIT: Two of the ways I tried
import RNFS from 'react-native-fs';
import Papa from 'papaparse';
import CSVData from './CSVData.csv';
function loadAllCSV()
{
console.log('Loading CSV');
var path = './CSVData.csv';
console.log(path);
const fileContents = RNFS.read(path);
console.log('File Data ' + fileContents);
Papa.parse(CSVData, {
download: true,
delimiter: '\t',
complete: function(results) {
console.log('ZOMBIIIIEEEE');
console.log(results);
}
});
}
Error:
Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Unable to resolve module ./CSVData.csv from /Users/abc/xyz/SearchPage.js: The module ./CSVData.csv could not be found from /Users/abc/xyz/SearchPage.js. Indeed, none of these files exist:
/Users/abc/xyz/CSVData.csv(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
/Users/abc/xyz/CSVData.csv/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json) (null))

Adding the .CSV files to the project assets bundle in iOS fixed this problem for me.
Use Xcode to place the files in the project in the Project Settings under the Build Phases Tab check if the Assets are included in the Copy Bundle Resources Section. Add the files to the list here incase they are missing.

Related

Error in Jimp.loadFont (use load-bmfont module) with React

I am testing Jimp.js for image manipulation (using React with react-scripts, npm: 6.14.4, node: v12.16.3)
Everything is going well except writing text on a loaded image
import Jimp from 'jimp'
Jimp.read(image)
.then(image => {
console.log('image loaded', image)
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE).then(font => {
console.log('font loaded', font)
image.print(font, 10, 10, 'Hello world that wraps!', 12)
// write image
})
})
This throws an error "error parsing font malformed file -- no element" in browser.js of load-bmfont module line 71 and dont execute the log 'font loaded'.
Googling not help i found only 2,3 items about this, associate with using custom fonts - but i use standard font from Jimp. (Using BMFont files instead of Jimp standard fonts doesnt help)
My first thought was the error ocured in a React App in the browser, so i write a Jest test to see if its work without browser context but it fail just like that.
Got any ideas?
Solved...
I'm using the React App within a Java Web Framework in a JSP File.
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE)
search the font in a path that doesn`t exist for the webapp.
Moving the font files to a reachable path with context root
Jimp.loadFont(`${CONTEXT_ROOT}/foo/bar/font.font`) works.

TypeScript with Relay: Can't resolve generated module

In my MessageItem.tsx component I have the following code:
const data = useFragment(
graphql`
fragment MessageItem_message on Message {
date
body
}
`,
message as any
);
After running relay-compiler --src ./src --schema ../../schema.graphql --language typescript --artifactDirectory ./src/__generated__, a module named MessageItem_message.graphql.ts gets generated.
But when I run the app it gives me an error:
Failed to compile.
./src/components/MessageItem.tsx
Module not found: Can't resolve
'./__generated__/MessageItem_message.graphql'
The reason is only components at the src root can refer to the right path (./__generated__), whereas components in a folder actually need to refer to the path (../__generated__) but it's not doing so.
How can I configure the path?
Edit .babelrc to point to the artifactDirectory
// .babelrc
{
"plugins": [
[
"relay",
{
"artifactDirectory": "./src/ui/graphql/types"
}
]
]
}
Remove "--artifactDirectory ./src/__generated__" from the relay-compiler options.
By default it seems the Relay compiler puts a "__generated__" directory in the directory with any source code containing GraphQL.
As a result any "./__generated__" references anywhere and at any level in the source code hierarchy now work as they should.
Thanks to #ThibaultBoursier for the pointer.
PS I wonder if the --artifcactDirectory option is just meant to be used to change the name of the artifact directory, rather than its location?
Just moments ago I ran into the same issue. The reason is that the relay-compiler is using the artifactDirectory setting to decide where to put the generated files, but the babel-plugin-relay exposing the graphql tag needs to get the very same argument otherwise it just attempts to include a colocated relative file.
I fixed it in my case by configuring the plugin with a babel-plugin-macros.config.js file as follows (where the artifactDirectory is the same as the one supplied to the relay-compiler):
module.exports = {
relay: {
artifactDirectory: "./src/ui/graphql/types",
},
};
This solution assumes you are using the macro via babel-plugin-macros, otherwise you might need to supply that argument via the .babelrc file but I have no experience with that unfortunately.

unable to access file in resources/static folder spring-boot

I have a file in a location:
/resources/static/fcm-admin
It's absolute path: /home/jitu/project-name/src/main/resources/static/fcm-admin
I have tried to access this file in the following ways
val file = ResourceUtils.getFile("classpath:fcm-admin")
It gives me an error
java.io.FileNotFoundException: class path resource [fcm-admin] cannot be resolved to an absolute file path because it does not exist
I have tried to access the file in various ways but it is not working. I just want to the access file fcm-admin without giving the full absolute path. Anything will be helpful
EDIT:
So I'm able to access the file on local with the below code -
val file = ResourceUtils.getFile("classpath:static/fcm-admin")
But I'm not able to access it on the production server. And I'm getting below exception
class path resource [static/fcm-admin] cannot be resolved to an absolute file path because it does not reside in the file system: jar:file:/var/app/current/application.jar!/BOOT-INF/classes!/static/apple-app-site-association
You forgot to add static in the path
val file = ResourceUtils.getFile("classpath:static/fcm-admin")
EDIT because of comment
Load your file from Classpath:
val file = this.javaClass.classLoader.getResource("/static/fcm-admin").file;
When you load a resource using the class loader it will be start in the root of your classpath.
Local server can work with ClassPathResource but will fail on production
To solve error on production, change your code to
import org.springframework.core.io.ResourceLoader;
import java.io.InputStream;
import org.springframework.core.io.InputStreamSource;
import org.springframework.core.io.ByteArrayResource;
import org.apache.commons.io.IOUtils;
#Autowired
private ResourceLoader resourceLoader;
InputStream logoFileStrem = resourceLoader.getResource("classpath:static/images/image.png").getInputStream();
InputStreamSource byteArrayResource = new ByteArrayResource(org.apache.commons.io.IOUtils.toByteArray(logoFileStrem));
I spent so many time, lot of code work on dev but not on prod.
I used SpringBoot with war in production.
To load a file in resources/static the only solution who work in dev and in prod :
val inputStream = Thread.currentThread().contextClassLoader.getResourceAsStream("static/pathToTourFile/nameofFile.extension")
val texte :String = inputStream.bufferedReader().use(BufferedReader::readText)

Cannot import local fonts with TypeScript

I am trying to import font files on React with TypeScript project, but it doesn't recognize it as a font file, but instead, it looks at it as a module
Folder structure:
In my index.tsx file, I imported the font I need, and exported Font constant:
import helveticaNeueLightWoff from './HelveticaNeueW02-45Ligh.woff';
import helveticaNeueLightWoff2 from './HelveticaNeueW02-45Ligh.woff2';
import helveticaNeueMediumWoff from './HelveticaNeueW02-67MdCn.woff';
import helveticaNeueMediumWoff2 from './HelveticaNeueW02-67MdCn.woff2';
import helveticaNeueBoldWoff from './HelveticaNeueW02-75Bold.woff';
import helveticaNeueBoldWoff2 from './HelveticaNeueW02-75Bold.woff2';
import helveticaNeueBoldCnWoff from './HelveticaNeueW02-77BdCn.woff';
import helveticaNeueBoldCnWoff2 from './HelveticaNeueW02-77BdCn.woff2';
const Fonts = {
helveticaNeueLightWoff,
helveticaNeueLightWoff2,
helveticaNeueMediumWoff,
helveticaNeueMediumWoff2,
helveticaNeueBoldWoff,
helveticaNeueBoldWoff2,
helveticaNeueBoldCnWoff,
helveticaNeueBoldCnWoff2,
};
export default Fonts;
I use url-loader(I also tried with file-loader). This is my webpack.config.ts
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
// Limit at 50k. Above that it emits separate files
limit: 50000,
// url-loader sets mimetype if it's passed.
// Without this it derives it from the file extension
mimetype: 'application/font-woff',
// Output below fonts directory
name: './fonts/[name].[ext]',
},
},
},
This is the error I get: Cannot find module './HelveticaNeueW02-45Ligh.woff'
What could be the cause of this problem?
You need to declare the font file formats as modules so that TypeScript can parse them correctly.
create a fonts.d.ts file and add the following to it
declare module '*.woff';
declare module '*.woff2';
It tells TypeScript that the font filetypes are valid import modules.
The "d.ts" file format is used to provide typescript type information about an API that's written in JavaScript, or the shape of the third party imports.
Make sure that the types file is considered in the include section in tsconfig.json. A nice approach is to have a root typings directory in your project, then append typings/**/*.d.ts on include.
Completion of the previous answer for expo user who would face a similar issue :
I faced the same issue, and declaring the module was enough to import fonts but not to actually load these.
I was using expo-font, and Typescript was complaining about the type of the result. To make it work, I created the same file with the following content :
declare module "*.ttf" {
const value: import("expo-font").FontSource;
export default value;
}
This tells that the module imported will have the type FontSource that comes from expo-font library. I was then able to load my font :)

Importing self-created libraries in reactjs

I'm using React and ES6 using babel and webpack. I am very new to this ecosystem.
I am trying to import some common utility functions into my jsx file but react is unable to find the file
homepage.jsx
var pathToRoot = './../..';
import path from 'path';
import React from 'react';
import ReactDOM from 'react-dom';
var nextWrappedIndex = require(path.join(pathToRoot,'/lib/utils.js')).nextWrappedIndex;
//some react/JSX code
utils.js
var nextWrappedIndex = function(dataArray) {
//some plain js code
return newIndex;
}
exports.nextWrappedIndex = nextWrappedIndex;
Directory structure is as follows:
src
|--app.js
|--components
| |--homepage
| |--homepage.jsx
|
|--lib
| |--utils.js
I am on a windows 10 machine and was facing issues during compilation providing the path by any other means. Using path.join solved compilation issue but the browser while rendering throws this error
Uncaught Error: Cannot find module '../../lib/utils.js'.
How do I accomplish this?
Also, is this the best way to do it(if altogether it is way it is supposed to be done in such ecosystem)?
One of the best and easiest way I have found in such a setup is to use Webpack aliases.
Webpack aliases will simply associate an absolute path to a name that you can use to import the aliased module from anywhere. No need to count "../" anymore.
How to create an alias?
Let's imagine that your Webpack config is in the parent folder of your src folder.
You would add the following resolve section in your config.
const SRC_FOLDER = path.join(__dirname, 'src')
resolve: {
alias: {
'my-utils': path.join(SRC_FOLDER, 'lib', 'utils')
}
}
Now, anywhere in your app, in any of your modules or React component you can do the following:
import utils from 'my-utils'
class MyComponent extends React.component {
render () {
utils.doSomething()
}
}
Small note about this method. If you run unit tests with a tool like enzyme and you don't run the component tested through Webpack, you will need to use the babel-plugin-webpack-alias.
More info on Webpack website: Webpack aliases
I solved this by replacing
var nextWrappedIndex = require(path.join(pathToRoot,'/lib/utils.js')).nextWrappedIndex;
with
import nextWrappedIndex from './../../lib/utils.js';
I tried to reproduce your code and Webpack printed me the following error:
WARNING in ./app/components/homepage/homepage.jsx
Critical dependencies:
50:0-45 the request of a dependency is an expression
# ./app/components/homepage/homepage.jsx 50:0-45
It means that Webpack couldn't recognize your require() expression because it works only with static paths. So, it discourages the way you are doing.
If you would like to avoid long relative paths in your import, I'd recommend you to set up Webpack.
First, you can set up aliases per Amida's answer.
Also, you can set up an extra module root via resolve.modules to make webpack look into your src folder, when you are importing something absolute, like lib/utils.js

Resources