Document tsconfig File for Plop Usage in TS #192

Vanuan · 2019-12-17T23:29:28Z

How to reproduce

yarn install plop
Create a perfectly valid plopfile.ts:


import { NodePlopAPI, AddActionConfig } from 'plop';

export default function generator(plop: NodePlopAPI): void {
  ...
}

yarn run plop

Expected behavior

plop prints a user prompt, generates files

Actual behavior

$ plop
/src/plopfile.ts:1
import { NodePlopAPI, AddActionConfig } from 'plop';
^^^^^^

SyntaxError: Cannot use import statement outside a module

Versions

Node version: 12.3.0
Plop version: 2.5.3

The text was updated successfully, but these errors were encountered:

Vanuan · 2019-12-17T23:30:59Z

Do I need to pass some typescript loader here?

Vanuan · 2019-12-17T23:40:04Z

Ok, if node can't load ES6 modules, maybe I can use require syntax?

exports.__esModule = true;

const Plop = require 'plop';
function generator(plop: Plop.NodePlopAPI): void {
}
exports["default"] = generator;

Nope, I can't:

/src/plopfile.ts:6
function generator(plop: NodePlopAPI): void {
                       ^

SyntaxError: Unexpected token ':'
    at Module._compile (internal/modules/cjs/loader.js:892:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at nodePlop (/src/node_modules/node-plop/lib/node-plop.js:268:5)
    at Liftoff.run (/src/node_modules/plop/src/plop.js:32:15)
    at Liftoff.execute (/src/node_modules/liftoff/index.js:203:12)
    at module.exports (/src/node_modules/flagged-respawn/index.js:51:3)

Vanuan · 2019-12-17T23:40:41Z

What am I missing here? Does Plop support typescript?

Vanuan · 2019-12-18T09:56:08Z

Renamed to plopfile.js and removes TS syntax.

amwmedia · 2019-12-18T16:48:08Z

@cspotcode @crutchcorn Any ideas here? This typescript stuff is kind of your baby 😉

cspotcode · 2019-12-18T17:22:14Z

@Vanuan tl;dr install typescript and ts-node as dependencies. ts-node allows require()ing TypeScript files directly, which plop will use to load your plopfile.ts. It will honor your tsconfig.json, so if you have one of those, make sure it is configured correctly for node. (For example, "module": "ESNext" will cause problems)

@amwmedia this is a more general Liftoff issue when using any sort of loader, not just TypeScript. (babel, coffeescript, etc)

Looks like Liftoff attempts to install any of the loaders declared in require('interpret').jsVariants and fires events when this fails. You might want plop to either terminate or at least log something friendly on those events.
https://github.com/js-cli/js-liftoff/blob/master/README.md#onloaderfailure-functionname-err-
https://github.com/js-cli/js-liftoff/blob/master/lib/register_loader.js#L10-L16

The plop docs can be updated to mention that TypeScript requires installing ts-node and typescript as dependencies. TypeScript users will often already be doing this, but can't hurt to be explicit. If you want to be more generic, you could say something like "if you're using a compiled language, you'll need to install and configure a loader supported by https://www.npmjs.com/package/interpret"

amwmedia · 2019-12-18T18:41:55Z

Thanks for taking a look at this. It looks like we do need to bolster documentation in this area a bit. 👍

jednano · 2020-03-03T00:41:05Z

Seeing as everybody isn't using TypeScript, perhaps a peerDependency of ts-node is not appropriate, but an optionalDependency might be?

mrlubos · 2020-09-07T18:15:05Z

Hey @cspotcode, I am running into the same issue using create-react-app TypeScript boilerplate. Any advice? I believe that boilerplate already uses all required dependencies.

FDiskas · 2020-11-23T22:33:04Z

Just a note: typesript.json should include

"module": "CommonJS",

Statfine · 2020-12-15T08:27:28Z

if you used ts, you may need separate configuration tsconfig.json

"generate": "cross-env TS_NODE_PROJECT='./internals/ts-node.tsconfig.json' plop --plopfile ./internals/plopfile.ts"


ts-node.tsconfig.json
{
    "compilerOptions": {
        "esModuleInterop": true,
        "module": "commonjs",
        "moduleResolution": "node",
        "noEmit": true,
        "allowSyntheticDefaultImports": true
    }
}


``

cspotcode · 2020-12-15T12:44:05Z

You can also specify a ts-node sub-object within your root tsconfig file. This allows your primary ts config to contain a *different* set of compilerOptions for ts-node.

…

On Tue, Dec 15, 2020, 3:27 AM Statfine ***@***.***> wrote: if you used ts, you may need separate configuration tsconfig.json "generate": "cross-env TS_NODE_PROJECT='./internals/ts-node.tsconfig.json' plop --plopfile ./internals/plopfile.ts" ts-node.tsconfig.json { "compilerOptions": { "esModuleInterop": true, "module": "commonjs", "moduleResolution": "node", "noEmit": true, "allowSyntheticDefaultImports": true } } `` — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#192 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAC35OAWDN6JYJPOS5ZERWLSU4MX5ANCNFSM4J4C7REQ> .

Statfine · 2020-12-16T02:26:29Z

@cspotcode which property can do it in my root tsconfig file or can you give an example

cspotcode · 2020-12-16T02:53:32Z

https://github.com/TypeStrong/ts-node#options-via-tsconfigjson

{
  // a tsconfig file with ts-node options looks like this
  "compilerOptions": {
    // ... options here
  },
  "ts-node": {
    // ts-node options here
    "transpileOnly": true,
    "compiler": "ttypescript",
    // ts-node-specific overrides for compilerOptions
    // any compilerOptions specified here will override the values specified above, *only* when running in ts-node
    "compilerOptions": {
       
    }
}

seyaobey · 2021-01-25T15:57:01Z

I am facing the same problem. I've created a simple node + typescript. I'm having the same problem. I have tried to apply the solution from @cspotcode . Here is my tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "ts-node": {
    // ts-node options here
    "transpileOnly": true,
    "compiler": "ttypescript",
    // ts-node-specific overrides for compilerOptions
    // any compilerOptions specified here will override the values specified above, *only* when running in ts-node
    "compilerOptions": {
    }
  },
  "lib": ["es2015"]
}

Here is my package.json:

{
  "name": "nx-plop",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "plop": "plop --plotfile ./dist/plopfile.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "plop": "^2.7.4",
    "typescript": "^4.1.3"
  }
}

And this is my plopfile.js generated after build (npx tsc):

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = (plop) => {
    plop.setGenerator("file-gen", {
        description: 'My first generator',
        prompts: [],
        actions: []
    });
};
//# sourceMappingURL=plopfile.js.map

Please, could it be possible to have a simple example of the plop.js library setup with typescript?
Thank you for your work.

FDiskas · 2021-01-25T22:18:07Z

Plop uses ts-node so you are missing
"module": "CommonJS",

ivanoats · 2021-11-01T16:36:48Z

Could we re-open this issue until a best practice approach to using typescript and plop is documented ?

crutchcorn · 2021-11-02T15:29:25Z

Fair enough @ivanoats. Changed the title. I'm working on some pretty major stabilization efforts for Plop currently (in prep for larger revamp efforts), but PRs are welcomed and will 100% be documented :)

@FDiskas maybe you wanna tackle this one?

If you update the README.md file, it'll auto update to the website when we deploy

ivanoats · 2021-11-02T15:33:29Z

Awesome, thank you. I am happy to collaborate on a PR. I haven't figured it out myself but happy to test and document.

crutchcorn · 2021-11-02T19:26:51Z

@ivanoats if you'd be willing to make a PR that'd be awesome

I've added an example usage of TS here:

https://github.com/plopjs/plop/blob/master/example/typescript/tsconfig.json

We require these values to be set for TSConfig and the TypeScript

We also may want to suggest users (despite not being required) use the import val = require('val') syntax, like it is here:

https://github.com/plopjs/plop/blob/master/example/typescript/plopfile.ts#L1-L2

This may silence other errors and verify/enforce that commonjs is set as the output.

FDiskas · 2021-11-03T12:26:25Z

@crutchcorn I created a small PR regarding this. Updated typescript example and added a note in the readme file. I'm a not native speaker so take a look at grammar also.
Also as artifact reformated the readme file as well.

csantos-nydig · 2022-01-03T15:26:16Z

I'm running into this issue as well. I'm trying to apply some of the solutions mentioned on this PR, but unfortunately none works. (

What's the workaround to have plopfile.ts working?

Thanks

FDiskas · 2022-01-04T07:29:15Z

@csantos-nydig check the example #290

danielfigueiredo · 2022-03-15T15:05:41Z

I followed all instructions here and also what is in the example FDiskas linked but I keep getting the same error no matter what
Even if I run plop via ts-node which should be able to parse ts files I get this same error. My entire monorepo project only has TS packages and no JS at all, unfortunately, plop isn't there yet to work well with TS and even after tossing a few hours on it, I couldn't get it to work, so declaring bankruptcy on getting plopfile.ts to work.

[PLOP] Something went wrong with reading your plop file TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/dan/Projects/design-system/plopfile.ts
    at new NodeError (node:internal/errors:370:5)
    at Loader.defaultGetFormat [as _getFormat] (node:internal/modules/esm/get_format:71:15)
    at Loader.getFormat (node:internal/modules/esm/loader:105:42)
    at Loader.getModuleJob (node:internal/modules/esm/loader:243:31)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Loader.import (node:internal/modules/esm/loader:177:17)
    at async nodePlop (file:///Users/dan/Projects/design-system/node_modules/node-plop/src/node-plop.js:198:26)
    at async Liftoff.run (file:///Users/dan/Projects/design-system/node_modules/plop/src/plop.js:56:12) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

☝️ this error keeps being thrown no matter what
I've added the "module": "commonjs" config to my tsconfig.json
Using latest plop version "plop": "^3.0.5",
and also using latest "ts-node": "^10.7.0",

🤷

Either way, I just wanted to say that this lib is great regardless so thanks for maintaining it

cspotcode · 2022-03-15T15:38:52Z

@danielfigueiredo sounds like you've got "type": "module" in a package.json file?

Check out https://typestrong.org/ts-node/docs/module-type-overrides

cspotcode · 2022-03-15T15:55:36Z

This error is mentioned in ts-node's docs, and I just made a small update to mention this specific situation: config files that you want to execute as CJS within an ESM project: https://typestrong.org/ts-node/docs/troubleshooting/#err_unknown_file_extension

Note that, if you really do need your config to run as ESM, then you're stuck using node's --loader which is gonna be a bit annoying, but that's node's fault; nothing we can do about it.

danielfigueiredo · 2022-03-15T18:24:37Z

Awesome! Thanks for the tips, I'll give that a try and will come back here later with the results. Is there a way we can specify a different tsconfig.json when running plop?
Apologies if I missed that, I've been mostly looking at https://plopjs.com/documentation/ as doc source

cspotcode · 2022-03-15T18:27:16Z

You can probably specify a different tsconfig if you want, but first I would ask why you feel that you need to do that. Usually you actually don't need to specify a different tsconfig because any "ts-node": {} configuration added to your primary tsconfig is not going to conflict with anything else you're doing in your project.

crutchcorn · 2022-04-26T17:42:43Z

This issue is really two things:

Previously, we did not have an example of compiling a plopfile.js from TypeScript to MJS/CJS. This has now been done and even has tests backing up that it does indeed work with basic tsc && plop usage
We want to support TypeScript OOTB without any additional configuration

Since # 1 is the main topic of discussion in this particular issue, I will be closing it in favor of #297 for # 2

Vanuan closed this as completed Dec 18, 2019

NearW mentioned this issue May 1, 2020

Tech/rewrite plop in typescript MaibornWolff/codecharta#868

Merged

11 tasks

crutchcorn changed the title ~~TypeScript example doesn't work~~ Document tsconfig File for Plop Usage in TS Nov 2, 2021

crutchcorn reopened this Nov 2, 2021

FDiskas mentioned this issue Nov 3, 2021

Update typescript example #290

Closed

beaussan mentioned this issue Nov 29, 2021

[TS] [PLOP 3] Improve documentation for TS usage #296

Closed

Can-Sahin mentioned this issue Jan 15, 2022

Compatibility with CRA 5 react-boilerplate/react-boilerplate-cra-template#152

Closed

crutchcorn closed this as completed Apr 26, 2022

tknickman mentioned this issue May 15, 2023

feat(turbo-gen): support TS config files vercel/turborepo#4950

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Document tsconfig File for Plop Usage in TS #192

Document tsconfig File for Plop Usage in TS #192

Vanuan commented Dec 17, 2019 •

edited

Loading

Vanuan commented Dec 17, 2019

Vanuan commented Dec 17, 2019

Vanuan commented Dec 17, 2019

Vanuan commented Dec 18, 2019

amwmedia commented Dec 18, 2019

cspotcode commented Dec 18, 2019

amwmedia commented Dec 18, 2019

jednano commented Mar 3, 2020

mrlubos commented Sep 7, 2020

FDiskas commented Nov 23, 2020

Statfine commented Dec 15, 2020

cspotcode commented Dec 15, 2020 via email

Statfine commented Dec 16, 2020

cspotcode commented Dec 16, 2020

seyaobey commented Jan 25, 2021

FDiskas commented Jan 25, 2021

ivanoats commented Nov 1, 2021

crutchcorn commented Nov 2, 2021

ivanoats commented Nov 2, 2021

crutchcorn commented Nov 2, 2021

FDiskas commented Nov 3, 2021

csantos-nydig commented Jan 3, 2022 •

edited

Loading

FDiskas commented Jan 4, 2022

danielfigueiredo commented Mar 15, 2022 •

edited

Loading

cspotcode commented Mar 15, 2022

cspotcode commented Mar 15, 2022

danielfigueiredo commented Mar 15, 2022

cspotcode commented Mar 15, 2022

crutchcorn commented Apr 26, 2022

Document tsconfig File for Plop Usage in TS #192

Document tsconfig File for Plop Usage in TS #192

Comments

Vanuan commented Dec 17, 2019 • edited Loading

Vanuan commented Dec 17, 2019

Vanuan commented Dec 17, 2019

Vanuan commented Dec 17, 2019

Vanuan commented Dec 18, 2019

amwmedia commented Dec 18, 2019

cspotcode commented Dec 18, 2019

amwmedia commented Dec 18, 2019

jednano commented Mar 3, 2020

mrlubos commented Sep 7, 2020

FDiskas commented Nov 23, 2020

Statfine commented Dec 15, 2020

cspotcode commented Dec 15, 2020 via email

Statfine commented Dec 16, 2020

cspotcode commented Dec 16, 2020

seyaobey commented Jan 25, 2021

FDiskas commented Jan 25, 2021

ivanoats commented Nov 1, 2021

crutchcorn commented Nov 2, 2021

ivanoats commented Nov 2, 2021

crutchcorn commented Nov 2, 2021

FDiskas commented Nov 3, 2021

csantos-nydig commented Jan 3, 2022 • edited Loading

FDiskas commented Jan 4, 2022

danielfigueiredo commented Mar 15, 2022 • edited Loading

cspotcode commented Mar 15, 2022

cspotcode commented Mar 15, 2022

danielfigueiredo commented Mar 15, 2022

cspotcode commented Mar 15, 2022

crutchcorn commented Apr 26, 2022

Vanuan commented Dec 17, 2019 •

edited

Loading

csantos-nydig commented Jan 3, 2022 •

edited

Loading

danielfigueiredo commented Mar 15, 2022 •

edited

Loading