TS Project unable to build with webpack

[ghost]

Steps:

1. npm install apache-arrow
2. Wrote code and it runs fine:

import { Table } from 'apache-arrow';
...
.. Table.from(data);

3. Run webpack against my project and I get the Error you see below.
   The webpack config is here:

const path = require('path');

module.exports = {
  target: 'node',
  mode: 'production',
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'umd'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    // keeps a ref to the native require fn for dynamic loading
    noParse: /\/nativeRequire.js$/,
    rules: [
      {
        test: /\.ts$/,
        use: {
          loader: 'ts-loader',
          options: { configFile: 'tsconfig.prod.json' }
        }
      }
    ]
  }
};

And my tsonfig.prod.json file:

{
  "compilerOptions": {
    "outDir": "types",
    "removeComments": true,
    "allowJs": true,
    "preserveConstEnums": true,
    "module": "CommonJS",
    "target": "es5",
    "declaration": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "lib": ["esnext"],
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "paths": {
      "*": ["types/*"]
    },
    "baseUrl": "./",
    "typeRoots": ["node_modules/@types"],
    "types": ["jest", "node"],
    "alwaysStrict": true,
    "noImplicitAny": true
  },
  "include": ["src/**/*"]
}

Error:

ERROR in ./node_modules/apache-arrow/Arrow.dom.mjs 17:0-43
Module not found: Error: Can't resolve './io/adapters' in 'C:\Users\<user>\repos\my-project\node_modules\apache-arrow'
Did you mean 'adapters.js'?
BREAKING CHANGE: The request './io/adapters' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/core/RecordBatch.ts 4:21-44
 @ ./src/core/index.ts 33:20-44
 @ ./src/index.ts 15:13-30

ERROR in ./node_modules/apache-arrow/Arrow.dom.mjs 18:0-42
Module not found: Error: Can't resolve './builder/index' in 'C:\Users\<user>\repos\my-project\node_modules\apache-arrow'
Did you mean 'index.js'?
BREAKING CHANGE: The request './builder/index' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/core/RecordBatch.ts 4:21-44
 @ ./src/core/index.ts 33:20-44
 @ ./src/index.ts 15:13-30

ERROR in ./node_modules/apache-arrow/Arrow.dom.mjs 19:0-49
Module not found: Error: Can't resolve './ipc/reader' in 'C:\Users\<user>\repos\my-project\node_modules\apache-arrow'
Did you mean 'reader.js'?
BREAKING CHANGE: The request './ipc/reader' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/core/RecordBatch.ts 4:21-44
 @ ./src/core/index.ts 33:20-44
 @ ./src/index.ts 15:13-30

ERROR in ./node_modules/apache-arrow/Arrow.dom.mjs 20:0-49
Module not found: Error: Can't resolve './ipc/writer' in 'C:\Users\<user>\repos\my-project\node_modules\apache-arrow'
Did you mean 'writer.js'?
BREAKING CHANGE: The request './ipc/writer' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/core/RecordBatch.ts 4:21-44
 @ ./src/core/index.ts 33:20-44
 @ ./src/index.ts 15:13-30

ERROR in ./node_modules/apache-arrow/Arrow.dom.mjs 21:0-51
Module not found: Error: Can't resolve './io/whatwg/iterable' in 'C:\Users\<user>\repos\my-project\node_modules\apache-arrow'
Did you mean 'iterable.js'?
BREAKING CHANGE: The request './io/whatwg/iterable' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/core/RecordBatch.ts 4:21-44
 @ ./src/core/index.ts 33:20-44
 @ ./src/index.ts 15:13-30

ERROR in ./node_modules/apache-arrow/Arrow.dom.mjs 22:0-62
Module not found: Error: Can't resolve './io/whatwg/builder' in 'C:\Users\<user>\repos\my-project\node_modules\apache-arrow'
Did you mean 'builder.js'?
BREAKING CHANGE: The request './io/whatwg/builder' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/core/RecordBatch.ts 4:21-44
 @ ./src/core/index.ts 33:20-44
 @ ./src/index.ts 15:13-30

ERROR in ./node_modules/apache-arrow/Arrow.dom.mjs 23:0-71
Module not found: Error: Can't resolve './io/whatwg/reader' in 'C:\Users\<user>\repos\my-project\node_modules\apache-arrow'
Did you mean 'reader.js'?
BREAKING CHANGE: The request './io/whatwg/reader' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/core/RecordBatch.ts 4:21-44
 @ ./src/core/index.ts 33:20-44
 @ ./src/index.ts 15:13-30

ERROR in ./node_modules/apache-arrow/Arrow.dom.mjs 24:0-71
Module not found: Error: Can't resolve './io/whatwg/writer' in 'C:\Users\<user>\repos\my-project\node_modules\apache-arrow'
Did you mean 'writer.js'?
BREAKING CHANGE: The request './io/whatwg/writer' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/core/RecordBatch.ts 4:21-44
 @ ./src/core/index.ts 33:20-44
 @ ./src/index.ts 15:13-30

