Strapi 4.3 | Typescript | Plugin module parse failed

Questions and Answers
1
System Information
  • Strapi Version: 4.3
  • Operating System: Linux & Windows 10
  • Database: SQLite
  • Node Version: 16.16.0
  • NPM Version: 8.11.0
  • Yarn Version: —

Hello there! I created a new typescript based plugin with strapi generate in Strapi v4.3.
As long as the plugin is located in projects/strapi-app/src/plugins/plugin-demo it compiles & is loading as expected.
But as soon as I move it into a separate project folder projects/strapi-plugin-demo and install it as node_module (e.g. with npm link) I get the following error when trying to run strapi build inside the strapi-app folder:


 moduleIdentifier: '/my-strapi-app/node_modules/strapi-plugin-page-builder/admin/src/pages/App/index.tsx',
    moduleName: './node_modules/strapi-plugin-demo/admin/src/pages/App/index.tsx',
    loc: '14:9',
    message: 'Module parse failed: Unexpected token (14:9)\n' +
      '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\n' +
      "| import HomePage from '../HomePage';\n" +
      '| \n' +
      '> const App: React.FunctionComponent = () => {\n' +
      '|   return (\n' +
      '|     <div>',
    moduleId: 45433,
    moduleTrace: [ [Object], [Object], [Object], [Object] ],
    details: undefined,

I haven’t found anything in the docs about this. If you want to have a look at my plugin code, you can do so here: https://github.com/JensUweB/strapi-plugin-page-builder

Have I missed something? Do I have to compile the admin folder in advance or something like this?

2

Ok, found the answer myself.

To get your typescript plugin to work as node_module, you need to adjust the tsconfig.json. Make sure, that everything that is important is included in the build output. Than publish or link your plugin from inside the build folder.

I used this tsconfig here as a reference: https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation/blob/master/tsconfig.json