It looks like we can’t have our plasmic host on a separate repo… Any ideas on ways around this CORS issue?
https://plasmiccommunity.slack.com/archives/C0128PVPESU/p1646335433036479
can you describe your setup here?
• I’m trying to set this up in our Next.js codebase the houses our web app.
• I created the plasmic-host.tsx file inside pages
• Created the plasmic init file here:
import { initPlasmicLoader } from '@plasmicapp/loader-nextjs';
export const Plasmic = initPlasmicLoader({
projects: [
{
id: process.env.NEXT_PUBLIC_PLASMIC_PROJECT_ID!,
token: process.env.NEXT_PUBLIC_PLASMIC_API_TOKEN!,
},
],
// Fetches the latest revisions, whether or not they were unpublished!
// Disable for production to ensure you render only published changes.
preview: process.env.NODE_ENV !== 'production',
});
and this is what our next.config.js looks like
// @ts-check
const path = require('path');
const withPlugins = require('next-compose-plugins');
const withSvgr = require('@newhighsco/next-plugin-svgr');
const { createSecureHeaders } = require('next-secure-headers');
const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' });
const svgoConfig = require('./config/svgo');
const assetPrefix = '';
/**
* @see <https://nextjs.org/docs/basic-features/typescript#type-checking-nextconfigjs>
* @type {import('next/dist/next-server/server/config').NextConfig}
**/
const config = withPlugins(
[
withBundleAnalyzer,
/**
* When using Next.js image component (next/image), you will need to pass
* the `unoptimized` prop in order to load base URI images.
* @see <https://github.com/vercel/next.js/issues/18372>
*/
withSvgr,
],
{
typescript: {
// We only build in CircleCI to run a server for Cypress. Ignoring TS avoids redudant check and improves build speed.
ignoreBuildErrors: !!process.env.IS_CIRCLE_CI ? true : false,
},
eslint: {
// We lint during CI instead of builds.
ignoreDuringBuilds: true,
},
assetPrefix,
images: {
domains: [
'[air-dev.imgix.net](http://air-dev.imgix.net)',
'[d3nnj3ryr5n8uy.cloudfront.net](http://d3nnj3ryr5n8uy.cloudfront.net)',
'[media.graphcms.com](http://media.graphcms.com)',
'[images.ctfassets.net](http://images.ctfassets.net)',
'[via.placeholder.com](http://via.placeholder.com)',
'[downloads.ctfassets.net](http://downloads.ctfassets.net)',
'[air-marketing-assets.imgix.net](http://air-marketing-assets.imgix.net)',
],
},
exclude: path.resolve(__dirname, './public/assets/illustrations'),
// Exclude SVGs from `next-images`
fileExtensions: ['jpg', 'jpeg', 'png', 'gif', 'ico', 'webp', 'jp2'],
// SVGO config for `withSVGR`
svgrOptions: {
svgoConfig,
},
swcMinify: true,
compiler: {
styledComponents: true,
},
/** @see <https://nextjs.org/docs/api-reference/next.config.js/redirects> */
async redirects() {
return [
{
source: '/terms',
destination: '/legal/terms',
permanent: true,
},
{
source: '/privacy',
destination: '/legal/privacy',
permanent: true,
},
{
source: '/switch',
destination: '/comparison/cloud-storage-alternative',
permanent: true,
},
{
source: '/app',
destination: '<https://itunes.apple.com/app/apple-store/id1244558410>',
permanent: true,
},
{
source: '/blog/category',
destination: '/blog',
permanent: true,
},
{
source: '/jobs',
destination: '<https://apply.workable.com/air/>',
permanent: true,
},
{
source: '/jobs/:slug',
destination: '<https://apply.workable.com/air/:slug>',
permanent: true,
},
{
source: '/careers',
destination: '<https://apply.workable.com/air/>',
permanent: true,
},
{
source: '/careers/:slug',
destination: '<https://apply.workable.com/air/:slug>',
permanent: true,
},
{
source: '/blog/logos',
destination: '/logos',
permanent: true,
},
{
source: '/blog/logos/:slug',
destination: '/logos/:slug',
permanent: true,
},
{
source: '/blog/documentation-for-dummies-notion-templates-for-early-stage-startups',
destination: '/blog/documentation-made-easy-notion-templates-for-early-stage-startups',
permanent: true,
},
{
source: '/blog/documentation-for-dummies-operation',
destination: '/blog/documentation-made-easy-operations',
permanent: true,
},
{
source: '/blog/documentation-for-dummies-project-management',
destination: '/blog/documentation-made-easy-project-management',
permanent: true,
},
{
source: '/blog/documentation-for-dummies-product',
destination: '/blog/documentation-made-easy-product',
permanent: true,
},
{
source: '/blog/documentation-for-dummies-brand',
destination: '/blog/documentation-made-easy-brand',
permanent: true,
},
{
source: '/blog/documentation-for-dummies-hiring',
destination: '/blog/documentation-made-easy-hiring',
permanent: true,
},
{
source: '/blog/documentation-for-dummies-fundraising',
destination: '/blog/documentation-made-easy-fundraising',
permanent: true,
},
{
source: '/account',
destination: '/account/my-account',
permanent: true,
},
{
source: '/bookmarks',
destination: '/favorite-items',
permanent: true,
},
{
source: '/favorite-asset',
destination: '/favorite-items',
permanent: true,
},
{
source: '/favorite-boards',
destination: '/home',
permanent: true,
},
{
source: '/workspace-boards',
destination: '/home',
permanent: true,
},
{
source: '/blog/zoomexotic',
destination: '/blog/zoom-exotic',
permanent: true,
},
{
source: '/workspace',
destination: '/workspace/members',
permanent: true,
},
{
source: '/air-lift/download',
destination: '<https://github.com/AirLabsTeam/desktop-releases/releases/download/v0.5.8/Air-0.5.8.dmg>',
permanent: true,
},
{
source: '/import/drive',
destination: '/search/import/drive',
permanent: true,
},
{
source: '/import/box',
destination: '/search/import/box',
permanent: true,
},
{
source: '/import/dropbox',
destination: '/search/import/dropbox',
permanent: true,
},
{
source: '/search',
destination: '/library',
permanent: true,
},
];
},
async rewrites() {
return [
{
source: '/culture/:slug',
destination: '/blog/:slug',
},
];
},
async headers() {
return [
{
source: '/(.*)',
headers: createSecureHeaders({
frameGuard: false, // turn this off because we currently have customers embedding shared content
xssProtection: 'sanitize',
nosniff: 'nosniff',
noopen: false, // turn this off so we don't prevent auto-opening of assets from within the app
}),
},
];
},
},
);
module.exports = config;
I have a testing plasmic site setup here with the link to the host: https://studio.plasmic.app/projects/fjk5V5Hy3afYUj7AHGes2A
it looks like the cross-domain dom exception is caused by something trying to access window.top.Cypress… a snippet of the minimized code around where this is happening is:
if (c = b.environment,
d = b.isBot,
f = p[c],
g().init(f, {
api_host: "<https://mp-forwarder.air.inc>"
}),
o("init: stage - ".concat(c)),
!(0,
j.VCE)()) {
a.next = 8;
break
}
return (0,
h.D0)() ? [console.info](http://console.info)("Disabled Mixpanel because you're running Air locally") : (0,
i.US)() && [console.info](http://console.info)("Disabled Mixpanel because it's a Cypress run"),
g().disable(),
dunno if that means anything to you 
so the error may be thrown when the next.js page is attempting to render /plasmic-host
interesting, thanks this is a great lead!
I’ll look into it