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
Does anyone know why the shortcut to go to the tests for a given class (cmd+shift+t) doesn't work in WebStorm as it does in IntelliJ Idea, or how one can enable it?
Cmd+Shift+T does work in WebStorm; navigation is based on test names (i.e. marking folder as test root won't help here), e.g. performing Navigate | Test inside a file named My.js will navigate you to MySpec.js file.
Patterns are hardcoded to *Spec.js, *_spec.js, *-spec.js (+same patterns with "test" instead of "spec"). Note that if the file extensions differ (jsx > js), it won't work..
We have a feature request for making patterns configurable, WEB-29053; please feel free to vote for it
You need to mark the root test folder as such, you can do this by marking it by right clicking, "Mark Directory as->Test Sources Root" as below:
Or alternatively by the project preferences->directories as below:
After this one should be able to navigate between tests and their source using the cmd+shift+t shortcut.
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/?
I'm getting this error in an almost empty react component:
"[ts] Unterminated regular expression literal."
import * as React from 'react';
export default class EmptyComponent extends React.Component {
render() {
return (
<p>Hello</p>
);
}
}
I don't know what I'm doing wrong!
It turns out I was using the .ts file extension instead of .tsx
Make sure your component file extension is .tsx (if you're using Typescript) or .jsx (if you're using Javascript).
So my case was a bit unique. I had the same error message. but everything got fix after I restarted the build process (e.g. in this case I was working with storybook, so npm run storybook). The symptom was that, even I changed my file name to be .tsx the error still reporting the same file as .ts. That reminded me that I changed the file name when the build is already watching and running. That's when I decided restart the build command and wolaa! everything fixed itself.
Sometime its just that --- "Have you turn it off and on again?"
Just in case someone else runs across this and has named their file appropriately, re-inspect your regex to make sure you haven't accidentally created an invalid regex. For example, mine looked like:
/^https?:\/\/
and it should have been:
/^https?:\/\//
^ left this lil' guy off
You can also use an online regex tool to make sure you've created a valid regex.
I'm using WebStorm. The file is a .tsx file and turned out that after I close the file and re-open the file again, the issue is gone itself.
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!!!!!