reactjs - React 和 Docker - 未捕获的错误:找不到模块“react-player”
问题描述
在我的反应组件(Coffee.jsx)的顶部,我有这个导入:
import ReactPlayer from 'react-player';
'react-player' 包肯定已安装,存在于package.json
和node_modules/
.
我的代码在docker
容器内运行。每次我旋转容器时,就像这样:
docker-compose -f docker-compose-dev.yml up -d
我收到此错误:
./src/components/Coffees.jsx
Module not found: Can't resolve 'react-player' in '/usr/src/app/src/components'
这就是控制台向我展示的内容:
Brewing.jsx:22 Uncaught Error: Cannot find module 'react-player'
at webpackMissingModule (Brewing.jsx:22)
at Module../src/components/Coffees.jsx (Brewing.jsx:22)
at __webpack_require__ (bootstrap:781)
at fn (bootstrap:149)
at Module../src/App.jsx (Spotify.css:4)
at __webpack_require__ (bootstrap:781)
at fn (bootstrap:149)
at Module../src/index.js (spotify-auth.js:8)
at __webpack_require__ (bootstrap:781)
at fn (bootstrap:149)
at Object.0 (index.js:10)
at __webpack_require__ (bootstrap:781)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
docker-compose-dev.yml:
client:
build:
context: ./services/client
dockerfile: Dockerfile-dev
volumes:
- './services/client:/usr/src/app'
- '/usr/src/app/node_modules'
ports:
- 3000:3000
environment:
- NODE_ENV=development
- REACT_APP_WEB_SERVICE_URL=${REACT_APP_WEB_SERVICE_URL}
depends_on:
- web
Dockerfile-开发:
# base image
FROM node:11.12.0-alpine
# set working directory
WORKDIR /usr/src/app
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /usr/src/app/package.json
COPY package-lock.json /usr/src/app/package-lock.json
RUN npm ci
RUN npm install react-scripts@2.1.8 -g --silent
# start app
CMD ["npm", "start"]
文件夹结构:
services/
docker-compose-dev.yml
node_modules/
client/
Dockerfile-dev
package.json
package-lock.json
node_modules/
react-player/
临时修复:
修复此问题的黑客正在等待一段时间,以及在Coffee.jsx或Brewing.jsx中对我的代码进行的一些强制更改。
保存更改后的代码后,找到了包。
然后,当我停止容器并再次启动它们时,问题再次出现。我尝试在--build
之后使用标志up -d
,但无济于事。
这是怎么回事?我该如何解决?
更持久的修复:
从 docker-compose-dev.yml 中删除卷并重建后,如下所示:
#volumes:
#- './services/client:/usr/src/app'
#- '/usr/src/app/node_modules'
我仍然收到错误:
client_1 | > client@0.1.0 start /usr/src/app
client_1 | > react-scripts start
client_1 |
client_1 | Could not find a required file.
client_1 | Name: index.html
client_1 | Searched in: /usr/src/app/public
client_1 | npm ERR! code ELIFECYCLE
client_1 | npm ERR! errno 1
client_1 | npm ERR! client@0.1.0 start: `react-scripts start`
client_1 | npm ERR! Exit status 1
client_1 | npm ERR!
client_1 | npm ERR! Failed at the client@0.1.0 start script.
client_1 | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
client_1 |
client_1 | npm ERR! A complete log of this run can be found in:
client_1 | npm ERR! /root/.npm/_logs/2019-11-05T15_14_42_967Z-debug.log
然后它只有在我再次取消注释卷并运行带有卷的容器时才有效。解释原因的答案
a) 临时修复 b) 更永久的修复
将不胜感激。
解决方案
使用 docker 进行管理node_modules
是一件很痛苦的事情。关于如何Javascrip
使用 docker 运行应用程序的 stackoverflow 上有很多讨论。这是我的做法,
Dockerfile
FROM node:11.12.0-alpine
# first installed node_modules in cache and copy them to src folder
RUN mkdir /usr/src/cache
WORKDIR /usr/src/cache
COPY package.json .
RUN npm install -q
# now make a different directory for src code
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
# set path to run packages from node_modules
ENV NODE_PATH=/usr/src/app/node_modules/.bin
COPY . .
docker-compose.yaml
app:
build: .
image: app
container_name: services.app
volumes:
- .:/usr/src/app
ports:
- 3000:5000
# this will copy node_modules to src folder, otherwise node_modules will be wipeed out as we don't
# have the node_modules in the host machine
command: /usr/src/app/entrypoint.sh prod
我的entrypoint.sh
文件看起来像
#!/bin/bash
cp -r /usr/src/cache/node_modules/. /usr/src/app/node_modules/
exec npm start
所以,这里的基本思想是,当您构建图像时,您将存储node_modules
在路径中的某个位置,但是当您实际运行它时,您将其复制node_modules
并放置在应用程序文件夹中。这样,您的本地人node_modules
就不会与 docker 中的人发生冲突。
如果你想更快node_modules
,你可以添加。.dockerignore
COPY
推荐阅读
- xmpp - 响应解码失败,xmpp sasl 身份验证
- javascript - 为什么我的 jquery 输入验证不起作用?
- gatsby - Queryql-playground 可以全局安装在 Gatsby 中吗?
- opengl - GLSL 编译器会删除不必要的变量初始化吗?
- python - 将df写入csv时如何修复错误的数字格式?
- json - Splitting nested arrays as separate entities
- python - 如何重定向到 Django 中新创建的对象?
- java - android data binding error: cannot find symbol
- swift - 如何处理单元格中的多个文本字段并获取文本字段数据
- instance-variables - 实例变量和非静态成员的区别