Is there a way to check if any assets in your src folder in your React app are not imported in any components?
To check if there are any assets in your src folder that are not imported in any components, you can use the Webpack Bundle Analyzer. This tool generates a report that shows the contents of your app's bundle, including a list of all the assets that are included.
To use the Webpack Bundle Analyzer, you can follow the instructions in this blog post: https://blog.jakoblind.no/webpack-bundle-analyzer/
Once you have installed and configured the tool, you can run it to generate a report that shows the contents of your app's bundle. You can then use this report to see if there are any assets in your src folder that are not included in the bundle, which would indicate that they are not being imported in any of your components.
Related
I created a publishable React library that contains some custom styles. When I use this library (component) within a demo application in the NX project, I do not need to include any CSS styles - they just work.
Now I published this library into my private NPM registry and I want to use this package in a separate application - suddenly my CSS files are not automatically included and I need to include JS files as well as CSS files.
Is there a way to bundle CSS files automatically into a build? So that in my consuming app, all I have to do is to import {MyComponent} from 'my-component'; and there will be CSS files included as well?
thanks
I have a react app that opens a widget in a div. I want to bundle it using parcel, ideally as a single js file.
Currently my build command looks like this
// package.json
"build:widget": "parcel build src/index.js --no-source-maps -d docs"
which builds a folder of files. If I then include the index.css and index.js on a 3rd party/demo site, the app works. However it is missing the images as they are looked for relative to the host site's root, not the index.js files root.
Is it possible to combine the css and js into one convenient file, to help people add the embed to their sites?
Can I add images to the parcel so they are either embedded in the js or linked to the server/cdn where the index.js file is hosted?
I ran the react build script and it has built the files into a build folder. However when I use serve (or any static file serve package), I am able to see the files from the src folder when I check the inspector. The react components files can be seen from the inspector.
The actual directory structure
The files in the chrome inspector
How can I solve this issue?
Simply put, how does the index.js get loaded? I don't see this referenced anywhere.
I am guessing the App.js is referenced from the manifest.json.
create-react-app is just a generator for a project that uses react-scripts, which is preconfigured Webpack setup.
App.js is used in index.js, and this can be tracked in project source files. index.js is entry point for Webpack bunhdle. Bundled application is loaded with <script> in index HTML page. The project contains only a template for HTML page which doesn't contain this <script>, the tag is added dynamically. Actual HTML page is generated from this template at build time with Webpack plugins.
Webpack setup can be examined by checking react-scripts source code or ejecting the project.
I understand that in react you cannot import files outside src folder.
But what is the reason for it exactly and can I disable it?
In my project react web app is only part of the whole thing, and different parts share some files (configs, build output), so folder structure looks like this
ProjectRoot/
config
build-output/
Part1/
Part2/
WebApp/
src/
...
Sure, you can copy files or create symlinks, but that's duplication and inconvenient.
This is a restriction of Create React App only.
This tool exists to get new users up and running with the react framework as fast as possible by abstracting away the tooling. The part of tooling that is limiting you in this instance is their webpack configuration, which is preset to only look for javascript files in your src directory.
That explains the why? but to answer the other half of your question:
how can I disable it?
Is that you would need to eject from Create React App and then modify your webpack config to allow it to search directories other than src/
First - this has nothing to do with react itself.
If you refer to importing javascript modules (for now using module loaders like systemjs, require, etc.) then the answer is:
It depends what directory is being served by web server. If you have set up your web server to serve WebApp/src folder only - then no, browser will not be able to get access to the files outside and so module loaders. If you will serve all ProjectRoot directory - then yes, you can.
If you prepare your web application for deployment using some sort of bundlers (webpack, browserify) - it depends on how you will configure them and instruct to include the required files in the resulting bundle.