Plasmic sync fails during "Fixing import statements" phase, if several custom functions from the same namespace are used

Issues
1

What are you trying to do? (please be as specific as possible and include relevant screenshots, code snippets)

As long as my CAW/Header component uses several custom functions, Plasmic is no longer able to compile it.

For example, if one of my dynamically calculated prop values does $$.myevals.parseDate("2000-01-01") instead of new Date("2000-01-01"), then plasmic sync fails with a following error:

Fixing import statements...
Error encountered while fixing imports for CawHeader: SyntaxError: Unexpected token (142:65)

Plasmic error: Unexpected token (142:65)SyntaxError: Unexpected token (142:65)
    at constructor (/Users/jacek/src/myevaluations/react-frontend/node_modules/@plasmicapp/cli/dist/index.js:97481:23)
    at TypeScriptParserMixin.raise (/Users/jacek/src/myevaluations/react-frontend/node_modules/@plasmicapp/cli/dist/index.js:100377:23)
    at TypeScriptParserMixin.unexpected (/Users/jacek/src/myevaluations/react-frontend/node_modules/@plasmicapp/cli/dist/index.js:100410:20)
    at TypeScriptParserMixin.parsePropertyName (/Users/jacek/src/myevaluations/react-frontend/node_modules/@plasmicapp/cli/dist/index.js:109105:22)
    at TypeScriptParserMixin.parsePropertyDefinition (/Users/jacek/src/myevaluations/react-frontend/node_modules/@plasmicapp/cli/dist/index.js:108967:26)
    at TypeScriptParserMixin.parseObjectLike (/Users/jacek/src/myevaluations/react-frontend/node_modules/@plasmicapp/cli/dist/index.js:108905:25)
    at TypeScriptParserMixin.parseExprAtom (/Users/jacek/src/myevaluations/react-frontend/node_modules/@plasmicapp/cli/dist/index.js:108405:25)
    at TypeScriptParserMixin.parseExprAtom (/Users/jacek/src/myevaluations/react-frontend/node_modules/@plasmicapp/cli/dist/index.js:104124:24)
    at TypeScriptParserMixin.parseExprSubscripts (/Users/jacek/src/myevaluations/react-frontend/node_modules/@plasmicapp/cli/dist/index.js:108114:27)
    at TypeScriptParserMixin.parseUpdate (/Users/jacek/src/myevaluations/react-frontend/node_modules/@plasmicapp/cli/dist/index.js:108096:25)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

However, I’m able to use that custom function in other components, and it works there. It doesn’t work here because that’s the only component that relies on two of my custom functions: $$.myevals.handleActionTrigger and $$.myevals.parseDate .

I have tried to debug this a little and seems like the error happens before @plasmicapp/cli parses the renderModule code, because at the moment it retrieves its’ generated code from Plasmic API (using context.api.projectComponents), the code looks like this:

    const $$ = {
    myevals: {
          handleActionTrigger: __fn_myevals__handleActionTrigger,,parseDateWithoutTimeZone: __fn_myevals__parseDateWithoutTimeZone,
        },
    
  };

The handleActionTrigger: __fn_myevals__handleActionTrigger,,parseDateWithoutTimeZone: __fn_myevals__parseDateWithoutTimeZone, is the faulty line - I guess the double comma is causing the babel to throw a syntaxerror while trying to parse the file during the “fixing imports” phase.

I guess there must be some circumstances happening for the plasmic code behind the scenes to generating that custom function code incorrectly in this component, but not the others.

What are the reproduction steps?

Go to Plasmic , and change the content prop so that it relies on $$.myevals.parseDate() instead of new Date()

Relevant links:

2

I just moved one of the functions to a separate (empty) namespace. And it started working:

image
image1513Ă—415 65.2 KB

So I guess a workaround is not to use namespaces in custom functions, until this gets fixed.

3

Hey @jacek_tomaszewski, nice to see you here.

Glad you found a workaround. Perhaps there’s a problem with registerFunction. Could you share your registration code here?

4

Here’s the code of my functions I have currently registered with or without the myevals namespace:

  registerFunction(parseDate, {
    namespace: "myevals",
    name: "parseDate",
    description: "DEPRECATED",
    importPath: "./src/custom-functions/parseDate",
    typescriptDeclaration: `(datetime: string): Date`,
  });

  registerFunction(parseDateWithoutTimeZone, {
    namespace: "myevals",
    name: "parseDateWithoutTimeZone",
    description: "DEPRECATED",
    importPath: "./src/custom-functions/parseDateWithoutTimeZone",
    typescriptDeclaration: `(datetime: string): Date`,
  });

  registerFunction(parseDateWithoutTimeZone, {
    name: "parseDateWithoutTimeZone",
    description: "Same as new Date(...), but avoids converting time zone.",
    importPath: "./src/custom-functions/parseDateWithoutTimeZone",
    typescriptDeclaration: `(datetime: string): Date`,
  });

registerFunction(handleActionTrigger, {
  namespace: "myevals",
  name: "handleActionTrigger",
  description: "Trigger an action described by the API.",
  importPath: "./src/custom-functions/handleActionTrigger",
  typescriptDeclaration: `(trigger: ApiActionTrigger | null): void`,
});

registerFunction(generateColorFromString, {
  namespace: "myevals",
  name: "generateColorFromString",
  description: "DEPRECATED",
  importPath: "./src/common/generateColorFromString",
  typescriptDeclaration: "(string: string): string",
});

registerFunction(generateColorFromString, {
  name: "generateColorFromString",
  description: "Generate a random color from a given string.",
  importPath: "./src/common/generateColorFromString",
  typescriptDeclaration: "(string: string): string",
});
5

Thank you, I’ve filed a bug internally and we’ll take a look soon.

1 Like
6

Hi @jacek_tomaszewski, @victor made a fix for this bug. Let me know if it works for you or if you have any more problems with it!

1 Like