Skip to content

Commit ffb06b8

Browse files
CompuIvesCompuIves
committed
Fix showing transpiler errors
1 parent 95d72a4 commit ffb06b8

File tree

2 files changed

+129
-130
lines changed

2 files changed

+129
-130
lines changed

‎packages/app/src/sandbox/eval/transpilers/babel/worker/babel-worker.js‎

Lines changed: 129 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -523,154 +523,157 @@ self.addEventListener('message', async event => {
523523
if (type !== 'compile') {
524524
return;
525525
}
526+
try {
527+
const { disableCodeSandboxPlugins } = loaderOptions;
528+
529+
const babelUrl = babelTranspilerOptions && babelTranspilerOptions.babelURL;
530+
const babelEnvUrl =
531+
babelTranspilerOptions && babelTranspilerOptions.babelEnvURL;
532+
533+
if (babelUrl || babelEnvUrl) {
534+
loadCustomTranspiler(babelUrl, babelEnvUrl);
535+
} else if (version !== 7) {
536+
loadCustomTranspiler(
537+
process.env.NODE_ENV === 'development'
538+
? `${process.env.CODESANDBOX_HOST || ''}/static/js/babel.6.26.js`
539+
: `${process.env.CODESANDBOX_HOST || ''}/static/js/babel.6.26.min.js`
540+
);
541+
}
526542

527-
const { disableCodeSandboxPlugins } = loaderOptions;
528-
529-
const babelUrl = babelTranspilerOptions && babelTranspilerOptions.babelURL;
530-
const babelEnvUrl =
531-
babelTranspilerOptions && babelTranspilerOptions.babelEnvURL;
532-
533-
if (babelUrl || babelEnvUrl) {
534-
loadCustomTranspiler(babelUrl, babelEnvUrl);
535-
} else if (version !== 7) {
536-
loadCustomTranspiler(
537-
process.env.NODE_ENV === 'development'
538-
? `${process.env.CODESANDBOX_HOST || ''}/static/js/babel.6.26.js`
539-
: `${process.env.CODESANDBOX_HOST || ''}/static/js/babel.6.26.min.js`
540-
);
541-
}
543+
const stringifiedConfig = JSON.stringify(babelTranspilerOptions);
544+
if (stringifiedConfig && lastConfig !== stringifiedConfig) {
545+
resetCache();
546+
lastConfig = stringifiedConfig;
547+
}
542548

543-
const stringifiedConfig = JSON.stringify(babelTranspilerOptions);
544-
if (stringifiedConfig && lastConfig !== stringifiedConfig) {
545-
resetCache();
546-
lastConfig = stringifiedConfig;
547-
}
549+
const codeSandboxPlugins = [];
548550

549-
const codeSandboxPlugins = [];
551+
if (!disableCodeSandboxPlugins) {
552+
codeSandboxPlugins.push('dynamic-import-node');
550553

551-
if (!disableCodeSandboxPlugins) {
552-
codeSandboxPlugins.push('dynamic-import-node');
554+
if (loaderOptions.dynamicCSSModules) {
555+
codeSandboxPlugins.push('dynamic-css-modules');
556+
}
553557

554-
if (loaderOptions.dynamicCSSModules) {
555-
codeSandboxPlugins.push('dynamic-css-modules');
558+
if (!sandboxOptions || sandboxOptions.infiniteLoopProtection) {
559+
codeSandboxPlugins.push(
560+
'babel-plugin-transform-prevent-infinite-loops'
561+
);
562+
}
556563
}
557564

558-
if (!sandboxOptions || sandboxOptions.infiniteLoopProtection) {
559-
codeSandboxPlugins.push('babel-plugin-transform-prevent-infinite-loops');
560-
}
561-
}
565+
codeSandboxPlugins.push([
566+
'babel-plugin-detective',
567+
{ source: true, nodes: true, generated: true },
568+
]);
562569

563-
codeSandboxPlugins.push([
564-
'babel-plugin-detective',
565-
{ source: true, nodes: true, generated: true },
566-
]);
570+
const customConfig = getCustomConfig(
571+
{ config, codeSandboxPlugins },
572+
version,
573+
path,
574+
loaderOptions
575+
);
567576

568-
const customConfig = getCustomConfig(
569-
{ config, codeSandboxPlugins },
570-
version,
571-
path,
572-
loaderOptions
573-
);
577+
const flattenedPresets = flatten(customConfig.presets || []);
578+
const flattenedPlugins = flatten(customConfig.plugins || []);
574579

575-
const flattenedPresets = flatten(customConfig.presets || []);
576-
const flattenedPlugins = flatten(customConfig.plugins || []);
580+
if (!disableCodeSandboxPlugins) {
581+
if (
582+
flattenedPresets.indexOf('env') > -1 &&
583+
Object.keys(Babel.availablePresets).indexOf('env') === -1 &&
584+
version !== 7
585+
) {
586+
Babel.registerPreset('env', Babel.availablePresets.latest);
587+
}
577588

578-
if (!disableCodeSandboxPlugins) {
579-
if (
580-
flattenedPresets.indexOf('env') > -1 &&
581-
Object.keys(Babel.availablePresets).indexOf('env') === -1 &&
582-
version !== 7
583-
) {
584-
Babel.registerPreset('env', Babel.availablePresets.latest);
585-
}
589+
if (version === 7) {
590+
// Hardcode, since we want to override env
591+
Babel.availablePresets.env = envPreset;
592+
}
586593

587-
if (version === 7) {
588-
// Hardcode, since we want to override env
589-
Babel.availablePresets.env = envPreset;
590-
}
594+
if (
595+
(flattenedPlugins.indexOf('transform-vue-jsx') > -1 ||
596+
flattenedPlugins.indexOf('babel-plugin-transform-vue-jsx') > -1) &&
597+
Object.keys(Babel.availablePlugins).indexOf('transform-vue-jsx') === -1
598+
) {
599+
const vuePlugin = await import(
600+
/* webpackChunkName: 'babel-plugin-transform-vue-jsx' */ 'babel-plugin-transform-vue-jsx'
601+
);
602+
Babel.registerPlugin('transform-vue-jsx', vuePlugin);
603+
Babel.registerPlugin('babel-plugin-transform-vue-jsx', vuePlugin);
604+
}
591605

592-
if (
593-
(flattenedPlugins.indexOf('transform-vue-jsx') > -1 ||
594-
flattenedPlugins.indexOf('babel-plugin-transform-vue-jsx') > -1) &&
595-
Object.keys(Babel.availablePlugins).indexOf('transform-vue-jsx') === -1
596-
) {
597-
const vuePlugin = await import(
598-
/* webpackChunkName: 'babel-plugin-transform-vue-jsx' */ 'babel-plugin-transform-vue-jsx'
599-
);
600-
Babel.registerPlugin('transform-vue-jsx', vuePlugin);
601-
Babel.registerPlugin('babel-plugin-transform-vue-jsx', vuePlugin);
602-
}
606+
if (
607+
(flattenedPlugins.indexOf('jsx-pragmatic') > -1 ||
608+
flattenedPlugins.indexOf('babel-plugin-jsx-pragmatic') > -1) &&
609+
Object.keys(Babel.availablePlugins).indexOf('jsx-pragmatic') === -1
610+
) {
611+
const pragmaticPlugin = await import(
612+
/* webpackChunkName: 'babel-plugin-jsx-pragmatic' */ 'babel-plugin-jsx-pragmatic'
613+
);
614+
Babel.registerPlugin('jsx-pragmatic', pragmaticPlugin);
615+
Babel.registerPlugin('babel-plugin-jsx-pragmatic', pragmaticPlugin);
616+
}
603617

604-
if (
605-
(flattenedPlugins.indexOf('jsx-pragmatic') > -1 ||
606-
flattenedPlugins.indexOf('babel-plugin-jsx-pragmatic') > -1) &&
607-
Object.keys(Babel.availablePlugins).indexOf('jsx-pragmatic') === -1
608-
) {
609-
const pragmaticPlugin = await import(
610-
/* webpackChunkName: 'babel-plugin-jsx-pragmatic' */ 'babel-plugin-jsx-pragmatic'
611-
);
612-
Babel.registerPlugin('jsx-pragmatic', pragmaticPlugin);
613-
Babel.registerPlugin('babel-plugin-jsx-pragmatic', pragmaticPlugin);
614-
}
618+
if (
619+
flattenedPlugins.indexOf('babel-plugin-macros') > -1 &&
620+
Object.keys(Babel.availablePlugins).indexOf('babel-plugin-macros') ===
621+
-1
622+
) {
623+
if (hasMacros) {
624+
await waitForFs();
625+
}
615626

616-
if (
617-
flattenedPlugins.indexOf('babel-plugin-macros') > -1 &&
618-
Object.keys(Babel.availablePlugins).indexOf('babel-plugin-macros') === -1
619-
) {
620-
if (hasMacros) {
621-
await waitForFs();
627+
Babel.registerPlugin('babel-plugin-macros', macrosPlugin);
622628
}
623629

624-
Babel.registerPlugin('babel-plugin-macros', macrosPlugin);
625-
}
626-
627-
if (
628-
(flattenedPlugins.indexOf('proposal-optional-chaining') > -1 ||
629-
flattenedPlugins.indexOf('@babel/plugin-proposal-optional-chaining') >
630-
-1) &&
631-
Object.keys(Babel.availablePlugins).indexOf(
632-
'proposal-optional-chaining'
633-
) === -1
634-
) {
635-
Babel.registerPlugin('proposal-optional-chaining', chainingPlugin);
636-
}
630+
if (
631+
(flattenedPlugins.indexOf('proposal-optional-chaining') > -1 ||
632+
flattenedPlugins.indexOf('@babel/plugin-proposal-optional-chaining') >
633+
-1) &&
634+
Object.keys(Babel.availablePlugins).indexOf(
635+
'proposal-optional-chaining'
636+
) === -1
637+
) {
638+
Babel.registerPlugin('proposal-optional-chaining', chainingPlugin);
639+
}
637640

638-
if (
639-
flattenedPlugins.indexOf('react-refresh/babel') > -1 &&
640-
Object.keys(Babel.availablePlugins).indexOf('react-refresh/babel') === -1
641-
) {
642-
Babel.registerPlugin('react-refresh/babel', refreshBabelPlugin);
643-
}
641+
if (
642+
flattenedPlugins.indexOf('react-refresh/babel') > -1 &&
643+
Object.keys(Babel.availablePlugins).indexOf('react-refresh/babel') ===
644+
-1
645+
) {
646+
Babel.registerPlugin('react-refresh/babel', refreshBabelPlugin);
647+
}
644648

645-
const coalescingInPlugins =
646-
flattenedPlugins.indexOf('proposal-nullish-coalescing-operator') > -1 ||
647-
flattenedPlugins.indexOf(
648-
'@babel/plugin-proposal-nullish-coalescing-operator'
649-
) > -1;
650-
if (
651-
coalescingInPlugins &&
652-
Object.keys(Babel.availablePlugins).indexOf(
653-
'proposal-nullish-coalescing-operator'
654-
) === -1
655-
) {
656-
Babel.registerPlugin(
657-
'proposal-nullish-coalescing-operator',
658-
coalescingPlugin
659-
);
660-
}
649+
const coalescingInPlugins =
650+
flattenedPlugins.indexOf('proposal-nullish-coalescing-operator') > -1 ||
651+
flattenedPlugins.indexOf(
652+
'@babel/plugin-proposal-nullish-coalescing-operator'
653+
) > -1;
654+
if (
655+
coalescingInPlugins &&
656+
Object.keys(Babel.availablePlugins).indexOf(
657+
'proposal-nullish-coalescing-operator'
658+
) === -1
659+
) {
660+
Babel.registerPlugin(
661+
'proposal-nullish-coalescing-operator',
662+
coalescingPlugin
663+
);
664+
}
661665

662-
if (
663-
flattenedPlugins.indexOf('transform-cx-jsx') > -1 &&
664-
Object.keys(Babel.availablePlugins).indexOf('transform-cx-jsx') === -1
665-
) {
666-
const cxJsxPlugin = await import(
667-
/* webpackChunkName: 'transform-cx-jsx' */ 'babel-plugin-transform-cx-jsx'
668-
);
669-
Babel.registerPlugin('transform-cx-jsx', cxJsxPlugin);
666+
if (
667+
flattenedPlugins.indexOf('transform-cx-jsx') > -1 &&
668+
Object.keys(Babel.availablePlugins).indexOf('transform-cx-jsx') === -1
669+
) {
670+
const cxJsxPlugin = await import(
671+
/* webpackChunkName: 'transform-cx-jsx' */ 'babel-plugin-transform-cx-jsx'
672+
);
673+
Babel.registerPlugin('transform-cx-jsx', cxJsxPlugin);
674+
}
670675
}
671-
}
672676

673-
try {
674677
await Promise.all(
675678
flattenedPlugins
676679
.filter(p => typeof p === 'string')

‎packages/sandbox-hooks/react-error-overlay/listenToRuntimeErrors.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,6 @@ export const crashWithFrames = (crash: ErrorRecord => void) => (
4242
) => {
4343
getStackFrames(error, unhandledRejection, CONTEXT_SIZE)
4444
.then(stackFrames => {
45-
// SOURCE_CHANGE,
46-
if (stackFrames == null && error.name !== 'SyntaxError') {
47-
return;
48-
}
4945
crash({
5046
error,
5147
unhandledRejection,

0 commit comments

Comments
 (0)