Как исправить Webpack: «Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов» при работе внутри контейнера?

Проблема:

Проблема в том, что в тот момент, когда мы запускаем Webpack в контейнере докеров, он не может найти «babel-loader» для анализа jsx, даже если мы устанавливаем модули узлов в контейнер.

Контекст:

У меня есть настройка docker-compose, где у меня есть набор контейнеров, включая веб-сайт, на котором я запускаю Express, который отображает веб-сайт React.

В текущей ситуации мы запускаем de docker-compose и запускаем Webpack на наших локальных машинах для разработки, файлы build.js отображаются в контейнере, а nodemon перезапускает сервер. Это работает.

Поскольку иногда к этому проекту присоединяются фрилансеры / новые члены команды, их локальные версии node / npm могут приводить к ошибкам при работе на локальном компьютере.

Вот почему мы хотим развернуть контейнер разработки, в котором мы запускаем Webpack и отображаем файлы сборки обратно на локальный компьютер и в контейнер веб-сайта.

Обратите внимание, что я не пытаюсь запустить webpack-dev-сервер, он должен просто прослушивать изменения в файлах src и выводить файлы сборки.

Попытки:

• Измените версию узла контейнера
• Обновлены модули узлов до последней версии
• Глобально установить webpack / babel в контейнер

Dockerfile-dev

###############################################################################
# Step 1 : Create a base image
#
FROM node:12.6 as base
WORKDIR /var/www

###############################################################################
# Step 2 : Create all files needed to run the app
#
FROM base as builder
ARG SSH_KEY

COPY ./ /var/www

RUN mkdir /root/.ssh/
RUN echo "$SSH_KEY" > /root/.ssh/id_rsa
RUN chmod 600 /root/.ssh/id_rsa

RUN ssh-keyscan gitlab.com > /root/.ssh/known_hosts

# configure the npm env
RUN npm set progress=false
RUN npm i --no-optional

###############################################################################
# Step 3 : Final image to export
#
FROM base

# Copy files from the build step
COPY --from=builder /var/www/ /var/www

CMD [ "npm", "run", "dev" ]

Запись для Docker-compose

  develop:
    build:
      context: './site'
      dockerfile: Dockerfile-dev
    image: 'boilerplate-develop'
    container_name: 'boilerplate-develop'
    env_file:
      - ./config/local/.env
    restart: 'unless-stopped'
    volumes:
      - ./site/src:/var/www/src

webpack.config.js

const path = require('path')
const nodeExternals = require('webpack-node-externals')
const {resolve, loaders, plugins,} = require('./webpack/common.config')

const PROD = process.argv.indexOf(`-p`) > 0

const getModule = type => ({
    rules: [
        {
            test: /\.js|jsx?$/,
            exclude: /(node_modules|bower_components|www\/)/,
            use: {
                loader: `babel-loader`,
                options: {
                    babelrc: false,
                    configFile: false,
                    presets: [
                        [
                          '@babel/preset-env',
                          {
                            forceAllTransforms: PROD,
                            modules: false,
                            useBuiltIns: false,
                            debug: false,
                          },
                        ],
                        ['@babel/preset-react', { development: !PROD }],
                    ],
                    plugins: [
                        "@babel/plugin-transform-async-to-generator",
                        "@babel/plugin-proposal-class-properties",
                        "@babel/plugin-transform-destructuring",
                        "@babel/plugin-proposal-object-rest-spread",
                        "@babel/plugin-transform-runtime",
                        ...(!PROD ? [] : ['@babel/transform-react-inline-elements']),
                        ...(!PROD ? [] : ['transform-react-remove-prop-types']),
                        [
                            "module-resolver",
                            {
                                "alias": {
                                    "_scrollPercentage": [
                                        "./src/components/vendor/react-scroll-percentage/react-scroll-percentage.esm.js"
                                    ],
                                    "_components": ["./src/components/components.js"],
                                    "_actionTypes": ["./src/redux/actionTypes.js"],
                                    "_routes": ["./src/components/views/routes.js"],
                                    "_utils": ["./src/utils/utils.js"],
                                    "_view": ["./src/components/views/View.jsx"]
                                }
                            }
                        ]
                    ]
                }
            },
        },
        ...loaders[type],
    ],
})

const client = {
    entry: {
        "js/bundle": [`whatwg-fetch`, `core-js/features/promise`, `./src/client.jsx`,],
        "js/intro": `./src/intro.js`,
        serviceWorker: `./src/service-worker.js`,
    },
    output: {
        path: path.join(__dirname, `src`, `static`),
        filename: PROD ? `[name].[chunkhash].min.js` : `[name].js`,
    },
    resolve,
    module: getModule(`client`),
    plugins: plugins.client,
    stats: 'verbose'
}

const server = {
    target: `node`,
    node: {
        __dirname: false,
    },
    externals: [
        nodeExternals({
            modulesFromFile: true,
        }),
    ],
    entry: {
        js: `./src/server.js`,
    },
    output: {
        path: path.join(__dirname, `src/server/build`),
        filename: PROD ? `server.min.js` : `server.js`,
        libraryTarget: `commonjs2`,
    },
    resolve,
    module: getModule(`client`),
    plugins: plugins.server,
}

module.exports = [client, server,]

Ошибка:

boilerplate-develop |     ERROR in ./src/client.jsx 37:4
boilerplate-develop |     Module parse failed: Unexpected token (37:4)
boilerplate-develop |     You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
boilerplate-develop |     |
boilerplate-develop |     | const Client = props => (
boilerplate-develop |     >     <Provider store={store}>
boilerplate-develop |     |         <Router history={history}>
boilerplate-develop |     |             <App {...props} history={history} />
boilerplate-develop |      @ multi whatwg-fetch core-js/features/promise ./src/client.jsx js/bundle[2]