[Turborepo] unable to run example apps from create-turbo due to transpilation error

[jpdenford]

What version of Turborepo are you using?

(create-turbo) 1.6.2

What package manager are you using / does the bug impact?

Yarn v1

What operating system are you using?

Mac

Describe the Bug

Unable to run apps in a fresh create-turbo repo due to transpilation error:

web:dev: error - ../../packages/ui/Button.tsx
web:dev: Module parse failed: Unexpected token (3:9)
web:dev: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
web:dev: | import * as React from "react";
web:dev: | export const Button = () => {
web:dev: >   return <button>Boop</button>;
web:dev: | };
web:dev: |

Expected Behavior

Should be able to run & open the example apps.
Running the same commands but using the previous version (npx create-turbo@1.6.1) works as expected.

To Reproduce

1. run create-turbo
   npx create-turbo@latest (this is currently version 1.6.2)

>>> TURBOREPO

>>> Welcome to Turborepo! Let's get you set up with a new codebase.

? Where would you like to create your turborepo? my-turbo
? Which package manager do you want to use? yarn

>>> Created a new turborepo with the following:

 - apps/web: Next.js with TypeScript
 - apps/docs: Next.js with TypeScript
 - packages/ui: Shared React component library
 - packages/eslint-config-custom: Shared configuration (ESLint)
 - packages/tsconfig: Shared TypeScript `tsconfig.json`

>>> Success! Created a new Turborepo at "my-turbo".
Inside that directory, you can run several commands:

  yarn run build
     Build all apps and packages

  yarn run dev
     Develop all apps and packages

Turborepo will cache locally by default. For an additional
speed boost, enable Remote Caching with Vercel by
entering the following command:

  npx turbo login

We suggest that you begin by typing:

  cd my-turbo
  npx turbo login

2. cd into the newly created directory & run the app
   cd my-turbo
yarn run dev

yarn run v1.22.18
$ turbo run dev --parallel
• Packages in scope: docs, eslint-config-custom, tsconfig, ui, web
• Running dev in 5 packages
• Remote caching disabled
web:dev: cache bypass, force executing a1c187e9bb403a9a
docs:dev: cache bypass, force executing 3d6a8bf4f5f48c8e
web:dev: $ next dev
docs:dev: $ next dev --port 3001
web:dev: ready - started server on 0.0.0.0:3000, url: http://localhost:3000
docs:dev: ready - started server on 0.0.0.0:3001, url: http://localhost:3001
docs:dev: warn  - Invalid next.config.js options detected:
web:dev: warn  - Invalid next.config.js options detected:
docs:dev:   - The value at .experimental has an unexpected property, transpilePackages, which is not in the list of allowed properties (adjustFontFallbacks, amp, appDir, browsersListForSwc, cpus, craCompat, disableOptimizedLoading, disablePostcssPresetEnv, esmExternals, externalDir, fallbackNodePolyfills, forceSwcTransforms, fullySpecified, gzipSize, incrementalCacheHandlerPath, isrFlushToDisk, isrMemoryCacheSize, largePageDataBytes, legacyBrowsers, manualClientBasePath, modularizeImports, newNextLinkBehavior, nextScriptWorkers, optimizeCss, optimisticClientCache, outputFileTracingRoot, pageEnv, profiling, proxyTimeout, runtime, scrollRestoration, serverComponents, sharedPool, sri, swcFileReading, swcMinify, swcMinifyDebugOptions, swcPlugins, swcTraceProfiling, urlImports, workerThreads).
docs:dev:
docs:dev: See more info here: https://nextjs.org/docs/messages/invalid-next-config
web:dev:   - The value at .experimental has an unexpected property, transpilePackages, which is not in the list of allowed properties (adjustFontFallbacks, amp, appDir, browsersListForSwc, cpus, craCompat, disableOptimizedLoading, disablePostcssPresetEnv, esmExternals, externalDir, fallbackNodePolyfills, forceSwcTransforms, fullySpecified, gzipSize, incrementalCacheHandlerPath, isrFlushToDisk, isrMemoryCacheSize, largePageDataBytes, legacyBrowsers, manualClientBasePath, modularizeImports, newNextLinkBehavior, nextScriptWorkers, optimizeCss, optimisticClientCache, outputFileTracingRoot, pageEnv, profiling, proxyTimeout, runtime, scrollRestoration, serverComponents, sharedPool, sri, swcFileReading, swcMinify, swcMinifyDebugOptions, swcPlugins, swcTraceProfiling, urlImports, workerThreads).
web:dev:
web:dev: See more info here: https://nextjs.org/docs/messages/invalid-next-config
docs:dev: warn  - You have enabled experimental feature (transpilePackages) in next.config.js.
docs:dev: warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
web:dev: warn  - You have enabled experimental feature (transpilePackages) in next.config.js.
web:dev: warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
docs:dev:
web:dev:
web:dev: event - compiled client and server successfully in 739 ms (159 modules)
docs:dev: event - compiled client and server successfully in 755 ms (159 modules)

3. Open the web or docs app (localhost:300[0|1])

web:dev: error - ../../packages/ui/Button.tsx
web:dev: Module parse failed: Unexpected token (3:9)
web:dev: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
web:dev: | import * as React from "react";
web:dev: | export const Button = () => {
web:dev: >   return <button>Boop</button>;
web:dev: | };
web:dev: |
web:dev: wait  - compiling /_error (client and server)...
web:dev: error - ../../packages/ui/Button.tsx
web:dev: Module parse failed: Unexpected token (3:9)
web:dev: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
web:dev: | import * as React from "react";
web:dev: | export const Button = () => {
web:dev: >   return <button>Boop</button>;
web:dev: | };
web:dev: |

Reproduction Repo

No response

[tarsinzer]

same for me

it also has been mentioned in #346

[jpdenford]

For anyone visiting the thread, in case you missed it in the report, an easy workaround is to use the previous version

npx create-turbo@1.6.1

[josemanuelguzman]

Same here!

[jpdenford]

Thank you @chris-olszewski! 🙏

[leopard930418]

Please help me.

[chris-olszewski]

@leopard930418 can you open a new issue with some more information? That doesn't seem to be a related error.