rsnext/packages/next/build/swc/options.js
JJ Kasper a65e3612d0
Ensure optional chaining in swc matches babel (#33995)
This ensures we always transpile optional chaining and nullish coalescing with swc the same as we do [with babel](4812e22992/packages/next/build/babel/preset.ts (L97-L98)) since it can cause issues with webpack even when the node target supports these features. 

The specific case this seems to cause issues with webpack is when a value is imported and optional chaining is used on the import value webpack is stripping the optional chaining cc @sokra 

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

Fixes: https://github.com/vercel/next.js/issues/33915
2022-02-04 17:08:01 +00:00

204 lines
5.3 KiB
JavaScript

const nextDistPath =
/(next[\\/]dist[\\/]shared[\\/]lib)|(next[\\/]dist[\\/]client)|(next[\\/]dist[\\/]pages)/
const regeneratorRuntimePath = require.resolve(
'next/dist/compiled/regenerator-runtime'
)
export function getBaseSWCOptions({
filename,
jest,
development,
hasReactRefresh,
globalWindow,
nextConfig,
resolvedBaseUrl,
jsConfig,
}) {
const isTSFile = filename.endsWith('.ts')
const isTypeScript = isTSFile || filename.endsWith('.tsx')
const paths = jsConfig?.compilerOptions?.paths
const enableDecorators = Boolean(
jsConfig?.compilerOptions?.experimentalDecorators
)
return {
jsc: {
...(resolvedBaseUrl && paths
? {
baseUrl: resolvedBaseUrl,
paths,
}
: {}),
parser: {
syntax: isTypeScript ? 'typescript' : 'ecmascript',
dynamicImport: true,
decorators: enableDecorators,
// Exclude regular TypeScript files from React transformation to prevent e.g. generic parameters and angle-bracket type assertion from being interpreted as JSX tags.
[isTypeScript ? 'tsx' : 'jsx']: isTSFile ? false : true,
},
transform: {
// Enables https://github.com/swc-project/swc/blob/0359deb4841be743d73db4536d4a22ac797d7f65/crates/swc_ecma_ext_transforms/src/jest.rs
...(jest
? {
hidden: {
jest: true,
},
}
: {}),
legacyDecorator: enableDecorators,
react: {
importSource: jsConfig?.compilerOptions?.jsxImportSource || 'react',
runtime: 'automatic',
pragma: 'React.createElement',
pragmaFrag: 'React.Fragment',
throwIfNamespace: true,
development: !!development,
useBuiltins: true,
refresh: !!hasReactRefresh,
},
optimizer: {
simplify: false,
globals: jest
? null
: {
typeofs: {
window: globalWindow ? 'object' : 'undefined',
},
envs: {
NODE_ENV: development ? '"development"' : '"production"',
},
// TODO: handle process.browser to match babel replacing as well
},
},
regenerator: {
importPath: regeneratorRuntimePath,
},
},
},
sourceMaps: jest ? 'inline' : undefined,
styledComponents: nextConfig?.experimental?.styledComponents
? {
displayName: Boolean(development),
}
: null,
removeConsole: nextConfig?.experimental?.removeConsole,
reactRemoveProperties: nextConfig?.experimental?.reactRemoveProperties,
relay: nextConfig?.experimental?.relay,
}
}
export function getJestSWCOptions({
isServer,
filename,
esm,
nextConfig,
jsConfig,
// This is not passed yet as "paths" resolving needs a test first
// resolvedBaseUrl,
}) {
let baseOptions = getBaseSWCOptions({
filename,
jest: true,
development: false,
hasReactRefresh: false,
globalWindow: !isServer,
nextConfig,
jsConfig,
// resolvedBaseUrl,
})
const isNextDist = nextDistPath.test(filename)
return {
...baseOptions,
env: {
targets: {
// Targets the current version of Node.js
node: process.versions.node,
},
// we always transpile optional chaining and nullish coalescing
// since it can cause issues with webpack even if the node target
// supports them
include: [
'proposal-optional-chaining',
'proposal-nullish-coalescing-operator',
],
},
module: {
type: esm && !isNextDist ? 'es6' : 'commonjs',
},
disableNextSsg: true,
disablePageConfig: true,
}
}
export function getLoaderSWCOptions({
filename,
development,
isServer,
pagesDir,
isPageFile,
hasReactRefresh,
nextConfig,
jsConfig,
// This is not passed yet as "paths" resolving is handled by webpack currently.
// resolvedBaseUrl,
}) {
let baseOptions = getBaseSWCOptions({
filename,
development,
globalWindow: !isServer,
hasReactRefresh,
nextConfig,
jsConfig,
// resolvedBaseUrl,
})
const isNextDist = nextDistPath.test(filename)
if (isServer) {
return {
...baseOptions,
// Disables getStaticProps/getServerSideProps tree shaking on the server compilation for pages
disableNextSsg: true,
disablePageConfig: true,
isDevelopment: development,
isServer,
pagesDir,
isPageFile,
env: {
targets: {
// Targets the current version of Node.js
node: process.versions.node,
},
// we always transpile optional chaining and nullish coalescing
// since it can cause issues with webpack even if the node target
// supports them
include: [
'proposal-optional-chaining',
'proposal-nullish-coalescing-operator',
],
},
}
} else {
// Matches default @babel/preset-env behavior
baseOptions.jsc.target = 'es5'
return {
...baseOptions,
// Ensure Next.js internals are output as commonjs modules
...(isNextDist
? {
module: {
type: 'commonjs',
},
}
: {}),
disableNextSsg: !isPageFile,
isDevelopment: development,
isServer,
pagesDir,
isPageFile,
}
}
}