When starting the web locally, encountering the "Fatal JavaScript invalid size error 169220804" during the run build process.

qizhiyuan commented 5 months ago

Self Checks

[X] This is only for bug report, if you would like to ask a question, please head to Discussions.
[X] I have searched for existing issues search for existing issues, including closed ones.
[X] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
[X] Please do not modify this template :) and fill in all the required fields.

Dify version

0.6.9

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

532DA239-97C9-48A6-8309-A76715683F19

✔️ Expected Behavior

build success

❌ Actual Behavior

Fatal JavaScript invalid size error 169220804

dosubot[bot] commented 5 months ago

Hey @qizhiyuan! I'm here to assist you with bug solving, answering questions, and contributing while you wait for a human maintainer. Let's tackle this challenge together!

To resolve the "Fatal JavaScript invalid size error 169220804" during the Next.js build process, ensure you are using a compatible Node.js version. The project requires Node.js version >=18.17.0. Although you are using Node.js version 20.6.1, which is higher, there might be specific issues with this newer version. Try downgrading to Node.js version 18.17.0 to see if it resolves the issue.

Here’s how to switch to Node.js version 18.17.0 using nvm (Node Version Manager):

Install nvm if you haven't already:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

Install Node.js version 18.17.0:
```
nvm install 18.17.0
```
Use Node.js version 18.17.0:
```
nvm use 18.17.0
```
Verify the Node.js version:
```
node -v
```
Re-run your Next.js build process:
```
npm run build
```

This should help resolve the error if it is related to Node.js version compatibility ^[1].

To continue talking to Dosu, mention @dosu.

qizhiyuan commented 5 months ago

I have tried versions 18.17.0 and 18.17.1, but the same issue persists.

dosubot[bot] commented 5 months ago

If downgrading Node.js didn't resolve the issue, let's try a few more steps to troubleshoot and potentially resolve the "Fatal JavaScript invalid size error 169220804":

Clear npm cache:
```
npm cache clean --force
```
Delete node_modules and package-lock.json:
```
rm -rf node_modules package-lock.json
```
Reinstall dependencies:
```
npm install
```
Ensure Docker is using the correct Node.js version: Make sure your Dockerfile specifies the correct Node.js version. For example:
```
FROM node:18.17.0
```
Check for any known issues with dependencies: Sometimes specific versions of dependencies can cause issues. Ensure all dependencies are up-to-date and check if there are any known issues with the versions you are using.
Increase memory limit for Node.js: Sometimes build processes can fail due to memory limits. You can try increasing the memory limit:
```
NODE_OPTIONS="--max-old-space-size=4096" npm run build
```

If the issue persists after these steps, you may need to look into specific dependencies or configurations that could be causing the problem ^[1].

To continue talking to Dosu, mention @dosu.

qizhiyuan commented 5 months ago

Following the steps above, I have allocated enough memory to the node, and even tried larger allocations, but still cannot solve this issue; could it be some problems with the dependencies such as the version of "next", or maybe there are issues with the webpack configuration?

dosubot[bot] commented 5 months ago

To address the "Fatal JavaScript invalid size error 169220804" during the Next.js 14.2.3 production build, despite increasing the memory limit, consider the following steps:

Check Dependencies: Ensure that all dependencies are compatible with Next.js 14.2.3. Sometimes, specific versions of dependencies can cause issues. Here are the dependencies listed in the package.json for the Dify project:

