search

withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
46.8k stars 2.49k forks source link

Support for the experimental syntax 'decorators' isn't currently enabled #8303

Closed excelsior091224 closed 1 year ago

excelsior091224 commented 1 year ago

Astro info

Astro version            v3.0.2
Package manager          npm
Platform                 linux
Architecture             x64
Adapter                  Couldn't determine.
Integrations             @astrojs/mdx, @astrojs/sitemap, @astrojs/vue, @astrojs/partytown, @astrojs/preact, astro-robots-txt

What browser are you using?

Chrome

Describe the Bug

The following code was used to cache data fetched from the headless CMS "microCMS". https://github.com/excelsior091224/new_blog/blob/b830ff0886a8de42dda90ad065d63cbc985b30c7/src/library/microcms.ts

import { createClient, MicroCMSQueries } from "microcms-js-sdk";
export const client = createClient({
  // serviceDomain: import.meta.env.PUBLIC_MICROCMS_SERVICE_DOMAIN,
  // apiKey: import.meta.env.PUBLIC_MICROCMS_API_KEY,
  serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: import.meta.env.MICROCMS_API_KEY,
});
import { Cache, CacheContainer } from "node-ts-cache";
import { MemoryStorage } from "node-ts-cache-storage-memory";

const userCache = new CacheContainer(new MemoryStorage());

// ommit

