CODEWITHSUNDEEP
javascript
user8826104
user8826104

Reputation:

How to module.exports another module?

I have a file we'll call file1.ts:

export { default as function1 } from 'function1.ts';
export { default as function2 } from 'function2.ts';

I compile this using Webpack and Babel:

webpack.config.js

const path = require("path");

module.exports = {
  target: "web",
  mode: "production",
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, "./lib/cjs"),
    filename: "index.js",
    libraryTarget: "commonjs2",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        options: {
          presets: [
            "@babel/preset-react",
            "@babel/preset-typescript",
            [
              "@babel/preset-env",
              {
                targets: ["last 2 versions"],
              },
            ],
          ],
          plugins: ["babel-plugin-styled-components"],
        },
      },
    ],
  },
};

I publish this to npm. Now I want to import it into what we'll call file2.ts:

import { function1 } from 'package';

However, function1 does not exist because if I do, for example import a from 'package';, a is undefined.

To resolve this, I decided to create another file, we'll call file0.js to do the following:

module.exports = require('./file1.js');

if I console log the require, it will be a module object with function1 and function2 as i'd expect however, module.exports = require('./file1.js'); is undefined... so I tried the following which works:

var test = require('./file1.js');
module.exports = { ...test };
  1. I don't understand why that works but module.exports = require('./file1.js'); doesn't.
  2. I don't know what the correct way I should be doing this (export an es5 module / file so I can import it in es6)

Upvotes: 7

Views: 928

Answers (2)

JuanCaicedo
JuanCaicedo

Reputation: 3448

I think the problem that you're seeing is because your module has no default export.

export { default as function1 } from 'function1.ts';
export { default as function2 } from 'function2.ts';

This code exposes the default export of function1.ts as function1 and the default export of function2.ts as function2, but it does not provide a default export of its own.

You could try the following instead

import { default as function1 } from "function1.ts";
import { default as function2 } from "function2.ts";

export default { function1, function2 };

Heres a CodeSandbox showing this in action. (My example mixes ts and js, but it shouldn't make a difference for what you're doing here)

Hope that helps! 👍

Upvotes: 4

Nicky McCurdy
Nicky McCurdy

Reputation: 19573

webpack is not designed to support emitting ES modules. Its ES module support is for apps that use ES modules internally but emit to a different format. I'd recommend using Rollup instead, which has full native ES module support, but can also support CJS with the same config if you still need it.

Upvotes: 5

Related Questions