I am a intermediate level web dev.
I recently heard of BunJS, and now playing around with it.
I am working on NextJS with bun and trying to install Tailwind CSS on it, but seems like Tailwind CSS does not have official instrauction for NextJS powered by bun.
I thought it would be as same as how I install NextJS powered by Node, but looks like it is different from that. I get error whenever I start the app on command line; it tells me to go chack official document, but the doc is taliking about react app rather than next app. The both file structures are very different, so I honestly have no idea what to do to make Tailwind work on NextJS + Bun.sh
If someone knows how to fix this issue, please let me know, thanks for help in advance!
Terminal ↓
[0.07ms] "node_modules.bun" - 58 modules, 6 packages
[2.00ms] bun!! v0.1.6
Link: http://localhost:3000
[0.04ms] "node_modules.server.bun" - 50 modules, 6 packages
[41.51ms] Next.js ready! (powered by bun)
[57.22ms] / - 2 transpiled, 4 imports
warn: To use Tailwind with bun, use the Tailwind CLI and import the processed .css file.
Learn more: https://tailwindcss.com/docs/installation#watching-for-changes
#tailwind base;
^
/home/kawa/Personal_Project/next-app/styles/globals.css:1:1 0
Basically, your project folder does not have a tailwind.config.js file. So, the compiler is looking for the #tailwind directive within globals.css which, of course, doesn't exist. To generate the tailwind.config.js file, first add the tailwindcss package to your project:
bun add -d tailwindcss
Then initialize tailwind css like this
bun run tailwindcss init
This should add the file to your project. Now, if you use the #tailwind, it should work
Running through the tailwind cli docs with bun and nextjs will result in an error like
Specified input file ./src/input.css does not exist.
Instead, point tailwind to the styles/globals.css like:
npx tailwindcss -i ./styles/globals.css -o ./dist/output.css --watch
Then, update your _app.tsx file:
Replace
import "../styles/globals.css";
with
import "../dist/output.css";
and Bob's your uncle (although underlines with text-3x1 are looking a bit wonky)
Related
I am new to Electron, and I have been having some trouble trying to do something simple in an Electron + React application. All I want to do is: Load a 3D model (.glb) located in my src/assets directory from a React component. I created the project using this guide. In a typical React project, I can just import the file directly in my JS module and reference the path in my code. However, with the default Webpack config, the file can't be found. There's obviously a gap in my understanding on how React + Webpack work when loading assets. What am I missing? Any help is greatly appreciated.
Thanks!
Turns out, the Webpack documentation spells out the answer clearly. Who knew? I found a lot of similar questions/answers for older versions of Webpack, so I'll post one here for Webpack 5. It requires a trivial two-line addition to the webpack.rules.js file:
{
test: /\.(png|jpg|gif|svg|glb)$/,
type: 'asset/resource'
}
The key is the asset/resource line. It's new to Webpack 5 and allows the bundling of assets without needing any additional loaders. With that, assets can be included as Javascript modules and Webpack will take care of the rest.
So, one can do:
import modelSrc from "../assets/some_awesome_model.glb";
And that's that. Webpack will spit out a URL such as /9feee593dc369764dd8c.glb, meaning Webpack has located and processed the asset.
Describe the bug
In my React Typescript project, I am trying to use CSS modules. I created the project using create-react-app, added TypeScript later. Then I followed the instructions from the docs to setup CSS modules in the project
Added the plugin with npm install -D typescript-plugin-css-modules
Then updated tsconfig.json
{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
}
}
I tried to run it but it didn't run. It complained about import statement here. Though the plugin docs say it shouldn't
So I added global.d.ts, which resolved the error
Now when I run it, the Home link on the header should be white. But I see the default color
To Reproduce
Go to https://codesandbox.io/s/summer-haze-ztnf6?file=/src/index.tsx
See the Link Home
Expected behavior
Home link color should be white
Since you already solved the issue, please have a look for description: problem in accessing the scss variables in react components
in a similar way you can access classes from the module scss files.
Never mind, changing the name of the scss file to header.module.scss fixed the issue.
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.
I have an ejected React app that is based on Create-React-App, and I am trying to install the #salesforce/design-system-react package to use the Salesforce lightning components in it. But to use this package is not as easy (seems that I need some extra configuration for Barbel and Webpeck). I don't have much experience on config Barbel and Webpeck and need some help to get me started.
Can someone please let me know how can I get that .BABELRC and the Webpack v1 files described from this site: https://react.lightningdesignsystem.com/getting-started/ ?
Many thanks,
No need to configure anything. Just import the CSS.
In your index.js, add the following line.
import "#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css";
Now you should remove the styling in App.css since the default styling in Create React App will affect your Lightning Components (font-size for example)
I downloaded the latest font-awesome 4.7 and extracted the files in my public folder of the react app. I linked it in the index.html like this <link href="./fontawesome/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">. Should I be doing this? Or should I put these in a a folder within the src directory? I never quite understood what I should be putting in the public folder.
You should use one of the well known open source projects for react \ react-native icons:
React: react-icons
React-Native: react-native-vector-icons
You should then import only the icon you want, for example (from Font Awesome):
import FaBeer from 'react-icons/lib/fa/beer';
You should use command prompt & install using NPM https://www.npmjs.com/package/react-fontawesome.
And then just include using var FontAwesome = require('react-fontawesome')
You also need to include below stylesheet in index.html.
font-awesome.min.css
I have used this in my project & it turned out quite well.