为什么在使用NextJS时不能在Javascript文件中导入或要求Typescript文件？

Question

I'm trying to import a factory Typescript file that takes data provided from a client and organizes it in a strict way before passing it to route creation with Next.js.

I've tried changing the way I import and export files. I've tried import { ContentfulAssetFactory, LandingPageFactory } from './factory'; and const factory = require('./factory) .

import { ContentfulAssetFactory, LandingPageFactory } from './factory';

const client = require('./client');

const LANDING_PAGE_CONTENT_TYPE_ID = 'campaignLandingPage';

module.exports = async () => {
  const entries = await client.getEntries({
    content_type: LANDING_PAGE_CONTENT_TYPE_ID,
  });

  const linkedAssets = await entries.includes.Asset.map(asset => {
    return ContentfulAssetFactory.create(asset.fields)
  })

  const items = entries.items.map(item => {
    return LandingPageFactory.create(item.fields, linkedAssets)
  });

  return items;
};

class ContentfulAssetFactory {
    static create(asset: ContentfulAsset) {
        return {
          id: asset.id,
          contentType: asset.contentType,
          url: asset.url,
          title: asset.title
        }
      }
    }
}
class LandingPageFactory {
 static create(page: LandingPage, assets: Array<ContentfulAsset>) {
    const pageImgs = await page.pageImages.map(asset => {
      assets.find(item => {
        if (item.sys.id === asset.sys.id) {

        }
      })
    })

    const lp = {
      campaignTitle: page.campaignTitle,
      promoCode: page.promoCode,
      template: page.template,
      ctaPrimary: page.ctaPrimary,
      ctaPrimaryButtonText: page.ctaPrimaryButtonText,
      ctaPrimaryHyperlink: page.ctaPrimaryHyperlink,
      ctaAlt1: page.ctaAlt1,
      ctaAlt1Hyperlink: page.ctaAlt1Hyperlink,
      ctaAlt1TextColor: page.ctaAlt1TextColor,
      ctaAlt1BackgroundColor: page.ctaAlt1BackgroundColor,
      pageImages: pageImgs
    }
      return lp
  }
}

export {
  ContentfulAsset,
  ContentfulAssetFactory,
  LandingPage,
  LandingPageFactory
}

I'm expecting to be able to import or require the typescript and use the class static functions. I'm very confused on why I can't require a file or import it. The SyntaxError is particularly confusing and I don't know why it's throwing that error when that syntax works in other files.

name:directory name$ yarn dev
yarn run v1.16.0
$ PORT=3000 node --max-old-space-size=4096  server
/Users/name/code/directory/lib/contentful/fetchLandingPages.js:1
import { ContentfulAssetFactory, LandingPageFactory } from './factory';
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:718:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/name/code/candidco-web/lib/contentful/index.js:4:27)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

name:directory name$ yarn dev
yarn run v1.16.0
$ PORT=3000 node --max-old-space-size=4096  server
internal/modules/cjs/loader.js:626
    throw err;
    ^

Error: Cannot find module './factory'
Require stack:
- /Users/name/code/directory/lib/contentful/fetchLandingPages.js

update 1

// next.config.js
if (process.env.NODE_ENV !== 'production') {
  require('dotenv-safe').load();
}
const getRoutes = require('./routes');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const CompressionPlugin = require('compression-webpack-plugin');
const withTypescript = require('@zeit/next-typescript')

const { ANALYZE } = process.env;

module.exports = withTypescript({
  webpack: (config, { isServer }) => {

// various configs

});

Answer 1

node itself does not know about typescript . You should compile it first to regular javascript.

Answer 2

Typescript is not valid javascript. You have to compile the typescript to javascript before you can import it.