"dependencies": {
 "@babel/runtime": "^7.22.3",
 "@dagrejs/dagre": "^1.1.2",
 "@emoji-mart/data": "^1.1.2",
 "@floating-ui/react": "^0.25.2",
 "@formatjs/intl-localematcher": "^0.5.4",
 "@headlessui/react": "^1.7.13",
 "@heroicons/react": "^2.0.16",
 "@hookform/resolvers": "^3.3.4",
 "@lexical/react": "^0.12.2",
 "@mdx-js/loader": "^2.3.0",
 "@mdx-js/react": "^2.3.0",
 "@monaco-editor/react": "^4.6.0",
 "@next/mdx": "^14.0.4",
 "@sentry/react": "^7.54.0",
 "@sentry/utils": "^7.54.0",
 "@tailwindcss/line-clamp": "^0.4.4",
 "@tailwindcss/typography": "^0.5.9",
 "ahooks": "^3.7.5",
 "classnames": "^2.3.2",
 "copy-to-clipboard": "^3.3.3",
 "crypto-js": "^4.2.0",
 "dayjs": "^1.11.7",
 "echarts": "^5.4.1",
 "echarts-for-react": "^3.0.2",
 "emoji-mart": "^5.5.2",
 "i18next": "^22.4.13",
 "i18next-resources-to-backend": "^1.1.3",
 "immer": "^9.0.19",
 "js-audio-recorder": "^1.0.7",
 "js-cookie": "^3.0.1",
 "katex": "^0.16.10",
 "lamejs": "^1.2.1",
 "lexical": "^0.12.2",
 "lodash-es": "^4.17.21",
 "mermaid": "10.4.0",
 "negotiator": "^0.6.3",
 "next": "^14.0.4",
 "next-nprogress-bar": "^2.3.8",
 "qrcode.react": "^3.1.0",
 "qs": "^6.11.1",
 "rc-textarea": "^1.5.2",
 "react": "~18.2.0",
 "react-18-input-autosize": "^3.0.0",
 "react-dom": "~18.2.0",
 "react-error-boundary": "^4.0.2",
 "react-headless-pagination": "^1.1.4",
 "react-hook-form": "^7.51.4",
 "react-i18next": "^12.2.0",
 "react-infinite-scroll-component": "^6.1.0",
 "react-markdown": "^8.0.6",
 "react-multi-email": "^1.0.14",
 "react-papaparse": "^4.1.0",
 "react-slider": "^2.0.4",
 "react-sortablejs": "^6.1.4",
 "react-syntax-highlighter": "^15.5.0",
 "react-tooltip": "5.8.3",
 "react-window": "^1.8.9",
 "react-window-infinite-loader": "^1.0.9",
 "reactflow": "^11.11.3",
 "recordrtc": "^5.6.2",
 "rehype-katex": "^6.0.2",
 "remark-breaks": "^3.0.2",
 "remark-gfm": "^3.0.1",
 "remark-math": "^5.1.1",
 "scheduler": "^0.23.0",
 "server-only": "^0.0.1",
 "sharp": "^0.33.2",
 "sortablejs": "^1.15.0",
 "swr": "^2.1.0",
 "use-context-selector": "^1.4.1",
 "uuid": "^9.0.1",
 "zod": "^3.23.6",
 "zustand": "^4.5.1"
},
"devDependencies": {
 "@antfu/eslint-config": "^0.36.0",
 "@faker-js/faker": "^7.6.0",
 "@rgrove/parse-xml": "^4.1.0",
 "@types/crypto-js": "^4.1.1",
 "@types/dagre": "^0.7.52",
 "@types/js-cookie": "^3.0.3",
 "@types/lodash-es": "^4.17.7",
 "@types/negotiator": "^0.6.1",
 "@types/node": "18.15.0",
 "@types/qs": "^6.9.7",
 "@types/react": "~18.2.0",
 "@types/react-dom": "~18.2.0",
 "@types/react-slider": "^1.3.1",
 "@types/react-syntax-highlighter": "^15.5.6",
 "@types/react-window": "^1.8.5",
 "@types/react-window-infinite-loader": "^1.0.6",
 "@types/recordrtc": "^5.6.11",
 "@types/sortablejs": "^1.15.1",
 "@types/uuid": "^9.0.8",
 "autoprefixer": "^10.4.14",
 "code-inspector-plugin": "^0.13.0",
 "cross-env": "^7.0.3",
 "eslint": "^8.36.0",
 "eslint-config-next": "^14.0.4",
 "husky": "^8.0.3",
 "lint-staged": "^13.2.2",
 "postcss": "^8.4.31",
 "sass": "^1.61.0",
 "tailwindcss": "^3.3.3",
 "typescript": "4.9.5",
 "uglify-js": "^3.17.4"
}

Ensure that these dependencies are compatible with each other and with Next.js 14.2.3 ^[1]^[2].

Custom Webpack Configurations: Check if there are any custom webpack configurations or plugins that might be affecting the build process. Custom configurations can sometimes lead to memory issues. If you have custom webpack configurations, try simplifying them or removing unnecessary plugins to see if it resolves the issue.
Environment Configurations: Ensure that the environment configurations are optimized for large builds. For example, setting the NEXT_PUBLIC_DEPLOY_ENV to PRODUCTION and configuring the NEXT_PUBLIC_API_PREFIX and NEXT_PUBLIC_PUBLIC_API_PREFIX correctly can help optimize the build process ^[3]^[4].
Optimize Build Process:
- Code Splitting: Ensure that your application is using code splitting to reduce the size of the bundles.
- Tree Shaking: Make sure that unused code is being removed during the build process.
- Analyze Bundle Size: Use tools like webpack-bundle-analyzer to analyze the bundle size and identify large modules that can be optimized.
Use a Different Base Image: If you are using Docker, try using a different base image. Sometimes, issues can arise from the specific Node.js version or the base image used. For example, switching from an Alpine-based image to a Debian-based image might help.

If these steps do not resolve the issue, you may need to investigate further into specific dependencies or configurations that could be causing the problem.

To continue talking to Dosu, mention @dosu.

qizhiyuan commented 5 months ago

How to configure the local env.local.

dosubot[bot] commented 5 months ago

To configure the env.local file for optimizing the environment settings for the Next.js 14.2.3 production build process, you should set the NEXT_PUBLIC_DEPLOY_ENV, NEXT_PUBLIC_API_PREFIX, and NEXT_PUBLIC_PUBLIC_API_PREFIX environment variables. Here is an example configuration:

NEXT_PUBLIC_DEPLOY_ENV=PRODUCTION
NEXT_PUBLIC_API_PREFIX=http://localhost:5001/console/api
NEXT_PUBLIC_PUBLIC_API_PREFIX=http://localhost:5001/api

This configuration ensures that the apiPrefix and publicApiPrefix are correctly set during the build process:

if (process.env.NEXT_PUBLIC_API_PREFIX && process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX) {
  apiPrefix = process.env.NEXT_PUBLIC_API_PREFIX
  publicApiPrefix = process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX
}

Additionally, you can dynamically set these environment variables using other environment variables like DEPLOY_ENV, CONSOLE_API_URL, and APP_API_URL. Here is an example of how you might configure these in a Docker environment:

export NEXT_PUBLIC_DEPLOY_ENV=${DEPLOY_ENV}
export NEXT_PUBLIC_API_PREFIX=${CONSOLE_API_URL}/console/api
export NEXT_PUBLIC_PUBLIC_API_PREFIX=${APP_API_URL}/api

This approach allows for more flexibility and ensures that the environment variables are correctly set based on the deployment context ^[1]^[2]^[3].

To continue talking to Dosu, mention @dosu.

crazywoola commented 5 months ago

How to configure the local env.local.

cp .env.example .env.local. But I think there is something wrong with you local machine. You can ignore the bot's reply except this one https://github.com/langgenius/dify/issues/4994#issuecomment-2151560523.

lzwaiwai commented 5 months ago

install with yarn

langgenius / dify