I've created a Github repo that has all the source code related to this question. I'm able to load build/index.html in the browser after running npm install. However, when I view the sources tab in Chrome, I don't see the source maps associated with the .tsx files.
Here's a screenshot of what I see:
I've added sourceMap: true in my tsconfig.json as well as debug: true and devtool: "source-map" in my webpack.config.json. Any thoughts on what I'm missing here?
EDIT:
This might be a silly question, but do you have to use webpack-dev-server in order to see the sourcemaps?
Your tsconfig.json might be well.
Try in your webpack.config.js either devtool: "inline-source-map" or remove the two options od debug and devtool complete.
In my case I don't need them.
I had to add a filepath for the sourcemap file. Take a look at the output part of this webpack.config.js:
https://github.com/nwinger/reactreduxtodo/blob/master/webpack.config.js
Related
I have created a simple new Rails 7 project from scratch with Esbuild and React to get to know these, and they indeed feel like a step up from Webpack, except I can't manage to have my static files (ie image) served in production.
I have an Esbuild config file:
// esbuild.config.js
const path = require('path');
require("esbuild").build({
entryPoints: ["application.jsx"],
bundle: true,
outdir: path.join(process.cwd(), "app/assets/builds"),
absWorkingDir: path.join(process.cwd(), "app/javascript"),
publicPath: "assets",
sourcemap: true,
watch: process.argv.includes('--watch'),
plugins: [],
loader: {
'.js': 'jsx',
'.jpg': 'file',
'.png': 'file',
'.MOV': 'file'
},
}).catch(() => process.exit(1));
I store my images in the app/javascript/images/ folder, and import and use them in a React component like that (for example):
import MyImage from "./images/myimage.jpg"
import styled from "styled-components";
//...
const SomeStyledComponent = styled.div`
background-image: url(${MyImage});
`
In development, everything works fine, Esbuild copies the images in the app/assets/builds/ folder, fingerprints them, and prepends all the images url with the publicPath property of my Esbuild config. The above image for example then has the relative url assets/myimage-FINGERPRINT.jpg which is served correctly in development.
Then things get complicated in production (production here being just a Docker container built for production - I don't add the Dockerfile to keep things simple as I don't think it would help, but happy to provide it of course).
In my production.rb I have added the following:
config.public_file_server.enabled = true
(which will be replaced by an environment variable later)
The assets precompiling succeeds, and my images are in the app/public/assets/ folder, fingerprinted once more by Sprockets this time (from what I understand), but now I get 404. I have tried changing Esbuild publicPath and have tried to get the images directly in my browser, but whatever I try (assets, public, public/assets), nothing work and I am running out of ideas.
I have temporary fix which is to change the loader for images to dataurl, but that does not feel like a good practice, as my compiled javascript is going to explode.
Thank you for your help!
I ran into a similar issue, and by looking at the answers to https://github.com/rails/jsbundling-rails/issues/76 and this PR: https://github.com/rails/sprockets/pull/726/files
I was able to figure out the proper setup that works.
in the build options, I changed
publicPath: "assets",
to
publicPath: "/assets",
(included the leading /, which was missing before and causing the wrong path to be used)
and then added the following option
assetNames: "[name]-[hash].digested",
which, as you might be able to tell from the linked PR, would prevent Sprockets from adding an additional layer of fingerprinting.
I hope that helps.
I'm in the nightmare process of updating one of my older projects from Webpack 3 to 4 and it's introducing a whole chain of things that need fixing. The most annoying one thus far is definitely switching from webpack-dev-server to webpack-serve due to it's lack of an actual example. So with that in mind, how the heck do I use it?
Using Webpack 4.14.0 and Webpack-Serve 1.0.4.
My webpack.config.js had the following options for webpack-dev-server:
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
publicPath: '/dist/'
}
I don't see options for history or public paths just yet, so I suppose I only need the content config option.
So according to the docs I'm supposed to do:
serve({
content: path.join(__dirname, 'public')
});
But where do I put this? The Github README claims that the most commonly used is to put it webpack.config.js but that seems false because the example also does this:
const serve = require('webpack-serve');
const config = require('./webpack.config.js');
serve({ config });
Do I really import a config file into itself?
I'd appreciate an example. Thanks.
I answered in another question very similar on "how to set up webpack-serve".
For simplicity, I also uploaded the full example to Github
I'm reading tutorial about Webpack on this: Github Webpack tutorial In this, there is a section about config webpack for production and development.
Here is development configuration:
// webpack.config.dev.js
module.exports = {
devtool: 'cheap-eval-source-map',
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/index'
],
Here is production configuration:
// webpack.config.prod.js
module.exports = {
devtool: 'source-map',
entry: ['./src/index'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
I understand the difference in option of devtool. The thing I don't understand about entry. Why in production, entry is only about src/index but in development configuration, entry also includes webpack-dev-server
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/index'
The lines 'webpack-dev-server/client?http://localhost:8080' and 'webpack/hot/dev-server' are configuring/defining which port to attach an active websocket to, in this case localhost:8080, and the content base which in this case is folder/path /client. In a production environment you would never run webpack-dev-server as your bundled client assets (bundle.js or similar) would be served by a server (IIS, Node, etc), that is why there are no webpack related items in entry of the production configuration.
The Webpack plugin in question webpack-dev-server is not required to run Webpack and compile your JS sources, it simply is a tool that can be used during the development process to watch for changes and reload changes.
Technically the entry array property in development could simply be the './src/index', but then it wouldn't enable the webpack-dev-server and/or it's hot module reloading. If you wanted to run webpack-dev-server without these configuration items then you'd then need to add command line arguments when starting webpack to specify the port and/or content base.
Hopefully that helps!
Here is the 2 things you should know before understanding:
As your linked in Webpack the confusing part, there are 3 types of entry: String Array and Object. As above code, that is array type. Meaning of entry array is: Webpack will merged all those javascript files in array together. This is often unnecessary because Webpack is intelligent enough to know which javascript files need to merge while processing. You often need to do this to enhance some features from different javascript files that you don't include somewhere else in your code.
This is "little tricky" part. You see webpack/hot/dev-serverand webpack-dev-server/client?http://localhost:8080 look like a web url rather than some javascript files, right? If you check your project directory, you see there are those files: your_app_directory/node_modules/webpack/hot/dev-server.js and your_app_directory/node_modules/webpack-dev-server/client.js. And that is the real meaning: you are importing two javascript files from two modules webpack-dev-server and webpack.
Back again to your webpack configuration:
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/index'
],
That means we will merge three different javascript files together as point 2 I have figured out. As I explain in point 1, you will do this for enhancing some features. You include file webpack-dev-server/client.js for making a server for serving your code. You include file webpack/hot/dev-server.js for allowing your code autoloading. This is super useful when you in development mode without start/stop server each time you modify your code.
Anyone know if this is the standard source-map for cross-builder/react now? Devtools is showing what the jsx is compiled into, not the actual jsx from the file. I've tried changing the devtool:'source-map' settings in the webpack config but not luck. This is straight out of the Crossbuilder project.
Editor:
Found my issue. The sourcemap from above was done using 'eval' from webpack devtool option. Changing it to 'source-map' fixed it.
I have the correct versions of Compass and Sass installed on my machine and have had no issues creating sourcemaps with other projects, i.e my base set-up works.
My problem is very specific: it's with the 'yo-angular' grunt install.
I have amended the Gruntfile.js as follows (by adding the sourcemap: true flag) :
// Compiles Sass to CSS and generates necessary files if requested
compass: {
options: {
sourcemap: true,
sassDir: '<%= yeoman.app %>/styles',
And i have changed the debug flag to false:
},
server: {
options: {
debugInfo: false
}
}
},
This works fine, throws no errors in 'grunt serve', and on inspecting the generated main.css file the references generated by the sourcemap main.css are entirely accurate.
But, oddly, the elements panel of Chrome Dev Tools refers to completely different line numbers.
The way that yo angular process builds is presumably the issue, and I notice that the files/folder structure (e.g. the _sass files are all empty) that the host is looking at are different to my dev files so maybe it's just impossible to map to them?
Quick PS: I know that many have struggled to get sass sourcemaps working at all, because of issues with Compass and so on, but just to reiterate I am not asking for help in getting a basic set-up established - I have managed that. The specific problem that I have is making the 'yo angular' stack to work with sourcemaps. I imagine that others have had the same problem. I have searched all over this and other sites to no avail and posted issues on github without a result.
Please Help and thanks in anticipation!