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.
Related
vmsg requires a URL link to a .wasm file that it requires in order to work. Their sample code (which does work) looks as follows:
import React, { Component } from 'react';
import vmsg from 'vmsg';
const test = new vmsg.Recorder({wasmURL: "https://unpkg.com/vmsg#0.3.0/vmsg.wasm"});
But I would like to have that file refer to a directory in my app rather than this external URL and I'm not certain:
Where I should place this file (assets/public/node_modules folder)?
What I would do to make this work (do I do an import or do I reference it directly somehow)?
I've tried placing the file in my assets folder and changing the line of code to many things along the lines of:
const test = new vmsg.Recorder({wasmURL: '../../assets/vmsg.wasm'});
But nothing seems to be working, which, after some reading, makes sense. But I'm still not sure what the right way to add a file like this should be instead.
I've seen some people run into something like this specifically when trying to import photo assets. One solution that I've found to work for that is to include .default at the end.
const test = new vsmg.Recorder({wasmURL: require('../../assets/vmsg.wasm').default});
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 using Laravel with React.jsx. My webpack.mix.js file looks like this:
const mix = require('laravel-mix');
if ( ! mix.inProduction()) {
mix.webpackConfig({
devtool: 'source-map'
})
}
mix.react('resources/js/app.js', 'public/js')
.react('resources/js/*.jsx', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
This is working exactly as I expect - any .jsx file directly in resources/js/gets compiled correctly into public/js/
What I want now, though, I'm struggling with. I want every .jsx file that in resources/js/pages/, AND every one of its subfolders, to be compliled and put into a matching folder in public/js/
So for example if I have a file resources/js/pages/a.jsx, I want it in public/js/pages/a.js, and if I have a file resources/js/pages/x/y/z/file.jsx, I of course naturally want it to appear in public/js/pages/x/y/z/file.js
I thought I could achieve this with wildcards, so I tried this:
mix.react('resources/js/pages/*/*.jsx', 'public/js')
However, that only went exactly one folder deep (eg into resources/js/pages/x/), didn't render anything directly in resources/js/pages, and put all the rendered files into public/js rather than keeping the subfolder structure.
Is there any way to achieve what I want? A sort of recursive folder/file wildcard that keeps the folder structure when putting into /public/js/?
In my webpack config file, i have multiple entry points:-
entry: {
bundle: "./src/index1.js",
rUI: "./other/src/js/ui/index2.js"
},
In index1.js file, all imports are getting resolved, but in index2.js which looks like following
import someModule from "./components/SomeModule/SomeModule";
export default SomeModule;
it's not able to resolve someModule (though the relative path is correct and file exits) and gives error - Cannot find module "./components/SomeModule/SomeModule" on browser console...
However, if I bring the entire contents of someModule.js, there is no issues.. which means that there is some problem with path. Not able to figure out why...
Any help is highly appreciated.
Not really a way to solve your problem, but if you are having trouble with import paths, I'd recommend having a look to something like babel-root-import pluging.
It has saved me so many headaches.
I solved it. Though the same code worked using require instead of import. But to make the same code work, I had to add additional preset - es2015 and react. Something like
"babel?presets[]=es2015,presets[]=react,presets[]=stage-0,plugins[]=transform-object-rest-spread"
i am going crazy over this and i'm tired of searching - could someone please explain to me, how i can avoid the default namespace of doxygen, which seems to be the base input folder.
Here you can see what i mean: http://trac.sevo.org/doxyvb/html/_v_b6_module_8bas.html
The package "ClassicVB" is only named so, because it's the name of the folder in which this file is in. But is there any way to specify, to which package or namespace a specific file belongs?
You see, if i generate a documentation, i would like to state #namespace inside my .bas file and doxygen should then use this as the namespace of the included functions inside this file. But instead it is using the name of the folder, in which my .bas file is in.
Maybe i am just doing it wrong, but i spend the last couple of hours with this, i'm grateful for any help on this matter!
I had to deal with the same and I managed this way. Go to Doxygen GUI:
Expert->Project-> Set FULL_PATH_NAMES to NO
I think this will be enough. If not let me know. When you change something in Doxygen to not-default it becomes red, so I can quickly check all the boxes I have changed.