Почему мое приложение не нашло "html-загрузчик", когда я его установил?

Question

Информация

У меня есть приложение (actjs), которое работает с docker, оно использует веб-пакет, но при запуске вылетает, говоря, что html-loader не может быть решена. Я установил его, но когда я перезапустил Docker, он продолжает это говорить.

Сообщение об ошибке

Html Webpack Plugin:
  Error: Child compilation failed:
  Entry module not found: Error: Can't resolve 'html-loader' in '/usr/src/app/client':
  Error: Can't resolve 'html-loader' in '/usr/src/app/client'

  - compiler.js:153 childCompiler.runAsChild
    [client]/[html-webpack-plugin]/lib/compiler.js:153:18

  - Compiler.js:306 compile
    [client]/[webpack]/lib/Compiler.js:306:11

  - Compiler.js:631 hooks.afterCompile.callAsync.err
    [client]/[webpack]/lib/Compiler.js:631:15


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [client]/[tapable]/lib/Hook.js:154:20

  - Compiler.js:628 compilation.seal.err
    [client]/[webpack]/lib/Compiler.js:628:31


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [client]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1329 hooks.optimizeAssets.callAsync.err
    [client]/[webpack]/lib/Compilation.js:1329:35

package.json

{
  "name": "client",
  "version": "1.1.0",
  "private": true,
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "autosuggest-highlight": "^3.1.1",
    "axios": "^0.18.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "body-parser": "^1.18.3",
    "css-loader": "^2.1.0",
    "d3": "^5.5.0",
    "email-validator": "^2.0.4",
    "file-loader": "^3.0.1",
    "history": "^4.7.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "js-file-download": "^0.4.4",
    "path": "^0.12.7",
    "react": "^16.4.1",
    "react-autosuggest": "^9.4.0",
    "react-cookie": "^3.0.4",
    "react-dnd": "^5.0.0",
    "react-dnd-html5-backend": "^5.0.1",
    "react-dom": "^16.4.1",
    "react-dropdown": "^1.6.2",
    "react-phone-number-input": "^2.2.15",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.0.0",
    "reactstrap": "^6.3.1",
    "save-svg-as-png": "^1.4.7",
    "style-loader": "^0.23.1",
    "text-loader": "0.0.1",
    "topojson-client": "^3.0.0",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-transform-runtime",
      "@babel/plugin-proposal-class-properties"
    ]
  },
  "scripts": {
    "start": "npm run client",
    "client": "webpack-dev-server --config ./webpack.config.js --mode development --host 0.0.0.0",
    "build": "webpack --mode production",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "webpack-dev-server": "^3.2.1"
  }
}

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(png|jpg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]'
          }
        }
      },
        {
        // Transform our own .css files with PostCSS and CSS-modules
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],
      }, {
        // Do not transform vendor's CSS with CSS-modules
        // The point is that they remain in global scope.
        // Since we require these CSS files in our JS or CSS files,
        // they will be a part of our compilation either way.
        // So, no need for ExtractTextPlugin here.
        test: /\.css$/,
        include: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.html$/,
        use: ["html-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    }),
    new webpack.DefinePlugin({
      'process.env': {
        SERVER_URL: JSON.stringify(process.env.SERVER_URL)
      },
    })
  ],
  externals: ["fs"],
  "output": {
    filename: '[name].[hash].js'
  }
};

Docker

У меня в приложении есть серверная и клиентская части, для этого я удаляю серверную часть, поэтому у нас есть Dockerfile для клиента в services / client / и файл docker-compose в основном проекте.

Dockerfile - клиент

# base image
FROM node:11.6.0-alpine

# set working directory
WORKDIR /usr/src/app/client

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/client/app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /usr/src/app/client/package.json
RUN npm install --silent && \
npm install --silent webpack-dev-server

# start app
CMD ["npm", "start"]

docker-compose.yml - основной проект

version: '3.7'

services:

  client:
    container_name: client
    build:
      context: ./services/client
      dockerfile: Dockerfile
    volumes:
      - ./services/client:/usr/src/app/client
      - /usr/src/app/client/node_modules
    ports:
      - 8080:8080
    environment:
      - SERVER_URL=http://localhost:5001
    depends_on:
      - server

  nginx:
    container_name: nginx
    build:
      context: ./services/nginx
      dockerfile: Dockerfile
    restart: unless-stopped
    ports:
      - "80:80"
    depends_on:
      - client

Я не нашел так много вещей, сначала я подумал, что что-то забыл, например, модуль, но, похоже, это не так. Мне нужна помощь.

Обновление

На самом деле я пытаюсь протестировать локально, но у меня возникла проблема, возможно, это может помочь.

Ошибка при запуске локально (npm start)

internal/modules/cjs/loader.js:596
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
    at Function.Module._load (internal/modules/cjs/loader.js:520:25)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> ($path-to-project/services/client/node_modules/webpack-dev-server/bin/webpack-dev-server.js:77:1)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@1.1.0 client: `webpack-dev-server --config ./webpack.config.js --mode development --host 0.0.0.0`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the client@1.1.0 client script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2019-04-24T14_05_19_879Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@1.1.0 start: `npm run client`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the client@1.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2019-04-24T14_05_19_917Z-debug.log

Обновление 2

Мне удалось запустить приложение на локальном компьютере и, кажется, работает. Я удалил папку node_modules/ и package-lock.json, и я сначала установил webpack, а после всего package.json.
Даже если он работает локально, в докере, он не работает.

Answer 1

Ваша volumes: декларация вызывает это.

Вы заставляете вещи работать снова, если попадаете в эту ситуацию, запуская:

docker-compose stop client
docker-compose rm client
docker-compose up --build

... но обратите внимание, что это точнонабор команд, которые вам нужно будет выполнить, если у вас нет проблемного объявления volumes:.

Ваш файл docker-compose.yml сообщает Docker:

volumes:
  # This directory contains data that needs to be injected from
  # and/or persisted to the host.  Hide anything that's in the
  # image and use this host directory instead.
  - ./services/client:/usr/src/app/client

  # This directory also contains data that needs to be persisted
  # across container runs.  Hide anything that's in the volume or
  # the previous bind mount and use data in this volume instead.
  # ONLY THE FIRST TIME this container gets run, copy data from
  # the image into this volume.
  - /usr/src/app/client/node_modules

Вы должны быть в состояниичтобы создать обычный файл Dockerfile и docker-compose.yml, чтобы проиллюстрировать это.npm init тривиальная программа и ее запуск.Если вы запустите, скажем, docker-compose run client sh, вы увидите, что каталог node_modules соответствует тому, что находится в текущей среде сборки.Если вы затем yarn add что-нибудь, хотя, даже если вы перестроите образ, том node_modules не будет обновлен: вы сказали Docker, что он содержит постоянные данные, и он будет заполняться только в том случае, если он пустой.

(Обратное следствие этого заключается в том, что если вы используете docker-compose run, чтобы получить подобную оболочку и вручную отредактировать что-то в своем каталоге node_modules, потому что вы просили сохранить этот каталог отдельно отобраз, он переживет временный контейнер, который он запускает.)

Рабочий процесс, который в целом работал для меня, - это использование Node непосредственно на хосте для активной разработки (и динамической перезагрузки и хорошей поддержки IDE и ...) и использовать Docker (создание образа, а не внедрение кода через тома) для рабочих развертываний.