I've lost too many hours trying to debug an SSR react application (the server side). We're building an app from scratch, and it's a very large project so debug the code is really important.
The webpack config for the server is the following:
const path = require('path');
const merge = require('webpack-merge');
const webpackNodeExternals = require('webpack-node-externals');
const webpack = require('webpack');
const baseConfig = require('./app.webpack.base');
const server = {
name: 'server',
entry: ['./app/server/index.js'],
target: 'node',
mode: 'development',
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'public/server'),
filename: 'server.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: 'file-loader',
exclude: /node_modules/,
options: {
name: 'public/media/[name].[ext]',
publicPath: (url) => url.replace(/public/, ''),
emit: false
}
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
{
loader: 'css-loader/locals'
},
{
loader: 'sass-loader'
}
]
}
]
},
plugins: [
new webpack.DefinePlugin({
'SERVER_SIDE': true,
'ENVIRONMENT': JSON.stringify(process.env.NODE_ENV),
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
],
externals: [webpackNodeExternals()]
};
module.exports = merge(baseConfig, server);
The baseConfig only adds a loader for js and jsx files:
module: {
rules: [
{
test: [/js$/, /\.jsx?$/],
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
I can't debug it neither in VSCode nor Chrome.
In VSCode, I get the famous:
Unverified breakpoint, Breakpoints set but not yet bound
I'm running the generated server.js file (after bundled with webpack) with node --inspect flag:
I've tried many launch.json configs, example:
{
"name": "Attach to Process",
"type": "node",
"protocol": "inspector",
"request": "attach",
"port": 9229,
"sourceMaps": true
}
And in Chrome, if I open the DevTools for Chrome, I am able to see the source maps and set breakpoints but they never get hit.
I will be very grateful with you guys if you can give me a hand with this. Any insight or idea is appreciated too.
Thanks.
You can check out my solution here. By the way, I had some experiments with SSR here
Related
I'm not sure what is going on but I have a very basic Vite setup, yet I'm seeing the local server serve up all my jsx files, which takes a good 10-15s when I do a fresh reload. At first I thought this just might be the way Vite works for development but even when trying to build for production it does the same thing and doesn't minimize or uglify the files but just serves the jsx as is.
enter image description here
The following is my vite.config.js. The commented out code is other things that I've tried with no success:
export default ({mode}) => {
return defineConfig({
root: 'app',
define: {global: 'window'},
// esbuild: {
// loader: "jsx",
// minify: true,
// minifySyntax: true,
// },
// optimizeDeps: {
// esbuildOptions: {
// minify: true,
// minifySyntax: true,
// loader: {
// ".js": "jsx",
// ".ts": "tsx",
// },
// },
// },
plugins: [react()],
// build: {
// outDir: '../dist',
// minify: true,
// },
server: {
host: '127.0.0.1',
port: 3000
}
})
};
I've tried numerous configuration options and tried every rollup/vite config option I could find on stack overflow and the internet. I'd expect vite to serve only the produced index.html and generated index.jsx file, not get all my source files as is.
This project originally did use webpack, but even then I wasn't doing anything special. Here is my webpack config incase that's helpful:
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'development',
devtool: 'eval-source-map',
entry: [
'webpack-dev-server/client?http://vesta-dev.localhost.com:3000',
'webpack/hot/dev-server',
'react-hot-loader/patch',
path.join(__dirname, 'app/index.js')
],
output: {
path: path.join(__dirname, '/dist/'),
filename: '[name].[hash].js',
publicPath: '/'
},
plugins: [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
new webpack.DefinePlugin({
...
})
],
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: [/node_modules/, /__tests__/],
loader: 'eslint-loader',
options: {
configFile: path.resolve(__dirname, '.eslintrc'),
failOnWarning: false,
failOnError: false,
emitError: false,
emitWarning: true
}
},
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
plugins: ['react-hot-loader/babel']
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.scss$/,
use: ['style-loader','css-loader','sass-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]']
},
{ test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader' },
{
test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/,
loader: 'url-loader',
options: {
limit: '10000',
mimetype: 'application/font-woff'
}
},
{ test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/, loader: 'file-loader' },
]
}
};
Looks like this is normal for when you use vite serve as that always serves the development environment, no matter what flags you set or command line options you pass in.
I thought it was interesting that no one talks about the jsx files actually being served in the network traffic and even with all my searching never came across anyone talking about this, nor in the Vite documents so I thought something was wrong.
I have a webpack file that looks like the one below, and I have a line in my handler.ts which looks like this:
import { PayoutEntity, IPayout, payoutEntityManager } from "/opt/nodejs/orm";
However I get the following error as the module/path for "/opt/nodejs/orm" doesn't exist locally:
Module not found: Error: Can't resolve '/opt/nodejs/orm'
The webpack build is for a lambda and the files for "/opt/nodejs/orm" are in a lambda layer that will only be accessable from the application once it's deployed to aws.
So in fact I would like webpack to ignore completely /opt/nodejs/orm and not even try to pack it.
I've tried using the ignore plugin with const ignore = new webpack.IgnorePlugin({resourceRegExp:/^(\/opt\/nodejs\/search|\/opt\/nodejs\/orm|\/opt\/nodejs\/put-event)$/}) but this just results in baking the "module not found" error into the bundled output file.
"use strict";
const path = require("path");
module.exports = {
devtool: "source-map",
entry: "./src/handler.ts",
mode: "production",
target: "node",
externals: [nodeExternals()],
node: {
__dirname: true,
},
output: {
filename: "index.js",
libraryTarget: "commonjs2",
path: path.resolve(__dirname, ".build"),
},
module: {
rules: [
{
test: /\.(graphql|gql)$/,
loader: "graphql-tag/loader",
exclude: /node_modules/,
},
{
test: /\.(tsx?)$/,
loader: "ts-loader",
exclude: [
[
path.resolve(__dirname, "node_modules"),
path.resolve(__dirname, ".serverless"),
path.resolve(__dirname, ".webpack")
],
],
options: {
transpileOnly: false,
experimentalWatchApi: true,
},
},
],
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
};
A common problem but as usual, every solution found on this website, not fit my case.
I've create a .env.production file with specific constant.
In my package.json I have:
"build": "NODE_ENV=production webpack --config webpack.config.js --colors",
I run the build with the classic: npm run build
This is my webpack.config
const webpack = require('webpack');
const path = require('path');
var config = {
context: __dirname + '/src',
entry: {
javascript: "./index.js",
},
output: {
// path:path.join(__dirname, './dist'),
path: path.join(__dirname,'../static/js/'),
filename: 'bundle.js',
},
devServer: {
inline: true,
port: 8080
},
resolveLoader: {
modules: [path.join(__dirname, 'node_modules')]
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react']
}
},
{
test: /\.css$/,
loader: 'style-loader'
},
{
test: /\.css$/,
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
test: /\.svg$/,
use: [
{
loader: "babel-loader"
},
{
loader: "react-svg-loader",
options: {
jsx: true // true outputs JSX tags
}
}
]
}
]
},
}
module.exports = config;
As you can see, Im not overriding ENV in webpack config using the webpack.DefinePlugin plugin.
So why my process.env is EMPTY?
When I start the app with npm start, the process.env is normally filled and process.env.NODE_ENV is set to development.
Thank you for any help!
It happens on a build for server side, i am already using a lot of external modules and everything worked great until now.
I am trying to add the module auth0-js and the error happens when i add the import on this lib var crypto = require('crypto'); TypeError: require is not a function.
Here is my webpack config (for server side):
const path = require('path');
const webpack = require('webpack');
const StatsPlugin = require('stats-webpack-plugin');
module.exports = {
entry: './handler.js',
target: 'node',
profile: false,
output: {
path: path.resolve(__dirname, '../dist-server'),
publicPath: '/',
filename: 'handler.js',
libraryTarget: 'commonjs'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: path.resolve(__dirname, '..'),
use: 'babel-loader'
},
{
test: /\.pug$/,
use: 'pug-loader'
}
]
},
plugins: [
new webpack.DefinePlugin({
__CLIENT__: false,
__SERVER__: true
}),
new StatsPlugin('stats.json', {
chunkModules: true,
exclude: [/node_modules[\\\/]react/]
})
],
resolve: {
modules: [
path.resolve('./src'),
path.resolve('./node_modules')
]
},
devtool: 'source-map'
};
My .babelrc file is:
{
"presets": [
"react",
"latest"
],
"plugins": [
"transform-object-rest-spread",
"transform-runtime"
]
}
I tried to remove the exclude node_modules but i get other errors.
I am curious to know how a single library can break everything, what should i do?
I am receiving a "module parse failed" error when trying to load my react app with Babel6 Stage-1. We initially ran browserify but I am now trying to port us completely to Babel6.
babel.rc file
{
"presets": ["stage-1", "react"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}}
webpack config
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'eventsource-polyfill', // necessary for hot reloading with IE
'webpack-hot-middleware/client',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.jsx?/,
loaders: ['babel'],
include: path.join(__dirname, 'src'),
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: 'style!css'
}]
}
};
I have tried reading the documentation on Babel6 and it seems like I need to include react in my presets along with Stage-1.
I have done both and npm installed:
babel preset stage 1, babel preset react, and babel preset react hmre
Any ideas on how I can get react loading again?
Fixed by adding es2015 to the babel.rc file