Preact-cli: Unexpected token operator «*», expected punc «(»

[Orecic]

preact build can not use async/await , how to fix it ,thanks

[marvinhagemeister]

Async/await should be supported, but generators are not. Since the error message contain an asterisk (*) I'm assuming you are using the latter.

They are not supported by default because the transpiled output for generators is quite heavy. You can enable transpilation for generators by adding the specific Babel plugin to your .babelrc.

[Carnewal]

Try updating preact-cli to v2.2.1 and using https://github.com/pluscubed/preact-cli-plugin-fast-async

Alternatively:

npm i -D fast-async

In your preact.config.js file:

export default (config, env, helpers) => {

  if (env.isProd) {   

    // Make async work
    let babel = config.module.loaders.filter( loader => loader.loader === 'babel-loader')[0].options;
    // Blacklist regenerator within env preset:
    babel.presets[0][1].exclude.push('transform-async-to-generator');
    // Add fast-async
    babel.plugins.push([require.resolve('fast-async'), { spec: true }]);
  }
};

[hibangun]

@Carnewal where can we find preact.config.js file?

[matthewlynch]

Hi @hibangun, You'll need to create the preact.config.js file in the root of your project.

[hibangun]

@matthewlynch works perfect, thanks!

[dandv]

Async/await should be supported, but generators are not. Since the error message contain an asterisk (*) I'm assuming you are using the latter.

I'm getting the same error and am only using async/await.

Shouldn't they be supported out of the box, since feature #3 is "Transparently code-split any component with an async! prefix"?

[marvinhagemeister]

The async! macro inside an import statement or require path is a loader for webpack and has no connection to the language keywords async/await.

[ForsakenHarmony]

uglify doesn't understand generators

I think the if (env.isProd) { should be removed in the code snippet above, because fast-async is also better for dev

or alternatively leave the async in place for dev because it probably works out of the box in your browser

[developit]

Note: #617 adds async/await support by default for preact-cli@next, so once we roll over to next we can close this issue.

[marvinhagemeister]

and it reveals wonderful new problems

@indatawetrust Can you elaborate on that?

[hguillermo]

@hibangun How did you make it work? I am using preact-cli 2.2.1 and added the suggested code but I am still getting the error. Maybe you could please share your babelrc and preact.confikg.js settings?

[ulissesferreira]

Note: #617 adds async/await support by default for preact-cli@next, so once we roll over to next we can close this issue.

I just used preact-cli@next and for some reason I had this issue when building! I can provide more info if you guys need, adding the above fast async fix worked for me...
I repeat, I had this problem while using preact-cli@next

[ForsakenHarmony]

More info is always good

[peterbe]

@Carnewal 's trick worked.
I did this:

$ npx preact create --yarn default frontend
$ cd frontend
$ cat package.json
...
  "devDependencies": {
    "eslint": "6.7.2",
    "eslint-config-synacor": "3.0.5",
    "if-env": "1.0.4",
    "preact-cli": "2.2.1"
  },
  "dependencies": {
    "preact": "10.0.5",
    "preact-compat": "3.19.0",
    "preact-router": "3.1.0"
  }
...

Now, in src/routes/home/index.js I added this:

export default class Home extends Component {
  componentDidMount() {
    this.fetchSomething()
  }
  fetchSomething = async () => {
    let r = await fetch('/api')
  }
...

That broke yarn build:

▶ yarn build
yarn run v1.19.2
$ preact build
✖ ERROR route-home.chunk.b5621.js from UglifyJs
loading /opt/boxen/homebrew/Cellar/jed/0.99-19/jed/lib/colors/black3.sl
Unexpected token operator «*», expected punc «(» [./routes/home/index.js:8,19][route-home.chunk.b5621.js:58,181]
Build failed! null
error Command failed with exit code 1.

This is how I fixed it:

$ yarn add --dev preact-cli-plugin-fast-async
$ cat preact.config.js
import asyncPlugin from 'preact-cli-plugin-fast-async';

export default (config) => {
  asyncPlugin(config);
}

Now, yarn build works.

I'm not sure what that all means but it definitely means that the latest preact-cli (as of today's date) creates a project where you can't use async/await unless you add that preact-cli-plugin-fast-async which I don't fully understand. But it certainly was a bit cryptic and could be better.