Проблема, когда я хочу докеризовать мой проект nextjs

У меня возникла проблема с докеризацией моего проекта nextjs (это библиотека для SSR ReactJS). Когда я попытался выполнить докер-сочинять свое приложение, на шаге 6/8 он не прошел. Очевидно, мой плагин flowtype плагин-преобразование-поток-полосы-типы не управляется процессом сборки. Этот плагин был добавлен в мой package.json и в мой файл .babelrc. Однако все было хорошо, когда я использую начало узла для запуска своего проекта или сборка узла для сборки моего проекта с помощью nextjs. Проблема связана с докером.

Вот мой Dockerfile ?

FROM node:10.13.0
RUN mkdir -p /website
COPY . /website
WORKDIR /website
RUN yarn install --production=true
RUN yarn run build
EXPOSE 3000 9229
CMD [ "yarn", "run", "start" ]

Вот мой docker-compose.yml ?

version: "3"
services:
    app:
        container_name: website
        build: .
        ports:
            - "3000:3000"
            - "9229:9229"

Вот мой файл .babelrc ?

{
    "presets": [
      "next/babel"
    ],
    "plugins": [
      "@babel/plugin-transform-flow-strip-types"
    ]
}

Вот вывод cli, когда я запускаю docker-compose ?

{ 
   Error: (client) ./pages/index.jsx
   Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
   Error: Cannot find module '@babel/plugin-transform-flow-strip-types' from '/website'
}

Вот мой package.json ?

{
  "name": "XXXXXXXX",
  "description": "XXXXXXXX",
  "version": "0.0.1",
  "repository": {
    "type": "git",
    "url": "XXXXXXXXXXXXXXXX.git"
  },
  "scripts": {
    "dev": "next -p 3000",
    "build": "next build",
    "start": "next start  -p 3000",
    "lint": "eslint . --ext .js --ext .jsx",
    "lint-fix": "eslint . --ext .js --ext .jsx --fix",
    "test": "jest --notify",
    "flow": "flow"
  },
  "dependencies": {
    "next": "^7.0.2",
    "react": "^16.6.1",
    "react-dom": "^16.6.1",
    "react-apollo": "^2.2.4",
    "apollo-boost": "^0.1.20",
    "graphql": "^14.0.2"
  },
  "devDependencies": {
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "eslint": "^5.8.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-flowtype": "^3.2.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.11.0",
    "flow-bin": "^0.85.0",
    "jest": "^23.6.0"
  }
}

Есть идеи, как исправить проблему?

Спасибо!

Можете ли вы добавить снимок экрана своей структуры каталогов, чтобы увидеть иерархию каталогов, которую вы используете?

Pranay Tripathi 13.11.2018 11:10

Не могли бы вы поделиться своим файлом package.json - поскольку вы используете RUN yarn install --production=true, я подозреваю, что @babel/plugin-transform-flow-strip-types объявлен в devDependencies.

steadweb 13.11.2018 11:28

@PranayTripathi Спасибо за ответ, вот моя иерархия каталогов: joxi.ru/ZrJlPPoi9dWL82

areuseriouus.eth 13.11.2018 14:44

@steadweb Спасибо, это хороший момент! Я обновил свой Dockerfile и удалил флаг производства, но проблема все еще не устранена. У тебя есть идея?

areuseriouus.eth 13.11.2018 14:44

Если @babel/plugin-transform-flow-strip-types объявлен в devDependencies, можете ли вы попробовать добавить его в dependencies, чтобы увидеть, решит ли он проблему? В идеале этого делать не следует, но, надеюсь, это должно установить зависимость обязательный.

steadweb 13.11.2018 15:12

@JonGiamp, можешь еще добавить package.json?

Pranay Tripathi 14.11.2018 12:31

@steadweb Я пробовал, но проблема не решалась: /

areuseriouus.eth 14.11.2018 12:41

@PranayTripathi Вот мой package.json pastebin.com/ux3B5DFy. Спасибо!

areuseriouus.eth 14.11.2018 12:42
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
8
347
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, вы зависите от неправильного пакета, вы зависите от версии babel 6.x для plugin-transform-flow-strip-types, тогда как в коде вам требуется версия babel 7.x.

Выполните следующую команду, чтобы зависеть от версии babel 7.x:

npm install --save-dev @babel/plugin-transform-flow-strip-types

Наконец, удалите старую версию из ваших зависимостей с помощью:

npm uninstall babel-plugin-transform-flow-strip-types

Большое спасибо, это отличное решение моей проблемы!

areuseriouus.eth 15.11.2018 18:00

Другие вопросы по теме