2

I have some css and js files that I try to import into a view in React with vite so that it loads the styles, but it doesn't load, and when I enter the view, I have to comment and uncomment the import in code for the styles to be read.

I leave a capture of how I import the files in the view.

enter image description here

My folder tree.

My folder tree.

The js file "custom.min.js"

enter image description here

Gerson Malca Bazan
  • 411
  • 5
  • 7

2 Answers2

0

The import path /src/* maybe is wrong. I may need more info, but if this file you've shown is inside the src folder then the import path is incorrect. To be explicit, you need a relative path to any .css files.

Now I may be mistaken, but the js imports need to be named. I can see you're using TypeScript and you're using import statements, so I am only guessing but you'll need to name the import or import the specific "thing" you export in the js files. This can look like the following:

import fit from "/src/assets/js/*";

or

import { fit } from "/src/assets/js/*";

and the export in the custom.min.js file should look like:

export default fit;

or

export { fit };

Now for your .css and .js, if this is your directory:

__src
  |___ assets
  |
  |___ components
  |
  |
  |___ App.tsx
  |___ App.css
  |___ ...(everything else that lives in `src/` from a `create-react-app`)

then you will need to import the .css file like so into the App.tsx:

import "./assets/style/style.css"

You can optionally leave out the extension, but I am not 100% sure for .css files.

Hope this helps!

lua_python_java
  • 359
  • 2
  • 8
  • Yes, the css and js file is inside SRC. – Gerson Malca Bazan Mar 03 '22 at 04:12
  • I need to export my js functions??? My functions use jquey inside. – Gerson Malca Bazan Mar 03 '22 at 04:15
  • So this particular `.tsx` file is not outside of the `src` folder. You do need to export the functions. Can you show exactly where the *.tsx file is? Youll need the *relative* path, so your import will look something like `../assets/js/*` or `../assets/css/*` – lua_python_java Mar 03 '22 at 04:18
  • If you are using TypeScript with react, I would recommend changing your `js` files to `ts` so you get the benefit of typing your JavaScript. To talk about how that code may be exported/imported is another topic. You may want to just test to see if you can get a basic file, `hello-world.js` or `hello-world.ts` (They would be interchangeable) imported into your `App.tsx` file and see if you can log something to the console while running your react app. – lua_python_java Mar 03 '22 at 04:23
  • I'd also appreciate any up-votes for any comments or answers! :) if you need any clarification, feel free to ask! – lua_python_java Mar 03 '22 at 04:27
  • None of the solutions work. Neither with the css file nor with the js. The js do not have any business logic, they are only useful for component animations. – Gerson Malca Bazan Mar 03 '22 at 04:58
  • Where is the `.tsx` file in relation to the `.css` file? At the end of the `custom.min.js` if you don't have an export statement then none of the `js` file will be executed. See this post for a more explicit answer: https://stackoverflow.com/questions/43262599/call-js-function-from-another-file-in-react – lua_python_java Mar 03 '22 at 05:13
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/242556/discussion-between-lua-python-java-and-gerson-saul-malca-bazan). – lua_python_java Mar 03 '22 at 05:26
  • The problem is that the js functions and css styles do not load automatically when I enter the view, I have to remove the import lines and reload the view, then re-insert the same lines for the styles and functions to load correctly . – Gerson Malca Bazan Mar 03 '22 at 05:31
0

In case you're trying to use an absolute path for your imports, you need to remove the backslash before the 'src'.

In your case, the imports are prefixed with '/' so it looks for the 'src' folder inside the current directory, 'src/components/organisms/sidebar/src/{your imports}'.

Choosing between relative and absolute imports is a matter of a personal opinion as they both have trade-offs, this will make it clearer, and this.

Art
  • 431
  • 4
  • 12