loading local xlsx file into react project as arraybuffer (webpack issue?) - reactjs

I am using exceljs library in my react project, and trying to load an xlsx file from the local project to be used as a template. exceljs is expecting an arraybuffer to be passed in like so:
await workbook.xlsx.load(spreadsheet)
I am trying to import the spreadsheet with a basic import: import spreadsheet from './resources/template.xlsx
But it is not in the format required by exceljs library. Some other suggestions I've found are to load it as a blob instead, to be passed to FileReader.readAsArrayBuffer, but I haven't gotten that working either. I think it's something with how webpack is treating this file in the import statement. I've tried modifying the webpack rules to load xlsx files using file-loader and raw-loader, but neither of those options have worked. Looking for some other ideas of things to try. Thanks for any suggestions!

Related

How to import a folder of svg files into react as ReactComponents

I am making a real-time card game using react for my front-end (which was made using CRA), and I am storing all of my cards as .svg files in a subfolder in the src folder. I have seen in other questions that for single files you could use import {ReactComponent as Image} from 'whatever.svg' and for an entire folder to use require.context(). While the import statement works, the require.context method just provides me with /static/media/whatever.randomStuff.svg files that I can only import by making an http(s) request to that location on the site. I have tried using #svgr/webpack in the require.context function, but even when installed manually, it gives me the same output. Is there a way for me to use the import statement or something else to import all of the .svg files in that folder as ReactComponents in the file instead of having to make an http(s) request?
The answer I was looking for was in this answer from another question. One thing I didn't know at the time of posting was that the version of webpack that react-scripts was using (v4.44.2) already had #svgr/webpack, so manually installing it with npm was essentially useless because it was probably already using it to generate the /static/media/fileName.randomStuff.svg files in the first place. In the end I used an intermediate file in the svg folder and did this:
interface CardCache {
[key: string]: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
}
const cache: CardCache = {};
/* eslint import/no-webpack-loader-syntax: off */
const files = require.context("!svg-react-loader?name=card!./", true, /\.svg$/);
files.keys().forEach(path => {cache[path] = files(path)});
export {cache};
I used the eslint comment because I did not want to replace react-scripts with something like react-app-rewired just so I could have access to the webpack.config.json file.

Typescript cannot load SVG as react components

I'm trying to import in Typescript some SVG icons, but I'm facing some problems.
At the first time I tried to import them, Typescript wasn't able to recognize the file extension.
I solved this issue by creating, as suggested in other Stack Overflow and Github topics, a custom.d.ts file with this rule inside:
declare module "*.svg" {
const content: React.StatelessComponent<React.SVGAttributes<SVGElement>>;
export default content;
}
But the problems seem to not finish here, even if the compilation seems going fine.
The current project I'm working on, is structured this way:
Typescript + React package (with SVG icons files) (SDK)
React Internal Sample page (package) to use the SDK
other internal packages...
For our development phase, we build through Webpack all the packages through different loaders and see the result through the Sample page.
But the final product flow to production is quite different: I export the SDK as CommonJS to an internal NPM Registry so another company can use it in a React project (the equivalent of the Sample page but for production) and push to production the final Webpack bundles with both projects inside.
So, to load in the Sample application the SVG icons, I'm using #svgr/webpack loader, which converts the files.
But when I have to export the SDK through npx tsc, I see that the exported folder, does not contain the folders with svg files.
I've tried to include them in tsconfig.json/files, but got this error:
TS6054: File '<path>/*.svg' has an unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
So, to attempt exporting them I converted my exporting script to use #svgr/cli to export the files to React files from SVGs before compiling to typescript:
// package.json
scripts: {
"build-ts": "rm -rf ./lib; yarn convert-svg-to-react; npx tsc",
"convert-svg-to-react": "npx #svgr/cli -d src src --typescript",
}
In this way, I get the new Typescript files mixed with the SVGs inside the package (so I'll have to remove them later) and I can see them in the exported folder lib.
But watching inside the Typescript exported code, I can see this line (for each svg import):
var close_svg_1 = __importDefault(require("./icons/close.svg"));
Leaving out the Typescript function for Babel __importDefault, you can see that it still requires the file svg, but what I have at this point, are the React components that replaces those files.
During development it works fine because #svgr/webpack loader, resolves the svg files.
But requiring svg files that do not exist, should make the application above it crash.
So, I'm stuck and I need some clues to get out of this situation.
Some clues that I got (but wasn't able to find how to do that), were:
[Best] Find how I can export raw svg files as they are during Typescript compilation without doing that manually, as they are not all in one folder but divided per components areas in the package tree. Doing this, I would tell the other company to add #svgr/webpack to its own building process.
Find how can I tell Typescript to import svg files without specify the extension (currently, removing .svg probably makes it fallback to .ts/tsx and therefore it cannot find the file with that name). In this way, the require would keep requiring the same file name but I could convert SVG to React Components without occurring in problems. But this would also require Typescript to export the file
Otherwise, I should convert all the SVGs in React components and directly use them instead of making them being compiled by #svgr/webpack, but I'm not sure this would have some other side-effects.
Any other clues or any way to achieve the ideas I got? Thank you everybody.

React Graphql Typescript file set up

I'm just starting to look at creating a React Graphql and Typescript app
I have the schema and resolvers and a server working using apollo-server, I can see the graphql playground.
I also have a client folder that contains my react app. I created the react app using the --typescript flag so it produces .tsx files and a tsconfig.json.
I'm looking into creating a Typescript definitions for the graphql queries
So my file structure is something like this.
client
react.tsx files
package.json
resolvers.js
schema.js
server.js
My simple question is should the server side files like schema.js and resolvers.js be .js files or should they somehow be .ts files. I'm sure they should be .js files but I can't find any information about it.
You might want to consider looking into a tool like apollo-codegen for this. Otherwise you'll have to write out your typescript types manually.
For a small project, this may be trivial, but for a larger one you might want to start generating the types based on the gql schema as your source of truth.

Webpack/React json file not loading externally on build

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.

react storybook load csv file

I have a quick question regarding how to load a static file in React storybook framework. Currently, I created a storybook by following the instruction in create-react-app.
Now, I am trying to load a csv file containing some data to visualize. For this, I placed the csv file under public folder by following the instruction here.
However, I couldn't load the file. Any suggestions?
The default webpack config storybook provides would not allow importing csv files; it only supports media files like images in the example.
What you'll want to do is add this custom loader, dsv-loader, to your storybook webpack config using Extend Mode. You will then be able to import the csv data as a javascript object.

Resources