class CMSBlog {
  @Cache(userCache, { ttl: 300 })
  // export const getBlogs = async (queries?: MicroCMSQueries) => {
  public async getBlogs(queries?: MicroCMSQueries) {
    const data = await client.get<BlogResponse>({ endpoint: "blogs", queries });
// ommit

However, as soon as I updated to Astro 3.0 with the same code, the following error screen appeared.

SyntaxError: /home/tadashi/dev/astro_test/new_blog/src/library/microcms.ts: Support for the experimental syntax 'decorators' isn't currently enabled (72:3):

  70 |
  71 | class CMSBlog {
> 72 |   @Cache(userCache, { ttl: 300 })
     |   ^
  73 |   // export const getBlogs = async (queries?: MicroCMSQueries) => {
  74 |   public async getBlogs(queries?: MicroCMSQueries) {
  75 |     const data = await client.get<BlogResponse>({ endpoint: "blogs", queries });

Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.
    at constructor (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:345:19)
    at TypeScriptParserMixin.raise (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:3199:19)
    at TypeScriptParserMixin.expectOnePlugin (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:3245:18)
    at TypeScriptParserMixin.parseDecorator (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:12739:10)
    at /home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:13322:32
    at TypeScriptParserMixin.withSmartMixTopicForbiddingContext (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:12203:14)
    at TypeScriptParserMixin.parseClassBody (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:13311:10)
    at TypeScriptParserMixin.parseClass (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:13289:22)
    at TypeScriptParserMixin.parseClass (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:9917:20)
    at TypeScriptParserMixin.parseStatementContent (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:12559:21)
    at TypeScriptParserMixin.parseStatementContent (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:9323:18)
    at TypeScriptParserMixin.parseStatementLike (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:12530:17)
    at TypeScriptParserMixin.parseModuleItem (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:12507:17)
    at TypeScriptParserMixin.parseBlockOrModuleBlockBody (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:13131:36)
    at TypeScriptParserMixin.parseBlockBody (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:13124:10)
    at TypeScriptParserMixin.parseProgram (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:12406:10)
    at TypeScriptParserMixin.parseTopLevel (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:12396:25)
    at TypeScriptParserMixin.parse (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:14292:10)
    at TypeScriptParserMixin.parse (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:9965:18)
    at parse (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/parser/lib/index.js:14333:38)
    at parser (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/core/lib/parser/index.js:41:34)
    at parser.next (<anonymous>)
    at normalizeFile (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/core/lib/transformation/normalize-file.js:64:38)
    at normalizeFile.next (<anonymous>)
    at run (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/core/lib/transformation/index.js:21:50)
    at run.next (<anonymous>)
    at transform (/home/tadashi/dev/astro_test/new_blog/node_modules/@babel/core/lib/transform.js:22:41)
    at transform.next (<anonymous>)
    at step (/home/tadashi/dev/astro_test/new_blog/node_modules/gensync/index.js:261:32)
    at /home/tadashi/dev/astro_test/new_blog/node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/home/tadashi/dev/astro_test/new_blog/node_modules/gensync/index.js:223:11)
    at /home/tadashi/dev/astro_test/new_blog/node_modules/gensync/index.js:189:28
    at /home/tadashi/dev/astro_test/new_blog/node_modules/@babel/core/lib/gensync-utils/async.js:68:7
    at /home/tadashi/dev/astro_test/new_blog/node_modules/gensync/index.js:113:33
    at step (/home/tadashi/dev/astro_test/new_blog/node_modules/gensync/index.js:287:14)
    at /home/tadashi/dev/astro_test/new_blog/node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/home/tadashi/dev/astro_test/new_blog/node_modules/gensync/index.js:223:11)
image

What's the expected result?

To be able to use decorators. To be able to use "node-ts-cache" Cache with decorators.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-8yv6dv?file=src%2Fpages%2Fblog.astro

Participation

ematipico commented 1 year ago

Just checked your reproduction, and the console shows a different error (something about apiKey). Could you create a minimal reproduction? 

14:08:57 [vite] Error when evaluating SSR module /src/library/microcms.ts:
|- Error: parameter is required (check serviceDomain and apiKey)
    at exports.createClient (/home/projects/withastro-astro-nsscxq/node_modules/.pnpm/microcms-js-sdk@2.5.0/node_modules/microcms-js-sdk/dist/cjs/microcms-js-sdk.js:1:2523)

14:08:57 [vite] Error when evaluating SSR module /src/components/Header.astro: failed to import "/src/library/microcms.ts"
|- Error: parameter is required (check serviceDomain and apiKey)
    at exports.createClient (/home/projects/withastro-astro-nsscxq/node_modules/.pnpm/microcms-js-sdk@2.5.0/node_modules/microcms-js-sdk/dist/cjs/microcms-js-sdk.js:1:2523)

14:08:57 [vite] Error when evaluating SSR module /home/projects/withastro-astro-nsscxq/src/pages/[...page].astro: failed to import "/src/components/Header.astro"
|- Error: parameter is required (check serviceDomain and apiKey)
    at exports.createClient (/home/projects/withastro-astro-nsscxq/node_modules/.pnpm/microcms-js-sdk@2.5.0/node_modules/microcms-js-sdk/dist/cjs/microcms-js-sdk.js:1:2523)
github-actions[bot] commented 1 year ago

Hello @excelsior091224. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

excelsior091224 commented 1 year ago

Just checked your reproduction, and the console shows a different error (something about apiKey). Could you create a minimal reproduction?

14:08:57 [vite] Error when evaluating SSR module /src/library/microcms.ts:
|- Error: parameter is required (check serviceDomain and apiKey)
    at exports.createClient (/home/projects/withastro-astro-nsscxq/node_modules/.pnpm/microcms-js-sdk@2.5.0/node_modules/microcms-js-sdk/dist/cjs/microcms-js-sdk.js:1:2523)

14:08:57 [vite] Error when evaluating SSR module /src/components/Header.astro: failed to import "/src/library/microcms.ts"
|- Error: parameter is required (check serviceDomain and apiKey)
    at exports.createClient (/home/projects/withastro-astro-nsscxq/node_modules/.pnpm/microcms-js-sdk@2.5.0/node_modules/microcms-js-sdk/dist/cjs/microcms-js-sdk.js:1:2523)

14:08:57 [vite] Error when evaluating SSR module /home/projects/withastro-astro-nsscxq/src/pages/[...page].astro: failed to import "/src/components/Header.astro"
|- Error: parameter is required (check serviceDomain and apiKey)
    at exports.createClient (/home/projects/withastro-astro-nsscxq/node_modules/.pnpm/microcms-js-sdk@2.5.0/node_modules/microcms-js-sdk/dist/cjs/microcms-js-sdk.js:1:2523)

Sorry, I modified the original code to a format that doesn't use decorators to avoid errors, so that's reflected here as well. I think I was able to reproduce the error here. https://stackblitz.com/edit/withastro-astro-8yv6dv?file=src%2Fpages%2Fblog.astro

image
excelsior091224 commented 1 year ago

Why closed?? I made minimal reproduction!!

bluwy commented 1 year ago

You can add include: ['**/*.[jt]sx'] to the preact integration to work around it.

Looks like the bug is coming from @preact/preset-vite trying to parse .js,.ts files with babel too, I'm not sure why and looking at @vitejs/plugin-react it seems to do the same too. I'll try to check this upstream.

excelsior091224 commented 1 year ago

You can add include: ['**/*[jt]sx'] to the preact integration to work around it.

Looks like the bug is coming from @preact/preset-vite trying to parse .js,.ts files with babel too, I'm not sure why and looking at @vitejs/plugin-react it seems to do the same too. I'll try to check this upstream.

It seems works. Thanks!

ematipico commented 1 year ago

@bluwy what's the the solution for fixing this bug? Do we have to do something from our end?

matthewp commented 1 year ago

Closing since the issue was resolved.

patrickcjh commented 1 year ago

I am facing the same issue while using the @astrojs/lit integration. May I know what is the solution to this issue?

ematipico commented 1 year ago

@patrickcjh here

patrickcjh commented 1 year ago

I am new to the Astro framework. Which file should I edit?

excelsior091224 commented 1 year ago

I am new to the Astro framework. Which file should I edit?

astro.config.mjs

patrickcjh commented 1 year ago

Thanks! It is working for me now. For reference, this is the changes I made to the astro.config.mjs file, as suggested above.

export default defineConfig({
  integrations: [
    lit(),
    preact({include: ['**/*[jt]sx']}),  // <-- add {include:...}
  ]
});
lokimckay commented 3 months ago

EDIT: Nevermind, seems to be expected according to these docs: https://docs.astro.build/en/guides/integrations-guide/preact/#combining-multiple-jsx-frameworks

Closing since the issue was resolved.

A workaround exists but the issue is not resolved IMO - this should be reopened Manually including jsx/tsx files when using both astro/preact & astro/lit shouldn't be required

matthewp commented 3 months ago

Why? if you want to use multiple frameworks you need to specify which files are for which. Astro doesn't try to guess anymore, starting in 3.0, as it was buggy to do so.