Docker build image - glob error { Error: EPERM: operation not permitted, scandir

Question

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.

Answer 1

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 /app/package.json
COPY npm-shrinkwrap.json /app/npm-shrinkwrap.json
RUN npm install --production
COPY . /app/
EXPOSE 8080

RUN npm run deploy