I started a new project (CRUD React express mysql), which use webpack+babel+gulp. When i build&run the project local works fine, but when I run it in docker I get a 500 error with `Error: Cannot find module '@babel/plugin-transform-flow-strip-types'
Any clue of what could be ?
The error:
Error: Cannot find module '@babel/plugin-transform-flow-strip-types'
Require stack:
- /root/server/node_modules/@babel/core/lib/config/files/plugins.js
- /root/server/node_modules/@babel/core/lib/config/files/index.js
- /root/server/node_modules/@babel/core/lib/index.js
- /root/server/node_modules/@babel/register/lib/worker/babel-core.js
- /root/server/node_modules/@babel/register/lib/worker/handle-message.js
- /root/server/node_modules/@babel/register/lib/worker-client.js
- /root/server/node_modules/@babel/register/lib/node.js
- /root/server/node_modules/@babel/register/lib/nodeWrapper.js
- /root/server/node_modules/@babel/register/lib/index.js
- /root/server/node_modules/express-react-views/index.js
- /root/server/server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at resolve (internal/modules/cjs/helpers.js:107:19)
at tryRequireResolve (/root/server/node_modules/@babel/core/lib/config/files/plugins.js:157:9)
at resolveStandardizedNameForRequire (/root/server/node_modules/@babel/core/lib/config/files/plugins.js:195:19)
at sync (/root/server/node_modules/@babel/core/lib/config/files/plugins.js:224:12)
at sync (/root/server/node_modules/gensync/index.js:182:19)
at /root/server/node_modules/gensync/index.js:210:24
at Generator.next (<anonymous>)
at resolvePlugin (/root/server/node_modules/@babel/core/lib/config/files/plugins.js:83:17)
at resolvePlugin.next (<anonymous>)
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
package.json
{
"name": "biografoimaginario",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"start": "node server.bundle.js",
"build": "webpack",
"dev": "nodemon ./server.js"
},
"author": "lucianomdangelo@gmail.com",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.20.0",
"compression": "^1.7.4",
"cookie-parser": "^1.4.6",
"cors": "^2.8.5",
"dotenv": "^16.0.1",
"ejs": "^3.1.8",
"express": "^4.18.1",
"express-react-views": "^0.11.0",
"express-session": "^1.17.3",
"jsonwebtoken": "^8.5.1",
"mysql": "^2.18.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/core": "^7.18.9",
"@babel/preset-env": "^7.18.9",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"del": "^7.0.0",
"fancy-log": "^2.0.0",
"gulp": "^4.0.2",
"gulp-zip": "^5.1.0",
"nodemon": "^2.0.19",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-node-externals": "^3.0.0",
"webpack-stream": "^7.0.0"
}
}
webpack.config.js
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: './server.js',
mode: 'production',
target: 'node',
externals: [nodeExternals()],
output: {
path: path.resolve(__dirname, '.'),
filename: 'server.bundle.js'
},
resolve: { extensions: ['.js', '.jsx'] },
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
};
gulpfile.js
const { src, dest, series, parallel } = require('gulp');
const del = require('del');
const fs = require('fs');
const zip = require('gulp-zip');
const log = require('fancy-log');
const webpack_stream = require('webpack-stream');
const webpack_config = require('./webpack.config.js');
var exec = require('child_process').exec;
const paths = {
prod_build: '../prod-build',
server_file_name: 'server.bundle.js',
react_src: '../client/build/**/*',
react_dist: '../prod-build/client/build',
zipped_file_name: 'biografoImaginario.zip'
};
function clean() {
log('removing the old files in the directory')
return del('../prod-build/**', {force:true});
}
function createProdBuildFolder() {
const dir = paths.prod_build;
log(`Creating the folder if not exist ${dir}`)
if(!fs.existsSync(dir)) {
fs.mkdirSync(dir);
log(' folder created:', dir);
}
return Promise.resolve('the value is ignored');
}
function buildReactCodeTask(cb) {
log('building React code into the directory')
return exec('cd ../client && npm run build', function (err, stdout, stderr) {
log(stdout);
log(stderr);
cb(err);
})
}
function copyReactCodeTask() {
log('copying React code into the directory')
return src(`${paths.react_src}`)
.pipe(dest(`${paths.react_dist}`));
}
function copyNodeJSCodeTask() {
log('building and copying server code into the directory')
return webpack_stream(webpack_config)
.pipe(dest(`${paths.prod_build}`))
}
function zippingTask() {
log('zipping the code ')
return src(`${paths.prod_build}/**`)
.pipe(zip(`${paths.zipped_file_name}`))
.pipe(dest(`${paths.prod_build}`))
}
exports.default = series(
clean,
createProdBuildFolder,
buildReactCodeTask,
parallel(copyReactCodeTask, copyNodeJSCodeTask),
zippingTask
);
Dockerfile
# FROM node:14 AS ui-build
# WORKDIR /usr/src/app
# COPY client/ ./client/
# RUN cd client && npm install && npm run build
FROM node:14 AS server-build
WORKDIR /root/
# COPY --from=ui-build /usr/src/app/client/build ./client/build
COPY server/package*.json ./server/
RUN cd server && npm install
COPY server/server.js ./server/
COPY server/config.js ./server/
COPY server/src/ ./server/src/
COPY server/routes/ ./server/routes/
COPY server/views/ ./server/views/
COPY .babelrc ./server/
EXPOSE 80
CMD ["node", "./server/server.js"]
and I build the docker image like:
docker build -t app-image .
docker run -d -p 3080:3080 --name app-container app-image