Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(readme): add webpack entry plugin usage #187

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 33 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,28 @@ Add the script tag to your `index.html`:

If you want to install the Chrome extension, follow the guide [here](https://github.com/aidenybai/react-scan/blob/main/CHROME_EXTENSION_GUIDE.md), or React Native support, see [here](https://github.com/aidenybai/react-scan/pull/23).

## API Reference
## CLI

If you don't have a local version of the site, you can use the CLI. This will spin up an isolated browser instance which you can interact or use React Scan with.

```bash
npx react-scan@latest http://localhost:3000
# you can technically scan ANY website on the web:
# npx react-scan@latest https://react.dev
```

You can add it to your existing dev process as well. Here's an example for Next.js:

```json
{
"scripts": {
"dev": "next dev",
"scan": "next dev & npx react-scan@latest localhost:3000"
}
}
```

## Programmatic Usage

If you need a programmatic API to debug further, install via NPM instead:

Expand All @@ -141,23 +162,19 @@ if (typeof window !== 'undefined') {

> Looking for [React Native](https://github.com/aidenybai/react-scan/pull/23)?

If you don't have a localv version of the site, you can use the CLI. This will spin up an isolated browser instance which you can interact or use React Scan with.
While some compile-time processes may introduce implicit module imports, these imports can occur even before your entry point. For example, react might be imported before your react-scan import statement. One approach to address this is to import react-scan using `webpack.EntryPlugin` like this:

```bash
npx react-scan@latest http://localhost:3000
# you can technically scan ANY website on the web:
# npx react-scan@latest https://react.dev
```

You can add it to your existing dev process as well. Here's an example for Next.js:
**webpack.config.js**

```json
{
"scripts": {
"dev": "next dev",
"scan": "next dev & npx react-scan@latest localhost:3000"
}
}
```js
const webpack = require('webpack');

/** @type {import('webpack').Configuration} */
module.exports = {
plugins: [
new webpack.EntryPlugin(__dirname, 'react-scan', { name: undefined }),
],
};
```

## API Reference
Expand Down