webpack.config.ts not detected as typescript even with typescript and ts-node installed

[LoganDark]

What were you expecting to happen?

webpack.config.ts is interpreted as ts

What actually happened?

webpack.config.ts is interpreted as js

Terminal output / screenshots

0 LoganDark ~/tailwind-js npm run build

> tailwind-js@1.0.0 build /Users/LoganDark/tailwind-js
> webpack

/Users/LoganDark/tailwind-js/webpack.config.ts:1
(function (exports, require, module, __filename, __dirname) { import * as path        from 'path'
                                                              ^^^^^^

SyntaxError: Cannot use import statement outside a module
    at new Script (vm.js:87:7)
    at NativeCompileCache._moduleCompile (/Users/LoganDark/node_modules/v8-compile-cache/v8-compile-cache.js:240:18)
    at Module._compile (/Users/LoganDark/node_modules/v8-compile-cache/v8-compile-cache.js:186:36)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:983:32)
    at Function.Module._load (internal/modules/cjs/loader.js:891:14)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (/Users/LoganDark/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (/Users/LoganDark/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
    at requireConfig (/Users/LoganDark/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
    at /Users/LoganDark/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (/Users/LoganDark/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
    at /Users/LoganDark/node_modules/webpack-cli/bin/cli.js:71:45
    at Object.parse (/Users/LoganDark/node_modules/yargs/yargs.js:567:18)
    at /Users/LoganDark/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/Users/LoganDark/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1128:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:983:32)
    at Function.Module._load (internal/modules/cjs/loader.js:891:14)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/LoganDark/tailwind-js/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:1128:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:983:32)
    at Function.Module._load (internal/modules/cjs/loader.js:891:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! tailwind-js@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the tailwind-js@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/LoganDark/.npm/_logs/2020-05-19T10_40_36_405Z-debug.log

Please provide the following information:

• OS & version: macOS Mojave 10.14.6
• node version: 13.3.0
• npm version: 6.13.1

Additional information

dependencies:

all were added via npm i

I don't think I'm missing anything...

[phated]

@LoganDark do you have a TS config file that is generating esm modules?

[LoganDark]

@phated yes, es5 commonjs

[phated]

That's the opposite of what I asked. I think you will need to create a repository that shows this problem before anyone can work on it.

[LoganDark]

That's the opposite of what I asked.

If so I have no idea what you asked. I guess I'll create a repository

[LoganDark]

Here you go

[phated]

Thanks! I don't have webpack installed globally so the sample doesn't work out of the box. I did npm i -D webpack-cli and then npx webpack and the example works as expected.

Note that I'm testing in node 10, not 13. So your webpack versions are messed up or stuff doesn't work in unstable node?

Edit: And I just tested in node 13 and it works with my steps above. So it must be your webpack versions.

[LoganDark]

Why does installing webpack-cli fix the issue?

That is very obscure and just retarded, honestly. webpack already provides the webpack command, but it's apparently a broken version that doesn't actually work. There's no indication anywhere that I should additionally install webpack-cli.

Turns out this was not an issue with interpret, sorry.