Pinning the image to the previous version still works:
FROM --platform=$BUILDPLATFORM node:22-alpine3.20@sha256:b64ced2e7cd0a4816699fe308ce6e8a08ccba463c757c00c14cd372e3d2c763e AS build
Log
#20 13.11 ReferenceError: require is not defined
#20 13.11 at file:///app/tailwind.config.js:39:11
#20 13.11 at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)
#20 13.11 at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47)
#20 13.11 at loadESMFromCJS (node:internal/modules/cjs/loader:1414:24)
#20 13.11 at Module._compile (node:internal/modules/cjs/loader:1547:5)
#20 13.11 at Object..js (node:internal/modules/cjs/loader:1677:16)
#20 13.11 at Module.load (node:internal/modules/cjs/loader:1318:32)
#20 13.11 at Function._load (node:internal/modules/cjs/loader:1128:12)
#20 13.11 at TracingChannel.traceSync (node:diagnostics_channel:322:14)
#20 13.11 at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
Originally created by @faberto on GitHub (Dec 5, 2024).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/7616
# Bug Report
The latest node image breaks the build.
Latest: ` docker.io/library/node:22-alpine3.20@sha256:96cc8323e25c8cc6ddcb8b965e135cfd57846e8003ec0d7bcec16c5fd5f6d39f`
Pinning the image to the previous version still works:
`FROM --platform=$BUILDPLATFORM node:22-alpine3.20@sha256:b64ced2e7cd0a4816699fe308ce6e8a08ccba463c757c00c14cd372e3d2c763e AS build`
# Log
```
#20 13.11 ReferenceError: require is not defined
#20 13.11 at file:///app/tailwind.config.js:39:11
#20 13.11 at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)
#20 13.11 at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47)
#20 13.11 at loadESMFromCJS (node:internal/modules/cjs/loader:1414:24)
#20 13.11 at Module._compile (node:internal/modules/cjs/loader:1547:5)
#20 13.11 at Object..js (node:internal/modules/cjs/loader:1677:16)
#20 13.11 at Module.load (node:internal/modules/cjs/loader:1318:32)
#20 13.11 at Function._load (node:internal/modules/cjs/loader:1128:12)
#20 13.11 at TracingChannel.traceSync (node:diagnostics_channel:322:14)
#20 13.11 at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
```
should this pinning be committed to main until it is fixed? ...as without this the builds are broken.
<!-- gh-comment-id:2521949232 -->
@mastoca commented on GitHub (Dec 6, 2024):
should this pinning be committed to main until it is fixed? ...as without this the builds are broken.
I was also facing same issue. And I looked for some explanation. Here is how it needs to be solved as I found from sources.
When configuring Tailwind CSS, especially in projects using ES Modules (like those built with Vite), it's recommended to use import instead of require. This is because require is part of CommonJS syntax, which can lead to compatibility issues when working with ES Modules.
Key Points:
If you're using a Vite project or any setup that supports ES Modules, you should use import for plugins. For example, instead of: plugins: [require('@tailwindcss/typography')]
You should write: import typography from '@tailwindcss/typography';
plugins: [typography]
Using import is the proper way to handle modules in ES Module environments, and it helps avoid errors related to module loading.
<!-- gh-comment-id:2523657174 -->
@ajikmr commented on GitHub (Dec 6, 2024):
I was also facing same issue. And I looked for some explanation. Here is how it needs to be solved as I found from sources.
**********
When configuring Tailwind CSS, especially in projects using ES Modules (like those built with Vite), it's recommended to use **import instead of require**. This is because require is part of CommonJS syntax, which can lead to compatibility issues when working with ES Modules.
Key Points:
If you're using a Vite project or any setup that supports ES Modules, you should use import for plugins. For example, instead of:
_plugins: [require('@tailwindcss/typography')]_
You should write:
_import typography from '@tailwindcss/typography';
plugins: [typography]_
Using import is the proper way to handle modules in ES Module environments, and it helps avoid errors related to module loading.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Originally created by @faberto on GitHub (Dec 5, 2024).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/7616
Bug Report
The latest node image breaks the build.
Latest:
docker.io/library/node:22-alpine3.20@sha256:96cc8323e25c8cc6ddcb8b965e135cfd57846e8003ec0d7bcec16c5fd5f6d39fPinning the image to the previous version still works:
FROM --platform=$BUILDPLATFORM node:22-alpine3.20@sha256:b64ced2e7cd0a4816699fe308ce6e8a08ccba463c757c00c14cd372e3d2c763e AS buildLog
@mastoca commented on GitHub (Dec 6, 2024):
should this pinning be committed to main until it is fixed? ...as without this the builds are broken.
@QR2020 commented on GitHub (Dec 6, 2024):
node:21 will work :)
@ajikmr commented on GitHub (Dec 6, 2024):
I was also facing same issue. And I looked for some explanation. Here is how it needs to be solved as I found from sources.
When configuring Tailwind CSS, especially in projects using ES Modules (like those built with Vite), it's recommended to use import instead of require. This is because require is part of CommonJS syntax, which can lead to compatibility issues when working with ES Modules.
Key Points:
If you're using a Vite project or any setup that supports ES Modules, you should use import for plugins. For example, instead of:
plugins: [require('@tailwindcss/typography')]
You should write:
import typography from '@tailwindcss/typography';
plugins: [typography]
Using import is the proper way to handle modules in ES Module environments, and it helps avoid errors related to module loading.
@tjbck commented on GitHub (Dec 6, 2024):
Fixed on dev.