Doesn't seem to work with babel-loader?

[beaugunderson]

I see this during webpack compilation:

ERROR in ./views/pages/PopulationHealth/NewCampaign.tsx
Module build failed (from /Users/beau/p/canvas/home-app/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/beau/p/canvas/home-app/static/scripts/views/pages/PopulationHealth/NewCampaign.tsx: Unexpected token (175:136)

  173 | }
  174 | export default compose(graphql<InputProps, NewCampaignPatients, NewCampaignPatientsVariables>(NEW_CAMPAIGN_PATIENTS, {
> 175 |     options: ({ match: { params: { search = '' } } }) => ($_$twiz("{ match: { params: { search = '' } } }", { match: { params: { search = '' } } }, 7170, "/Users/beau/p/canvas/home-app/static/scripts/views/pages/PopulationHealth/NewCampaign.tsx", "{\"arrow\":true}"), ({
      |                                                                                                                                         ^
  176 |         variables: { search }
  177 |     }))
  178 | }), graphql<InputProps, NewCampaignCreateCampaign, NewCampaignCreateCampaignVariables>(CREATE_CAMPAIGN, {
    at Object.raise (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:3831:17)
    at Object.unexpected (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5143:16)
    at Object.parseMaybeAssign (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5691:12)
    at Object.parseMaybeAssign (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10363:20)
    at Object.parseExprListItem (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:6940:18)
    at Object.parseCallExpressionArguments (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:6070:22)
    at Object.parseSubscript (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5965:29)
    at Object.parseSubscript (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10032:18)
    at Object.parseSubscripts (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5882:19)
    at Object.parseExprSubscripts (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5872:17)
    at Object.parseMaybeUnary (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5842:21)
    at Object.parseMaybeUnary (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10403:20)
    at Object.parseExprOps (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5729:23)
    at Object.parseMaybeConditional (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5702:23)
    at Object.parseMaybeAssign (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5647:21)
    at Object.parseMaybeAssign (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10363:20)
    at Object.parseParenAndDistinguishExpression (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:6435:28)
    at Object.parseExprAtom (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:6215:21)
    at Object.parseExprAtom (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:3552:20)
    at Object.parseExprSubscripts (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5862:23)
    at Object.parseMaybeUnary (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5842:21)
    at Object.parseMaybeUnary (/Users/beau/p/canvas/home-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10403:20)
 @ ./views/pages/PopulationHealth/index.tsx 15:0-40 44:19-30
 @ ./MainContainer.tsx
 @ ./App.tsx
 @ ./index.tsx
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8001 (webpack)/hot/dev-server.js ./index.tsx
ℹ ｢wdm｣: Failed to compile.

I use this as the loader for tsx files:

    use: [
      {
        loader: 'babel-loader',
        options: {
          root: fs.realpathSync('..')
        }
      },
      {
        loader: 'typewiz-webpack'
      }
    ]

[urish]

Seems like some issue with the instrumentation code. Can you please show the original content of /Users/beau/p/canvas/home-app/static/scripts/views/pages/PopulationHealth/NewCampaign.tsx, around the function declaration of the compose function?

[beaugunderson]

@urish here you go:

export default compose(
  graphql<InputProps, NewCampaignPatients, NewCampaignPatientsVariables>(NEW_CAMPAIGN_PATIENTS, {
    options: ({
      match: {
        params: { search = '' }
      }
    }) => ({
      variables: { search }
    })
  }),
  graphql<InputProps, NewCampaignCreateCampaign, NewCampaignCreateCampaignVariables>(
    CREATE_CAMPAIGN,
    {
      options: {
        update: (cache, { data: { createCampaign } }) => {
          const variables = { filter: '' };
          const { campaigns } = cache.readQuery({ query: GET_CAMPAIGNS, variables });
          cache.writeQuery({
            query: GET_CAMPAIGNS,
            variables,
            data: {
              campaigns: {
                ...campaigns,
                edges: campaigns.edges.concat({
                  node: createCampaign
                })
              }
            }
          });
        }
      }
    }
  )
)(NewCampaign);

just to be clear though, is typewiz expected to work with babel-loader? we use tsc for type-checking but never compile down to JS with it and instead use babel-loader for that transformation (which I believe is a fairly common way to do things now but is also relatively new, so I figured I should check that first)