ERROR in ./node_modules/apache-arrow/Arrow.dom.mjs 29:0-2593
Module not found: Error: Can't resolve './Arrow' in 'C:\Users\<user>\repos\my-project\node_modules\apache-arrow'
Did you mean 'Arrow.js'?
BREAKING CHANGE: The request './Arrow' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/core/RecordBatch.ts 4:21-44
 @ ./src/core/index.ts 33:20-44
 @ ./src/index.ts 15:13-30

ERROR in bundle.js from Terser
Invalid assignment [bundle.js:8453,141]
    at js_error (C:\Users\<user>\repos\my-project\node_modules\terser\dist\bundle.min.js:550:11)
    at croak (C:\Users\<user>\repos\my-project\node_modules\terser\dist\bundle.min.js:1274:9)
    at maybe_assign (C:\Users\<user>\repos\my-project\node_modules\terser\dist\bundle.min.js:3450:13)
    at expression (C:\Users\<user>\repos\my-project\node_modules\terser\dist\bundle.min.js:3459:24)
    at simple_statement (C:\Users\<user>\repos\my-project\node_modules\terser\dist\bundle.min.js:1583:55)
    at statement (C:\Users\<user>r\repos\my-project\node_modules\terser\dist\bundle.min.js:1396:19)
    at _embed_tokens_wrapper (C:\Users\<user>\repos\my-project\node_modules\terser\dist\bundle.min.js:1339:26)
    at block_ (C:\Users\<user>\repos\my-project\node_modules\terser\dist\bundle.min.js:2172:20)
    at _function_body (C:\Users\<user>\repos\my-project\node_modules\terser\dist\bundle.min.js:2084:21)
    at arrow_function (C:\Users\<user>\repos\my-project\node_modules\terser\dist\bundle.min.js:1692:20)

[emkornfield]

@westandy typically we like to answer questions on the user@ mailing list. I'm going to CC some JS maintainers to see answer quickly otherwise, you might get a better response on the mailing list.

CC @TheNeuralBit @trxcllnt

[trxcllnt]

Last I knew, Typescript was against compiling file extensions into import statements. Did this change, or are webpack and typescript at odds now?

@westandy does it work if you set resolve.enforceExtension to false?

[ghost]

@trxcllnt - I did get this to work by adding the underlying directory:

import { Table } from 'apache-arrow/table';

It has something to do with the files being mjs but I'm not entirely sure why.

[trxcllnt]

@westandy could you try adding .mjs to your resolve.extensions list? Seems like webpack is picking up that we have "modules": "Arrow.dom.mjs" in our package.json, but I think your current extensions are restricting Webpack from using .mjs files.

[ghost]

@trxcllnt - Neither resolve{ enforceExtension: false} nor does adding .mjs to the list of extensions fix any of the issues.

  resolve: {
    enforceExtension: false,
    extensions: ['.ts', '.js', '.mjs']
  },

This gives me the same error as above. The only thing that seems to fix it is if I specify the sub file in the directory (without the extension).

import { Table } from 'apache-arrow';   // Does not build

import { Table } from 'apache-arrow/table'; // Builds with or with out the `resolve` updates.

[trxcllnt]

@westandy I replicated this error locally and found a solution from this comment. I installed the latest versions of the dependencies, i.e.

  "scripts": {
    "build": "webpack -c webpack.config.js",
  },
  "devDependencies": {
    "ts-loader": "8.1.0",
    "typescript": "4.2.3",
    "webpack": "5.28.0",
    "webpack-cli": "4.6.0"
  },
  "dependencies": {
    "apache-arrow": "3.0.0"
  }

Here's the full working webpack.config.js:

const path = require('path');

module.exports = {
    target: 'node',
    mode: 'production',
    entry: './src/index.ts',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        libraryTarget: 'umd'
    },
    resolve: {
        extensions: ['.ts', '.mjs', '.js']
    },
    module: {
        // keeps a ref to the native require fn for dynamic loading
        noParse: /\/nativeRequire.js$/,
        rules: [
            {
                test: /\.ts$/,
                use: {
                    loader: 'ts-loader',
                    options: { configFile: 'tsconfig.prod.json' }
                }
            },
            {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false
                }
            },
        ]
    }
};

And the output:

ptaylor@tko:/tmp/arrow-ts-webpack$ npm run build 

> arrow-ts-webpack@1.0.0 build /tmp/arrow-ts-webpack
> webpack -c webpack.config.js

asset bundle.js 210 KiB [emitted] [minimized] (name: main)
asset ../types/index.d.ts 11 bytes [compared for emit]
orphan modules 656 KiB [orphan] 102 modules
runtime modules 670 bytes 3 modules
cacheable modules 660 KiB
  ./src/index.ts 289 bytes [built] [code generated]
  ./node_modules/apache-arrow/Arrow.dom.mjs + 102 modules 660 KiB [built] [code generated]
webpack 5.28.0 compiled successfully in 5978 ms

[ghost]

@trxcllnt - I'm sorry I'm just getting back to this. It works! Rock on! Thank you!