Theo's Typesafe Cult•4mo ago

How to webpack? (in nextjs)

I can do what I want to do super easy in rollup but I can't for the life of me figure out how to do it in webpack. Essentially all I want to do is run my source code through a tool to transform it before it's compiled. My source code is in TypeScript but my tool only works with JavaScript, so I need to add the transformation after the the TypeScript transpilation. I created a webpack loader that seem to work fine for js file, but I don't know how to get it to work for ts files too. This is what I've got so far:

// next.config.js
export default {
  // ...

  webpack: (webpackConfig, { dev }) => {
    if (!dev) {
      webpackConfig.module.rules.push({
        test: /\.js/,
        exclude: /node_modules/,
        loader: fileURLToPath(import.meta.resolve("deassert/webpack-loader")),
      });
    }
    return webpackConfig;
  },
};

// next.config.js
export default {
  // ...

  webpack: (webpackConfig, { dev }) => {
    if (!dev) {
      webpackConfig.module.rules.push({
        test: /\.js/,
        exclude: /node_modules/,
        loader: fileURLToPath(import.meta.resolve("deassert/webpack-loader")),
      });
    }
    return webpackConfig;
  },
};

Is this something that can be done in webpack, hopefully somewhat easily?

2 Replies

BlueBekaOP•4mo ago

The tool for reference if it's relavent: https://github.com/RebeccaStevens/deassert

GitHub

GitHub - RebeccaStevens/deassert: Allows for programming with asser...

Allows for programming with assertions/invariant-based programming during development without slowing down production. - RebeccaStevens/deassert

BlueBekaOP•4mo ago

I did manage to figure this out eventually with a bit of trial and error. It's not the prettiest but it works:

if (!dev) {
  // Find `next-swc-loader` which does the typescript transpilation.
  let m_tsRuleSet: RuleSetRule | undefined = undefined;
  tsUseLoop: for (const rule of config.module.rules) {
    if (typeof rule !== 'object' || rule === null) {
      continue;
    }
    if (rule.oneOf) {
      for (const oneOfRule of rule.oneOf) {
        if (typeof oneOfRule !== 'object' || oneOfRule === null) {
          continue;
        }
        if (oneOfRule.use && Array.isArray(oneOfRule.use)) {
          for (const use of oneOfRule.use) {
            if (typeof use !== 'object' || use === null) {
              continue;
            }
            if (use.loader === 'next-swc-loader') {
              m_tsRuleSet = oneOfRule;
              break tsUseLoop;
            }
          }
        }
      }
    }
  }

  assert(m_tsRuleSet?.use !== undefined);
  assert(Array.isArray(m_tsRuleSet.use));

  m_tsRuleSet.use.unshift({
    loader: "deassert/webpack-loader",
    options: {
      modules: ["chai"],
    }
  });
}

if (!dev) {
  // Find `next-swc-loader` which does the typescript transpilation.
  let m_tsRuleSet: RuleSetRule | undefined = undefined;
  tsUseLoop: for (const rule of config.module.rules) {
    if (typeof rule !== 'object' || rule === null) {
      continue;
    }
    if (rule.oneOf) {
      for (const oneOfRule of rule.oneOf) {
        if (typeof oneOfRule !== 'object' || oneOfRule === null) {
          continue;
        }
        if (oneOfRule.use && Array.isArray(oneOfRule.use)) {
          for (const use of oneOfRule.use) {
            if (typeof use !== 'object' || use === null) {
              continue;
            }
            if (use.loader === 'next-swc-loader') {
              m_tsRuleSet = oneOfRule;
              break tsUseLoop;
            }
          }
        }
      }
    }
  }

  assert(m_tsRuleSet?.use !== undefined);
  assert(Array.isArray(m_tsRuleSet.use));

  m_tsRuleSet.use.unshift({
    loader: "deassert/webpack-loader",
    options: {
      modules: ["chai"],
    }
  });
}

Gaming

Programming

How to webpack? (in nextjs)