box / box/box-content-preview

React is not defined: Using Explorer & Picker No React CDN with VueJS

Open
#1,322 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
120
Forks
137
Avg merge
12h 36m
Merged PRs (30d)
17

Description

**Environment:**
- Preview version: 11.0.2 (latest CDN version for Explorer and Picker)

**Desktop (please complete the following information):**
- OS: MacOS
- Browser: Chrome
- Version 88.0.4324.96 (Official Build) (x86_64)

**Steps to reproduce the problem:**
1. Set up VueJS project
2. Include following in index.html:
```

```
3. Vue component:
```
var contentExplorer = new Box.ContentExplorer();

// Show the content explorer
contentExplorer.show("0", ACCESS_TOKEN, {
container: ".preview-container",
});
```

**What is the expected behavior? (Screenshots can be helpful here)**
The explorer or picker renders in the component.

**What went wrong? (Screenshots, console logs, or HAR files can be helpful here)**
React is not rendering via the CDN although the specified CDN is meant to not contain React.

![Screen Shot 2021-01-27 at 9 01 42 PM](https://user-images.githubusercontent.com/14866363/106083924-eb361e80-60e2-11eb-91ce-21883f1a1e7d.png)

**Additional context**
Add any other context about the problem here.
Whatever is done for the Content Preview works wonderfully with VueJS. I see that they are on separate versions and projects so hopefully this is even the right place to post this issue. If there are other suggestions or places to get a solution to this please feel free to point me there and close this issue.

Contributor guide

Open the contributing guide

Research direction

Reproduce the problem from the index.html CDN includes and the Vue component setup, then inspect the browser console and compare the Explorer and Picker no.react bundles with the working Content Preview integration. Done means the Explorer or Picker renders in the Vue project without the reported React error; the issue does not identify a source file or test to update.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.