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.
Related
Is there a way around the file size limitation when building with react and threejs? I am building a react module with three js using the cms-react-boilerplate. The project builds fine, but it can't upload the main.js file as it is 2.1MiB. It gives me the following error:
[ERROR] Error validating template.
[ERROR] line 0: Coded files must be smaller than 1.5 MiB
I tried to upload the file directly to the design manager but was given the same error.
I also tried to create a main.js file and paste the code into it, but was given the following error:
Error:Coded file buffer must be smaller than 2.0 MiB
I'd recommend enabling code splitting. If not, you're going to need to use a different host for the JavaScript files. Additionally – make sure you're correctly including only what you need.
Avoid:
import * as x from 'lib';
and instead do:
import { each, func, you, need } from 'lib';
This will allow bundlers such as Webpack to properly Tree Shake your dependencies.
Try compressing your files into .min.js files with this if you are done editing them.
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!
I’m having an issue with Snowpack and CSS modules. When I build the app it creates a .json file with the hashed and non-hashed class names but they are not loaded into index.js and all the classes show as undefined when inspecting the page. When I look at the source I can see an empty object that looks like it should have the JSON in and if I add it manually it works... is there something I need to configure to get this to work or should it just do it after importing the xxx.module.css file?
Additionally is there a way to bundle the css in with the JavaScript so it injects the styles at runtime rather than having a separate css file? Maybe using #snowpack/webpack to bundle them?
Update:
I just updated to the latest version of snowpack and it doesn’t even generate the .json file...
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.