Issue
I'm attempting to build a Docker image of a React+TypeScript+NodeJS application built with Webpack 2.0, but I get the following error
> [email protected] build /
> webpack -p --config configs/webpack.config.ts --env.build --env.sourceMap
{ isDev: false }
glob error { Error: EPERM: operation not permitted, scandir '/proc/1/map_files/55836c87b000-55836c897000'
errno: -1,
code: 'EPERM',
syscall: 'scandir',
path: '/proc/1/map_files/55836c87b000-55836c897000' }
Error: EPERM: operation not permitted, scandir '/proc/1/map_files/55836c87b000-55836c897000'
after running the following command
docker build -t frontend .
My package.json looks like this
"scripts": {
"clean": "rimraf build",
"build": "webpack -p --config configs/webpack.config.ts --env.build --env.sourceMap",
"dev": "webpack-dev-server --config configs/webpack.config.ts",
"dev:open": "webpack-dev-server --config configs/webpack.config.ts --open",
"lint": "tslint --project tsconfig.json && echo \"running stylelint\" &&./node_modules/stylelint/bin/stylelint.js \"src/**/*.scss\"",
"tsc": "tsc -p .",
"tsc:watch": "tsc -p . --noEmit -w",
"test": "jest --config jest.json",
"reinstall": "rm -rf node_modules && npm install",
"precommit": "npm run lint",
"prepush": "npm run lint & npm run tsc & npm run test",
"organize": "npm prune && npm dedupe && npm shrinkwrap --dev",
"deploy": "npm run build && npm run serve",
"serve": "NODE_ENV=production node server.ts"
},
"optionalDependencies": {
"fsevents": "*"
},
"dependencies": {
"@types/node": "^8.0.51",
"@types/prop-types": "^15.5.2",
"@types/react": "^16.0.22",
"@types/react-dom": "^16.0.3",
"@types/react-hot-loader": "^3.0.5",
"@types/react-redux": "^5.0.12",
"@types/react-router-dom": "^4.2.1",
"@types/react-router-redux": "^5.0.10",
"@types/redux": "^3.6.31",
"@types/webpack": "^3.8.1",
"@types/webpack-dev-server": "^2.9.2",
"@types/webpack-env": "^1.13.2",
"awesome-typescript-loader": "^3.3.0",
"axios": "^0.17.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.7",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"history": "^4.7.2",
"html-webpack-plugin": "^2.30.1",
"image-webpack-loader": "^3.4.2",
"morgan": "^1.9.0",
"node-sass": "^4.6.1",
"react": "^16.1.0",
"react-dom": "^16.1.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"stylelint": "^8.2.0",
"stylelint-config-standard": "^17.0.0",
"stylelint-webpack-plugin": "^0.9.0",
"ts-loader": "^3.1.1",
"ts-node": "^3.3.0",
"tslib": "^1.8.0",
"tslint": "^5.8.0",
"tslint-react": "^3.2.0",
"typescript": "^2.6.1",
"webpack": "^3.8.1"
},
"devDependencies": {
"@types/chai": "^4.0.4",
"@types/chai-as-promised": "7.1.0",
"@types/enzyme": "^3.1.4",
"@types/jest": "^21.1.6",
"babel-jest": "^21.2.0",
"webpack-dev-server": "^2.9.4",
"enzyme": "^3.1.1",
"husky": "^0.14.3",
"jest": "^21.2.1",
"jest-cli": "^21.2.1",
"react-test-renderer": "^16.1.0",
"ts-jest": "^21.2.1"
}
and my webpack.config.ts looks like this
const filePath = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const StyleLintPlugin = require('stylelint-webpack-plugin');
const PATHS = {
root: filePath.resolve(__dirname, '..'),
nodeModules: filePath.resolve(__dirname, '../node_modules'),
src: filePath.resolve(__dirname, '../src'),
build: filePath.resolve(__dirname, '../build'),
style: filePath.resolve(__dirname, '../src/style'),
images: filePath.resolve(__dirname, '../src/images')
};
const DEV_SERVER = {
historyApiFallback: true,
overlay: true,
stats: {
providedExports: false,
chunks: false,
hash: false,
version: false,
modules: false,
reasons: false,
children: false,
source: false,
errors: true,
errorDetails: true,
warnings: false,
publicPath: false
}
};
interface env {
build?: string;
sourceMap?: string;
awesome?: string;
}
module.exports = (env: env = {}) => {
const isBuild = !!env.build;
const isDev = !env.build;
const isSourceMap = !!env.sourceMap || isDev;
console.log({ isDev });
return {
cache: true,
devtool: isDev ? 'eval-source-map' : 'source-map',
devServer: DEV_SERVER,
context: PATHS.root,
entry: {
app: [
'./src/index.tsx',
],
},
output: {
path: PATHS.build,
filename: isDev ? '[name].js' : '[name].[hash].js',
publicPath: '/',
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
modules: ['src', 'node_modules'],
},
module: {
rules: [
{
test: /\.tsx?$/,
include: PATHS.src,
loader: (env.awesome ?
[
{
loader: 'awesome-typescript-loader',
options: {
transpileOnly: true,
useTranspileModule: false,
sourceMap: isSourceMap,
},
},
] : [
{
loader: 'ts-loader',
options: {
transpileOnly: true,
compilerOptions: {
'sourceMap': isSourceMap,
'target': isDev ? 'es2015' : 'es5',
'isolatedModules': true,
'noEmitOnError': false,
},
},
},
]
),
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.json$/,
include: [PATHS.src],
loader: { loader: 'json-loader' },
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader'
})
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader!sass-loader",
}),
},
{
test: /\.(jpe?g|png|gif|svg|ico)$/i,
loaders: [
'file-loader?hash=sha512&limit=1000&digest=hex&name=[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false'
]
}
],
},
plugins: [
StyleLintPlugin(),
new ExtractTextPlugin('style.css'),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(isDev ? 'development' : 'production'),
},
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: (module: any) => module.context && module.context.indexOf('node_modules') !== -1,
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
}),
...(isDev ? [
new webpack.NamedModulesPlugin(),
] : []),
...(isBuild ? [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
beautify: false,
compress: {
screw_ie8: true,
warnings: false
},
comments: false,
sourceMap: isSourceMap,
}),
new HtmlWebpackPlugin({
template: './index.html',
}),
] : []),
],
stats: {
providedExports: false,
chunks: false,
hash: false,
version: false,
timings: false,
modules: false,
reasons: true,
children: false,
source: false,
warnings: true,
publicPath: false
},
performance: {
hints: "warning"
}
};
};
and my Dockerfile looks like this
FROM node:latest
COPY package.json package.json
COPY npm-shrinkwrap.json npm-shrinkwrap.json
RUN npm install --production
COPY . .
EXPOSE 8080
RUN npm run deploy
and finally I have a .dockerignore
Dockerfile
.dockerignore
.gitignore
README.md
build
node_modules
As far as I can tell this is a permissions issue. Is there something I can do to change permissions? I'm not even sure what process fails.
Solution
The map_files directory is a representation of the files a process currently has memory mapped by the kernel. This info is also contained in the maps file in the same directory.
As these files are a representation of memory, they change frequently. If a process creates a directory listing and then processes the list, the files might not exist by the time the process gets to them.
If the build is reporting files in /proc, a search has likely started from the / directory in the container and is recursively searching everything on the filesystem.
Use a directory other than / as the WORKDIR in your Dockerfile
FROM node:latest
WORKDIR /app
COPY package.json npm-shrinkwrap.json /app/
RUN npm install --production
COPY . /app/
EXPOSE 8080
RUN npm run deploy
Answered By - Matt Answer Checked By - Marilyn (WPSolving Volunteer)