Enable import assertion

.eslintrc.json

@@ -15,7 +15,7 @@
       "jsx": true
     },
     "babelOptions": {
-      "presets": ["@babel/preset-env", "@babel/preset-react"],
+      "presets": ["next/babel"],
       "caller": {
         // Eslint supports top level await when a parser for it is included. We enable the parser by default for Babel.
         "supportsTopLevelAwait": true

package.json

@@ -51,8 +51,8 @@
     "@fullhuman/postcss-purgecss": "1.3.0",
     "@mdx-js/loader": "0.18.0",
     "@svgr/webpack": "5.5.0",
-    "@swc/cli": "0.1.49",
-    "@swc/core": "1.2.97",
+    "@swc/cli": "0.1.55",
+    "@swc/core": "1.2.135",
     "@testing-library/react": "11.2.5",
     "@types/cheerio": "0.22.16",
     "@types/fs-extra": "8.1.0",
@@ -136,7 +136,7 @@
     "postcss-short-size": "4.0.0",
     "postcss-trolling": "0.1.7",
     "pre-commit": "1.2.2",
-    "prettier": "2.3.2",
+    "prettier": "2.5.1",
     "pretty-bytes": "5.3.0",
     "pretty-ms": "7.0.0",
     "random-seed": "0.3.0",
@@ -158,7 +158,7 @@
     "taskr": "1.1.0",
     "tree-kill": "1.2.2",
     "turbo": "1.0.28",
-    "typescript": "4.4.3",
+    "typescript": "4.5.5",
     "wait-port": "0.2.2",
     "web-streams-polyfill": "2.1.1",
     "webpack": "link:./node_modules/webpack5",

packages/eslint-config-next/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@next/eslint-plugin-next": "12.0.10-canary.0",
     "@rushstack/eslint-patch": "^1.0.8",
-    "@typescript-eslint/parser": "^5.0.0",
+    "@typescript-eslint/parser": "^5.10.1",
     "eslint-import-resolver-node": "^0.3.4",
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-import": "^2.25.2",

packages/next/build/babel/preset.ts

@@ -158,6 +158,7 @@ export default (
         },
       ],
       require('next/dist/compiled/babel/plugin-syntax-dynamic-import'),
+      require('next/dist/compiled/babel/plugin-syntax-import-assertions'),
       require('./plugins/react-loadable-plugin'),
       [
         require('next/dist/compiled/babel/plugin-proposal-class-properties'),

packages/next/build/swc/options.js

@@ -32,11 +32,14 @@ export function getBaseSWCOptions({
       parser: {
         syntax: isTypeScript ? 'typescript' : 'ecmascript',
         dynamicImport: true,
+        importAssertions: 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,
       },
-
+      experimental: {
+        keepImportAssertions: true,
+      },
       transform: {
         legacyDecorator: enableDecorators,
         react: {

packages/next/bundles/babel/bundle.js

@@ -12,6 +12,10 @@ function core() {
   return require('@babel/core')
 }
 
+function parser() {
+  return require('@babel/parser')
+}
+
 function coreLibConfig() {
   return require('@babel/core/lib/config')
 }
@@ -68,6 +72,10 @@ function pluginSyntaxDynamicImport() {
   return require('next/dist/compiled/babel-packages').pluginSyntaxDynamicImport()
 }
 
+function pluginSyntaxImportAssertions() {
+  return require('next/dist/compiled/babel-packages').pluginSyntaxImportAssertions()
+}
+
 function pluginSyntaxJsx() {
   return require('next/dist/compiled/babel-packages').pluginSyntaxJsx()
 }
@@ -104,6 +112,7 @@ module.exports = {
   types,
   codeFrame,
   core,
+  parser,
   coreLibConfig,
   coreLibNormalizeFile,
   coreLibNormalizeOpts,
@@ -118,6 +127,7 @@ module.exports = {
   pluginProposalObjectRestSpread,
   pluginSyntaxBigint,
   pluginSyntaxDynamicImport,
+  pluginSyntaxImportAssertions,
   pluginSyntaxJsx,
   pluginTransformDefine,
   pluginTransformModulesCommonjs,

packages/next/bundles/babel/packages-bundle.js

@@ -28,6 +28,10 @@ function pluginSyntaxDynamicImport() {
   return require('@babel/plugin-syntax-dynamic-import')
 }
 
+function pluginSyntaxImportAssertions() {
+  return require('@babel/plugin-syntax-import-assertions')
+}
+
 function pluginSyntaxJsx() {
   return require('@babel/plugin-syntax-jsx')
 }
@@ -68,6 +72,7 @@ module.exports = {
   pluginProposalObjectRestSpread,
   pluginSyntaxBigint,
   pluginSyntaxDynamicImport,
+  pluginSyntaxImportAssertions,
   pluginSyntaxJsx,
   pluginTransformDefine,
   pluginTransformModulesCommonjs,

packages/next/bundles/babel/packages/parser.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').parser()

packages/next/bundles/babel/packages/plugin-syntax-import-assertions.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').pluginSyntaxImportAssertions()

packages/next/compiled/babel/parser.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').parser()

packages/next/compiled/babel/plugin-syntax-import-assertions.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').pluginSyntaxImportAssertions()

packages/next/package.json

@@ -99,14 +99,15 @@
     "@ampproject/toolbox-optimizer": "2.7.1-alpha.0",
     "@babel/code-frame": "7.12.11",
     "@babel/core": "7.15.0",
-    "@babel/eslint-parser": "7.13.14",
+    "@babel/eslint-parser": "7.15.0",
     "@babel/generator": "7.15.0",
     "@babel/plugin-proposal-class-properties": "7.14.5",
     "@babel/plugin-proposal-export-namespace-from": "7.14.5",
     "@babel/plugin-proposal-numeric-separator": "7.14.5",
     "@babel/plugin-proposal-object-rest-spread": "7.14.7",
     "@babel/plugin-syntax-bigint": "7.8.3",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@babel/plugin-syntax-import-assertions": "7.16.7",
     "@babel/plugin-syntax-jsx": "7.14.5",
     "@babel/plugin-transform-modules-commonjs": "7.15.0",
     "@babel/plugin-transform-runtime": "7.15.0",

packages/next/taskfile-swc.js

@@ -29,8 +29,12 @@ module.exports = function (task) {
           parser: {
             syntax: 'typescript',
             dynamicImport: true,
+            importAssertions: true,
             tsx: file.base.endsWith('.tsx'),
           },
+          experimental: {
+            keepImportAssertions: true,
+          },
           transform: {
             react: {
               pragma: 'React.createElement',
@@ -59,8 +63,12 @@ module.exports = function (task) {
           parser: {
             syntax: 'typescript',
             dynamicImport: true,
+            importAssertions: true,
             tsx: file.base.endsWith('.tsx'),
           },
+          experimental: {
+            keepImportAssertions: true,
+          },
           transform: {
             react: {
               pragma: 'React.createElement',

packages/next/taskfile.js

@@ -763,6 +763,7 @@ const babelCorePackages = {
   '@babel/traverse': 'next/dist/compiled/babel/traverse',
   '@babel/types': 'next/dist/compiled/babel/types',
   '@babel/core': 'next/dist/compiled/babel/core',
+  '@babel/parser': 'next/dist/compiled/babel/parser',
   '@babel/core/lib/config': 'next/dist/compiled/babel/core-lib-config',
   '@babel/core/lib/transformation/normalize-file':
     'next/dist/compiled/babel/core-lib-normalize-config',

test/integration/eslint/first-time-setup/.eslintrc.json

@@ -0,0 +1 @@
+{ "extends": "next", "root": true }

test/integration/import-assertion/data

@@ -0,0 +1,3 @@
+{
+  "foo": "foo"
+}

test/integration/import-assertion/data.d.ts

@@ -0,0 +1,2 @@
+declare const data: any
+export default data

test/integration/import-assertion/pages/es.js

@@ -0,0 +1,5 @@
+import data from '../data' assert { type: 'json' }
+
+export default function Es() {
+  return data.foo
+}

test/integration/import-assertion/pages/ts.ts

@@ -0,0 +1,5 @@
+import data from '../data' assert { type: 'json' }
+
+export default function Ts() {
+  return data.foo
+}

test/integration/import-assertion/test/index.test.js

@@ -0,0 +1,45 @@
+import { join } from 'path'
+import {
+  nextBuild,
+  nextStart,
+  launchApp,
+  killApp,
+  findPort,
+  renderViaHTTP,
+} from 'next-test-utils'
+
+const appDir = join(__dirname, '../')
+
+function runSuite(suiteName, env, runTests) {
+  const context = { appDir }
+  describe(`${suiteName} ${env}`, () => {
+    if (env === 'prod') {
+      beforeAll(async () => {
+        context.appPort = await findPort()
+        await nextBuild(context.appDir)
+        context.server = await nextStart(context.appDir, context.appPort)
+      })
+    }
+    if (env === 'dev') {
+      beforeAll(async () => {
+        context.appPort = await findPort()
+        context.server = await launchApp(context.appDir, context.appPort)
+      })
+    }
+    afterAll(async () => await killApp(context.server))
+
+    runTests(context, env)
+  })
+}
+
+function basic(context) {
+  it('should handle json assertions', async () => {
+    const esHtml = await renderViaHTTP(context.appPort, '/es')
+    const tsHtml = await renderViaHTTP(context.appPort, '/ts')
+    expect(esHtml).toContain('foo')
+    expect(tsHtml).toContain('foo')
+  })
+}
+
+runSuite('import-assertion', 'dev', basic)
+runSuite('import-assertion', 'prod', basic)

test/integration/import-assertion/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "exclude": ["node_modules"],
+  "include": ["**/*.d.ts", "**/*.ts", "**/*.tsx"]
+}

test/integration/typescript/pages/ssg/[slug].tsx

@@ -20,16 +20,19 @@ export const getStaticPaths: GetStaticPaths<Params> = async () => {
   }
 }
 
-export const getStaticProps: GetStaticProps<Props, Params, PreviewData> =
-  async ({ params, previewData }) => {
-    return {
-      props: {
-        data: params!.slug,
-        title: previewData?.title || 'default title',
-      },
-      revalidate: false,
-    }
+export const getStaticProps: GetStaticProps<
+  Props,
+  Params,
+  PreviewData
+> = async ({ params, previewData }) => {
+  return {
+    props: {
+      data: params!.slug,
+      title: previewData?.title || 'default title',
+    },
+    revalidate: false,
   }
+}
 
 export default function Page({ data, title }: Props) {
   return (