Registry /
web-framework / build-plugin-ice-request
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
request
✓ import { request } from 'ice'
✗ import { request } from 'build-plugin-ice-request'
The `request` utility is exposed by the main 'ice' package after the plugin is configured, not directly from the plugin package.
useRequest
✓ import { useRequest } from 'ice'
✗ import { useRequest } from 'build-plugin-ice-request'
The `useRequest` hook is provided by the main 'ice' package for use in React components, not directly from the plugin package.
runApp
✓ import { runApp } from 'ice'
✗ const { runApp } = require('ice')
Ice.js applications are primarily ESM-first. Use ES Modules imports for `runApp` and other core utilities.
defineConfig
✓ import { defineConfig } from '@ice/app'
✗ import { defineConfig } from 'ice'
`defineConfig` for application-level configuration typically comes from `@ice/app`.
This quickstart demonstrates how to integrate `build-plugin-ice-request` into an Ice.js application, configure global request interceptors via `runApp`, and then utilize both the `useRequest` hook and the imperative `request` function within a component.
// build.json (or similar build configuration file)
// Make sure to add the plugin to your Ice.js build configuration.
// For older Ice.js versions, this is often in build.json:
/*
{
"plugins": [
"build-plugin-ice-request"
]
}
*/
// src/app.ts (or src/index.ts - global application entry point)
import { runApp, request, useRequest } from 'ice';
import React, { useEffect } from 'react';
// Configure the global request service within your Ice.js application
const appConfig = {
request: {
baseURL: '/api', // Example: All requests will be prefixed with /api
timeout: 5000, // Example: Request timeout of 5 seconds
interceptors: {
request: {
onConfig: (config) => {
console.log('Request interceptor (onConfig):', config.url);
// Example: Add an authorization token to all requests
const token = localStorage.getItem('authToken');
if (token) {
config.headers = { ...config.headers, Authorization: `Bearer ${token}` };
}
return config;
},
onError: (error) => {
console.error('Request interceptor (onError):', error.message);
return Promise.reject(error);
}
},
response: {
onConfig: (response) => {
console.log('Response interceptor (onConfig):', response.config.url, response.status);
return response;
},
onError: (error) => {
console.error('Response interceptor (onError):', error.response?.status, error.message);
// Example: Handle 401 Unauthorized errors globally
if (error.response?.status === 401) {
alert('Session expired. Please log in again.');
// window.location.href = '/login'; // Redirect to login page
}
return Promise.reject(error);
}
}
}
}
};
// Initialize the Ice.js application with the configured request service
runApp(appConfig);
// Example Component Usage (in a React component within your Ice.js app)
const DataDisplay = () => {
// Using the useRequest hook for automatic data fetching
const { loading, error, data, request: fetchData } = useRequest({
url: '/users',
method: 'GET',
manual: true // Set to true to manually trigger the request
});
useEffect(() => {
fetchData(); // Trigger the request on component mount
}, [fetchData]);
// Using the imperative request function
const postData = async () => {
try {
const result = await request('/posts', { method: 'POST', data: { title: 'New Post', content: '...' } });
console.log('Post successful:', result);
} catch (err) {
console.error('Post failed:', err);
}
};
if (loading) return <div>Loading user data...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div>
<h2>Users:</h2>
<pre>{JSON.stringify(data, null, 2)}</pre>
<button onClick={postData}>Create New Post</button>
</div>
);
};
export default DataDisplay; // Export for routing or direct use in an Ice.js app
Errors
Common errors & fixes
TypeError: (0 , ice__WEBPACK_IMPORTED_MODULE_1__.request) is not a function
The `build-plugin-ice-request` is not correctly configured or enabled in the build system, or `request` is imported from the wrong package.
fixVerify that `build-plugin-ice-request` is listed in your `build.json` (or equivalent Ice.js plugin configuration) and that `runApp` includes a `request` configuration block. Ensure `import { request } from 'ice';` is used. Property 'request' does not exist on type 'AppConfig'
TypeScript type definition mismatch, indicating either an outdated `@types/ice` package or a custom `AppConfig` interface that doesn't include the `request` property.
fixUpdate `@ice/app` and any related `@types` packages (e.g., `@types/ice`) to match your framework version. If using a custom type, ensure it extends or includes the `request` property.
AxiosError: Request failed with status code 404
Error: timeout of 5000ms exceeded
Incorrect `baseURL` or API endpoint configuration in `appConfig.request`, a problem with the backend service, or an excessively short timeout.
fixReview the `baseURL` in `appConfig.request` and the relative paths used in `request()` calls. Use request interceptors (`onConfig` for requests) to log the full request URL for debugging. Check your network tab for actual request URLs and server responses. Adjust `timeout` if network conditions require more time.
Audit
Dependencies
No dependency data recorded yet.