express - No se puede usar NextJs + ExpressJs con TypeScript y webpack
Quiero configurar ExpressJs con TypeScript para usar IOC con InversifyJS y Nextjs con es6. También quiero usar webpack para hacer el bundle. Como debo importar Next en server.ts para hacer renderizado del lado del servidor, también configuré TypeScript para Nextjs, pero quiero que los archivos .js y .jsx en la carpeta client puedan tener sintaxis es6.
Pero algo salió mal al compilar el código de nextjs. (cuando no uso next en server.ts, funciona correctamente)
webpack.config.js
const path = require('path');
module.exports = {
entry: './server/server.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
output: {
filename: 'server.js',
path: path.resolve(__dirname, 'build')
}
};
servidor/tsconfig.json
{
"files": [
"server.ts"
],
"compilerOptions": {
"target": "ES2018",
"module": "commonjs",
"sourceMap": true,
"outDir": "./build",
"rootDir": "../",
"strict": true,
"esModuleInterop": true
}
}
cliente/next.config.js
const webpack = require('webpack');
const fs = require('fs');
const path = require('path');
const glob = require('glob');
const withPlugins = require('next-compose-plugins');
const withCSS = require('@zeit/next-css');
const withTypescript = require('@zeit/next-typescript')
const optimizedImages = require('next-optimized-images');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = withPlugins([
withCSS,
optimizedImages,
withTypescript,
], {
webpack: (config, options) => {
const {dev, isServer} = options;
config.plugins.push(
new UglifyJsPlugin({
test: /\.js($|\?)/i
}),
);
config.module.rules.push(
{
test: /\.(css|scss)/,
loader: 'emit-file-loader',
options: {
name: 'dist/[path][name].[ext]'
}
},
{
test: /\.s(a|c)ss$/,
exclude: /node_modules/,
use: ['babel-loader', 'raw-loader', 'postcss-loader',
{ loader: 'sass-loader',
options: {
includePaths: ['styles', 'node_modules']
.map((d) => path.join(__dirname, d))
.map((g) => glob.sync(g))
.reduce((a, c) => a.concat(c), [])
}
}
],
},
{
test: /\.js$/,
enforce: 'pre',
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
emitWarning: dev,
},
},
)
if (dev) {
config.devtool = 'cheap-module-source-map';
}
return config;
},
});
cliente/.babelrc
{
"presets": [
"next/babel",
"@zeit/next-typescript/babel"
]
}
package.json
"dependencies": {
"express": "^4.17.1",
"inversify": "^5.0.1",
"inversify-binding-decorators": "^4.0.0",
"inversify-express-utils": "^6.3.2",
"inversify-logger-middleware": "^3.1.0",
"mongodb": "^3.3.2",
"next": "^9.0.5",
"react": "^16.9.0",
"react-dom": "^16.9.0"
},
"devDependencies": {
"@zeit/next-typescript": "^1.1.1",
"@babel/cli": "^7.6.0",
"@babel/core": "^7.6.0",
"@babel/preset-env": "^7.6.0",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.6.0",
"@types/express": "^4.17.1",
"@types/next": "^8.0.6",
"babel-loader": "^8.0.6",
"ts-loader": "^6.1.0",
"ts-node": "^8.3.0",
"tslint": "^5.20.0",
"typescript": "^3.6.3",
"webpack": "^4.40.0",
"webpack-cli": "^3.3.8",
"webpack-dashboard": "^3.2.0",
"webpack-dev-server": "^3.8.0"
}
error
ERROR in ./node_modules/fork-ts-checker-webpack-plugin/lib/index.js
Module not found: Error: Can't resolve 'child_process' in '/home/xxxxxxxxxxxxxx/Desktop/xxxxxxxxxxxxx/node_modules/fork-ts-checker-webpack-plugin/lib'
@ ./node_modules/fork-ts-checker-webpack-plugin/lib/index.js 4:21-45
@ ./node_modules/next/dist/build/output/index.js
@ ./node_modules/next/dist/server/next-dev-server.js
@ ./node_modules/next/dist/server/next.js
@ ./server/server.ts
ERROR in ./node_modules/launch-editor/guess.js
Module not found: Error: Can't resolve 'child_process' in '/home/xxxxxxxxxxxxxx/Desktop/xxxxxxxxxxxxx/node_modules/launch-editor'
@ ./node_modules/launch-editor/guess.js 3:21-45
@ ./node_modules/launch-editor/index.js
@ ./node_modules/next/dist/server/lib/error-overlay-middleware.js
@ ./node_modules/next/dist/server/hot-reloader.js
@ ./node_modules/next/dist/server/next-dev-server.js
@ ./node_modules/next/dist/server/next.js
@ ./server/server.ts
ERROR in ./node_modules/launch-editor/index.js
Module not found: Error: Can't resolve 'child_process' in '/home/xxxxxxxxxxxxxx/Desktop/xxxxxxxxxxxxx/node_modules/launch-editor'
@ ./node_modules/launch-editor/index.js 15:21-45
@ ./node_modules/next/dist/server/lib/error-overlay-middleware.js
@ ./node_modules/next/dist/server/hot-reloader.js
@ ./node_modules/next/dist/server/next-dev-server.js
@ ./node_modules/next/dist/server/next.js
@ ./server/server.ts
ERROR in ./node_modules/worker-farm/lib/fork.js
Module not found: Error: Can't resolve 'child_process' in '/home/xxxxxxxxxxxxxx/Desktop/xxxxxxxxxxxxx/node_modules/worker-farm/lib'
@ ./node_modules/worker-farm/lib/fork.js 3:21-45
@ ./node_modules/worker-farm/lib/farm.js
@ ./node_modules/worker-farm/lib/index.js
@ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
@ ./node_modules/terser-webpack-plugin/dist/index.js
@ ./node_modules/terser-webpack-plugin/dist/cjs.js
@ (webpack)/lib/WebpackOptionsDefaulter.js
@ (webpack)/lib/webpack.js
@ ./node_modules/autodll-webpack-plugin/lib/plugin.js
@ ./node_modules/autodll-webpack-plugin/lib/index.js
@ ./node_modules/next/dist/build/webpack/plugins/dll-import.js
@ ./node_modules/next/dist/build/webpack-config.js
@ ./node_modules/next/dist/server/hot-reloader.js
@ ./node_modules/next/dist/server/next-dev-server.js
@ ./node_modules/next/dist/server/next.js
@ ./server/server.ts
ERROR in ./node_modules/autodll-webpack-plugin/lib/utils/fs.js
Module not found: Error: Can't resolve 'fs' in '/home/xxxxxxxxxxxxxx/Desktop/xxxxxxxxxxxxx/node_modules/autodll-webpack-plugin/lib/utils'
@ ./node_modules/autodll-webpack-plugin/lib/utils/fs.js 11:10-23
@ ./node_modules/autodll-webpack-plugin/lib/createHandleStats.js
@ ./node_modules/autodll-webpack-plugin/lib/plugin.js
@ ./node_modules/autodll-webpack-plugin/lib/index.js
@ ./node_modules/next/dist/build/webpack/plugins/dll-import.js
@ ./node_modules/next/dist/build/webpack-config.js
@ ./node_modules/next/dist/server/hot-reloader.js
@ ./node_modules/next/dist/server/next-dev-server.js
@ ./node_modules/next/dist/server/next.js
@ ./server/server.ts
ERROR in ./node_modules/cacache/get.js
Module not found: Error: Can't resolve 'fs' in '/home/xxxxxxxxxxxxxx/Desktop/xxxxxxxxxxxxx/node_modules/cacache'
@ ./node_modules/cacache/get.js 6:11-24
@ ./node_modules/cacache/locales/en.js
@ ./node_modules/cacache/index.js
@ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
@ ./node_modules/terser-webpack-plugin/dist/index.js
@ ./node_modules/terser-webpack-plugin/dist/cjs.js
@ (webpack)/lib/WebpackOptionsDefaulter.js
@ (webpack)/lib/webpack.js
@ ./node_modules/autodll-webpack-plugin/lib/plugin.js
@ ./node_modules/autodll-webpack-plugin/lib/index.js
@ ./node_modules/next/dist/build/webpack/plugins/dll-import.js
@ ./node_modules/next/dist/build/webpack-config.js
@ ./node_modules/next/dist/server/hot-reloader.js
@ ./node_modules/next/dist/server/next-dev-server.js
@ ./node_modules/next/dist/server/next.js
@ ./server/server.ts
ERROR in ./node_modules/chokidar/index.js
Module not found: Error: Can't resolve 'fs' in '/home/xxxxxxxxxxxxxx/Desktop/xxxxxxxxxxxxx/node_modules/chokidar'
@ ./node_modules/chokidar/index.js 3:9-22
@ ./node_modules/next/node_modules/webpack/node_modules/watchpack/lib/DirectoryWatcher.js
@ ./node_modules/next/node_modules/webpack/node_modules/watchpack/lib/watcherManager.js
@ ./node_modules/next/node_modules/webpack/node_modules/watchpack/lib/watchpack.js
@ ./node_modules/next/node_modules/webpack/lib/node/NodeWatchFileSystem.js
@ ./node_modules/next/node_modules/webpack/lib/node/NodeEnvironmentPlugin.js
@ ./node_modules/next/node_modules/webpack/lib/webpack.js
@ ./node_modules/next/dist/server/hot-reloader.js
@ ./node_modules/next/dist/server/next-dev-server.js
@ ./node_modules/next/dist/server/next.js
@ ./server/server.ts
Respuesta #1
Te estás quedando sin determinar cómo se resuelven los módulos. Veo que tu biblioteca requiere el tiempo de ejecución de Nodejs, vamos a agregar moduleResolution a tu tsconfig.json, y agregar node_modules a la lista de exclusiones, se convertirá en lo siguiente:
{
"files": [
"server.ts"
],
"compilerOptions": {
"target": "ES2018",
"module": "commonjs",
"sourceMap": true,
"outDir": "./build",
"rootDir": "../",
"strict": true,
"moduleResolution": "node", /* New added line */
"esModuleInterop": true
},
"exclude": [
"node_modules",
]
}
