I have an import statement getting all images from a folder for each object in an array. It looks like this:
const gallery = import(../../assets/images/${project.folder}/*);
I keep getting errors saying cannot find module in './project.folder/*'. The file path is correct, and it's looping through each folder it needs to. But it seems the * isn't giving me all files in the folder as I thought it would.
Can someone explain this to me? How might I get all files from each folder this way? This seemed by far the driest method possible.
Hello everyone I have a problem regarding nextJS routing
i have the following folder structure and its works fine for a simple scenario where a project has only one folder and this folder have one domain
but my problem occurs when a project has a folder and this folder have many subfolders
for example if i have this URL projects/1/folder1/subfolder1/subsubfolder1/.../domain1
so as you can see i don't know how many slugs i will have
how can I achieve this??
Dynamic routes can be extended to catch all paths by adding three dots (...) inside the brackets.
It means you can create a file with name [...folder].js and in that file, you can write your logic to handle the route.
You can even make it optional by including the parameter in double brackets ([[...folder]]). This allows /base, /base/a, /base/a/b, and so on.
To access folder object you can simply get it from query as
{ "folder": ["a", "b"] }
Is it possible to have Webpack include image assets in the build bundle without:
Using an import statement for that specific resource (which can be done with Asset Modules in Webpack 5)
Not writing it into a static HTML document as an src attribute (which can be done with HtmlWebpackPlugin)
I would have some React JSX code that reference image resources, either as a src attribute in an <img> element, or have some resource string, say var imgUrl = './Assets/img.svg', and some element later using this string as an attribute.
Currently I could manually copy the entire /Assets folder into /dist, but I would have unused resources in /Assets and would like Webpack to figure out which ones are actually used.
Oh, now I understand, and unfortunately, this is not possible.
React won't detect the value of the src of the image because it will consider it just a string, and not a path. It won't figure out which file are you talking about. The only way to use it the way you want to do it is by having those images in the public folder, which you said you didn't want to do.
In my personal opinion what I usually do with static images if the app is small, is putting them all together in a file by importing them and exporting an object with all of them together. Finally every time I want to use any image I just import that file and use whichever image I want. With this approach, at the end of the day, I'll end up with just one file (bundle). It's just an approach, there are many different ways to do this but it's relative to the case
I don't know if I understood correctly, but maybe you could require the asset inline like this...
<img src={require('./Assets/img.svg')} />
If this is not what you are looking for, maybe you can explain me more in detail... I've quite a lot of experience playing with webpack, I think I may have a solution for you
I'm working in a react codebase where we have test files labeled
__tests__
The files inside look like this
filename.js
Previously when I've used jest/enzyme, I've had test files formatted like this
filename.test.js
I am assuming that when you put a file inside a folder with the title
__tests__
you can leave the .test part off? I can't seem to find a solid answer on topic. Does anyone have some insight into the formatting functionality?
This is because of the value of jest config's testMatch property which defaults to
[ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)" ]
Which basically means that it will consider as a test any js(x) or ts(x) file either with .test (or .spec) after it or inside a __test__ folder.
I was attempting to make a "library" type of project in dart and then "depend" on that library from another project (all using the path dependency functionality of the yaml file). I understand that I might be able to get the dependency stuff to work if I hosted my library or if I used GIT, but I don't want to do either, because I feel that pure filesystem based dependencies should be a "no brainer".
So, without further adieu, here is my situation. I have a very simple dart library/project based on web_ui that contains two files:
esrvdartui.dart
---------------
library esrvdartui;
import 'dart:html';
import 'package:web_ui/web_ui.dart';
part 'esrvradiobutton.dart';
esrvradiobutton.dart
--------------------
part of esrvdartui;
class ESrvRadioButton extends RadioButtonInputElement
{
ESrvRadioButton ()
{
}
}
I then created another very small/simple web_ui based project called "ExampleForm" that wants to use my esrvdartui project above. Both of these projects exist in the same directory structure. My ExampleForm project contains the following yaml file:
pubspec.yaml
------------
name: ExampleForm
description: A sample WebUI application
dependencies:
js: any
browser: any
web_ui: any
esrvdartui:
path: ../esrvdartui
No matter what I set my path to in the above yaml file, I never see my web\packages directory underneath of my ExampleForm project get updated with my files from the esrvdartui project and as such, I cannot use the files in my library using the file based dependency method, because the build fails for my ExampleForm project.
"Pub install" does not complain with the above path and it doesn't complain when I use an absolute path, so I know that "Pub install" see my dependent project. It just doesn't copy the darned files for me.
Any thoughts?
My pubspec.lock file for ExampleForm is:
# Generated by pub
# See http://pub.dartlang.org/doc/glossary.html#lockfile
{"packages":{"logging":{"version":"0.5.0+1","source":"hosted","description":"logging"},"source_maps":{"version":"0.5.0+1","source":"hosted","description":"source_maps"},"unittest":{"version":"0.5.0+1","source":"hosted","description":"unittest"},"pathos":{"version":"0.5.0+1","source":"hosted","description":"pathos"},"analyzer_experimental":{"version":"0.4.7+1","source":"hosted","description":"analyzer_experimental"},"web_ui":{"version":"0.4.6+1","source":"hosted","description":"web_ui"},"js":{"version":"0.0.21","source":"hosted","description":"js"},"csslib":{"version":"0.4.3","source":"hosted","description":"csslib"},"esrvdartui":{"version":"0.0.0","source":"path","description":{"relative":false,"path":"C:/Users/Jason/dart/esrvdartui"}},"html5lib":{"version":"0.4.3","source":"hosted","description":"html5lib"},"args":{"version":"0.5.0+1","source":"hosted","description":"args"},"browser":{"version":"0.5.0+1","source":"hosted","description":"browser"},"meta":{"version":"0.5.0+1","source":"hosted","description":"meta"}}}
My pubspec.lock file for esrvdartui is:
Generated by pub
See http://pub.dartlang.org/doc/glossary.html#lockfile
{"packages":{"meta":"version":"0.5.0+1","source":"hosted","description":"meta"},"browser":{"version":"0.5.0+1","source":"hosted","description":"browser"},"args":{"version":"0.5.0+1","source":"hosted","description":"args"},"html5lib":{"version":"0.4.3","source":"hosted","description":"html5lib"},"analyzer_experimental":{"version":"0.5.0+1","source":"hosted","description":"analyzer_experimental"},"csslib":{"version":"0.4.3","source":"hosted","description":"csslib"},"web_ui":{"version":"0.4.6+1","source":"hosted","description":"web_ui"},"pathos":{"version":"0.5.0+1","source":"hosted","description":"pathos"},"js":{"version":"0.0.22","source":"hosted","description":"js"},"source_maps":{"version":"0.5.0+1","source":"hosted","description":"source_maps"},"unittest":{"version":"0.5.0+1","source":"hosted","description":"unittest"},"logging":{"version":"0.5.0+1","source":"hosted","description":"logging"}}}
I finally got this to work, but for the life of me, I couldn't find this documented anywhere. All you have to do is create a project in the Dart IDE. Then, create a top level folder in that project called "lib" (blow all other directories away other than the top level "packages" folder). Now, create your main library's .dart file. Let's call it "mylibrary.dart". This contents of this file will look something like this:
mylibrary.dart
library mylibrary;
import 'dart:json';
part 'src/libraryfile1.dart';
Now, create a sub-directory underneath of "lib" to place your library's source files into. This can really be named anything, but I choose to name it "src". Place your libraryfile1.dart file there and it should look something like this:
src/libraryfile1.dart
part of hix_lib;
.
.
.
All import statements should always be placed in your top-level main library file: mylibrary.dart.
Now, in the project that you wish to use this file-based library in, you must add your "mylibrary" to your project's pubspec.yaml file and choose: "Source: path". On my machine, because all projects are in the same directory, my path simply points to: ../mylibrary
And that's all there is to do!!!!!