Compilation and Runtime Issues

This page collects common issues and solutions encountered during uni-app project compilation and runtime.

Compilation Errors

Q: "Cannot find module" error during compilation

Problem Description: Module not found error when compiling the project.

Solutions:

1. Ensure related dependencies are installed: npm install
2. Check if the module is included in package.json
3. Try installing the module separately: npm install module-name
4. Delete node_modules folder and package-lock.json, then re-run npm install

Q: Syntax error during compilation

Problem Description: JavaScript or Vue syntax errors during compilation.

Solutions:

1. Locate the specific code line based on error message
2. Check code syntax, especially matching brackets, quotes, semicolons
3. Check if ES6+ syntax needs transformation, ensure babel configuration is correct
4. Use ESLint or other tools to check code standards

Q: SCSS/LESS compilation errors

Problem Description: Compilation errors when using SCSS or LESS.

Solutions:

1. Ensure related preprocessor dependencies are installed: npm install sass sass-loader --save-dev or npm install less less-loader --save-dev
2. Check if syntax is correct, especially nesting rules and variable usage
3. Check if preprocessor loader is correctly configured in webpack configuration
4. Try using simpler syntax to gradually isolate the problem

Q: TypeScript compilation errors

Problem Description: Type checking errors when using TypeScript.

Solutions:

1. Check if tsconfig.json configuration is correct
2. Ensure type definitions are correct, may need to add type declaration files
3. Use // @ts-ignore to temporarily ignore type checking for specific lines (not recommended as long-term solution)
4. Update TypeScript version and related dependencies

Runtime Errors

Q: White screen during runtime

Problem Description: Application shows white screen with no content after running.

Solutions:

1. Check console for error messages
2. Check if network requests are normal, check for CORS issues
3. Check if entry file and main component are loaded correctly
4. Try adding console.log debugging in onLoad or created lifecycle

Q: Page navigation not working

Problem Description: Clicking buttons or links doesn't navigate to other pages normally.

Solutions:

1. Check if target page is correctly configured in pages.json
2. Check if navigation path is correct, pay attention to case sensitivity
3. Check if correct navigation API is used (e.g., uni.navigateTo, uni.redirectTo)
4. Check for code or plugins that intercept navigation

Q: Components not displaying

Problem Description: Some components on the page are not displaying normally.

Solutions:

1. Check if components are correctly registered and imported
2. Check if conditional rendering expressions are correct
3. Check component styles, may be covered by other elements
4. Check data binding, components may depend on certain data

Q: Styles not taking effect

Problem Description: Application CSS styles are not working as expected.

Solutions:

1. Check if selectors are correct, may be a priority issue
2. Check if platform-specific styles are used (e.g., styles that only work on H5)
3. Try using !important to increase style priority (use with caution)
4. Check if style isolation is enabled, may need to use global styles

Platform-Specific Issues

Q: WeChat Mini Program runtime failure

Problem Description: Project cannot run normally in WeChat Mini Program environment.

Solutions:

1. Check if WeChat Developer Tools version is compatible with the project
2. Check if APIs or components not supported by WeChat Mini Program are used
3. Check error messages in WeChat Developer Tools console
4. Check if WeChat Mini Program configuration in manifest.json is correct

Q: H5 runtime issues

Problem Description: Project has issues in H5 environment.

Solutions:

1. Check browser compatibility, try testing in different browsers
2. Check if APIs only available in Mini Program or App are used
3. Check if network requests have CORS issues
4. Check if H5 configuration in manifest.json is correct

Q: App crashes on device

Problem Description: Application crashes when running on real device.

Solutions:

1. Check if APIs requiring specific permissions are used (e.g., location, camera)
2. Ensure required permissions are correctly configured in manifest.json
3. Check if native plugins are compatible with current device
4. Use debug version to run and check detailed error logs

Hot Reload Issues

Q: Hot reload not working

Problem Description: Application doesn't auto-update after modifying and saving code.

Solutions:

1. Check if hot reload feature is enabled
2. Try manually refreshing the application
3. Check if file watching configuration is correct
4. Restart development server

Q: State lost after hot reload

Problem Description: Application state is reset after hot reload.

Solutions:

1. Use Vuex or other state management tools to save state
2. Store critical state in localStorage or other persistent storage
3. Understand how hot reload works, state loss is normal in some cases

Build Optimization Issues

Q: Slow compilation speed

Problem Description: Project compilation takes a very long time.

Solutions:

1. Reduce project dependencies and unnecessary components
2. Configure webpack caching
3. Use faster package managers like yarn or pnpm
4. Upgrade hardware, especially use SSD and increase memory

Q: Bundle size too large

Problem Description: Compiled application size is too large.

Solutions:

1. Use production mode build: npm run build
2. Configure webpack code splitting and lazy loading
3. Optimize images and media resources, consider using CDN
4. Remove unused dependencies and code

Debugging Techniques

Effective Console Usage

1. Use console.log, console.error etc. to output debug information
2. Add logs in key lifecycle functions
3. Use conditional breakpoints for complex logic debugging
4. Utilize Vue Devtools to debug Vue components and state

Network Request Debugging

1. Use browser developer tools network panel to monitor requests
2. Add request and response interceptors to log detailed information
3. Use mock data for isolated testing
4. Check if request headers and parameter formats are correct

Performance Analysis

1. Use browser developer tools performance panel to analyze runtime performance
2. Identify and optimize time-consuming operations
3. Reduce unnecessary rendering and computation
4. Use asynchronous operations to avoid blocking main thread

Common Error Code Analysis

ERROR_TIMEOUT

Problem Description: Operation timeout.

Solutions:

1. Check if network connection is stable
2. Increase timeout setting
3. Optimize time-consuming operations
4. Add retry mechanism

ERROR_NETWORK_FAILURE

Problem Description: Network request failure.

Solutions:

1. Check network connection
2. Verify if API address is correct
3. Check server status
4. Add error handling and retry logic

If you cannot find a solution to your problem on this page, please check the uni-app official documentation or ask questions on the uni-app official forum.