bug: Typescript files are not being compiled, when I add million.webpack() to my webpack 5 configuration

[TerrySlack]

Hi @aidenybai Filing this issue again. The original can be seen here. #476

I tried with both v2.5.0 and latest which installed 2.5.2-beta.0 and get the following errors.

using windows 11, VS Code and:

"million": "^2.5.2-beta.0",
"typescript": "^5.1.6",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"

[tobySolutions]

Can we get a repro please @TerrySlack? It'll be easier to help us set see the issue and then figure out possible solutions to it.

[TerrySlack]

@tobySolutions

Here you go: https://github.com/TerrySlack/millionjs-bug

[TerrySlack]

@tobySolutions were you able to detect the issue(s) in the repo I provided?

[TerrySlack]

@tobySolutions ?

[norbertorok92]

@tobySolutions @TerrySlack @aidenybai any updates on this?

[TerrySlack]

@norbertorok92 I've pinged them a few times, since providing a repo and no response. I'd love to use this library, but at this point, I'm moving on. If they ever decide to put out an update, I'll revisit. I can't wait any longer

[tobySolutions]

Hmm, sorry about this @TerrySlack and @norbertorok92.

Can you install the latest version please and then retry this. Also, I'd love to see your configuration file to see how you set up Million.

[TerrySlack]

@tobySolutions You can view it in the repo you requested, amd I provided in the comment from Aug 1

[tobySolutions]

@tobySolutions You can view it in the repo you requested, amd I provided in the comment from Aug 1

Really sorry for the late response. Nobert brought it up with the team too and I'm looking into it.

I'll keep you updated as I might not be able to look at this myself at the moment. I'm a bit under the weather.

Thanks for responding!

[TerrySlack]

@tobySolutions How is it going? Any progress?

[tobySolutions]

@tobySolutions How is it going? Any progress?

Hey Terry! Yep! Nobert was able to fix his bug, but, I'm not sure if the same thing can apply to you.

I'll share it here soon so you can have a read through of hos solution

[TerrySlack]

Hey Toby, Well, that's ambiguous :)

So are you saying it doesn't work with Windows? Or Webpack? If it's a webpack thing, I can give it a try on Vite if necessary. If it's my configuration in Webpack, I'm open to any suggestions your team has. I really like what I have read about million and can see a perfect use for it in an upcoming project.

[TerrySlack]

@tobySolutions I'm going to be hitting a hard deadline on whether to use millions or not. Do you have a solution for windows, typescript and webpack 5? If the repo I provided needs tweaks that can happen. Is this a lib that works cross platform? If so, what tweaks need to be made to have ot work with webpack 5 and typescript?
I love the concept of this lib and hope there is a solution.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.

[TerrySlack]

@tobySolutions Well, when I get a github bot pointing out how stale this issue is, I realize that a solution isn't coming. To bad. Really love the concept.

[tobySolutions]

Hey there @TerrySlack; that's just github actions being weird though. The issue is still actively under review

[TerrySlack]

Hey @tobySolutions , culd I get an update on what is happening?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.

[tobySolutions]

Are you still getting this @TerrySlack? 🤔🤔

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.

[boyum]

I can't answer for @TerrySlack, but I'm noticing the same error in https://github.com/NDLANO/h5p-editor-topic-map/pull/641. By setting the transpileOnly: true option on ts-loader, the errors disappeared from the build, but the browser console is now saying that React is not defined.

Thanks for looking into this!

[TerrySlack]

@tobySolutions I haven't tried using your library since I filed this bug. I haven't heard of any uodates regarding it. Have things been fixed? Curious, did you use the repo I provided to test things out?

Terry

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.

[9gustin]

I have the same issue, transpileOnly: true, works fine for me. Thanks ;)

[tobySolutions]

Im having the same issue. It happens in auto and manual mode. Without this plugin it runs fine. Im executing

"start": "NODE_ENV=development webpack-dev-server --mode development",

related packages

   "webpack": "^5.60.0",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.3.1",
    "webpack-server": "^0.1.2",
    "million": "^2.6.4",
    "typescript": "^4.4.4",

webpack.config.js

const dotenv = require('dotenv').config()
const Dotenv = require('dotenv-webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')

const webpack = require('webpack')
const million = require("million/compiler");

const APP_MODE = process.env.NODE_ENV || 'development'
const APP_PORT = process.env.APP_PORT || '3000'
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  entry: './src/index.tsx',
  mode: APP_MODE,
  output: {
    filename: '[name].chunk.js',
    path: path.join(__dirname, 'build'),
    clean: true,
  },
  devServer: {
    port: APP_PORT,
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
    allowedHosts: ['*', 'dev.cor.com', 'cor.com'],
  },
  module: {
    rules: [
      {
        /* The following line to ask babel 
             to compile any file with extension
             .js */
        test: /\.js?$/,
        /* exclude node_modules directory from babel. 
            Babel will not compile any files in this directory */
        exclude: [/node_modules/],
        // To Use babel Loader
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env' /* to transfer any advansed ES to ES5 */, '@babel/preset-react'], // to compile react to ES5
        },
      },
      {
        test: [/\.tsx?$/, /\.ts?$/],
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        // The following rule is set to add all css compiler rules
        test: /\.css$/i,
        use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              limit: 10000,
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.jsx', '.js', '.ts', '.tsx', '.json', '.css', '.jpg', '.jpeg', '.png', '.svg'],
    fallback: { 'process/browser': require.resolve('process/browser') },
    alias: {
      react: path.resolve('./node_modules/react'),
    },
  },
  plugins: [
    million.webpack(),
    // Dot env plugin to get .env variables to npm process
    new Dotenv(),
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser',
    }),
    new MiniCssExtractPlugin({
      filename: isProduction ? `static/css/[name].[contenthash].css` : '[name].css',
      chunkFilename: `static/css/[id].[contenthash].css`,
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({ parallel: true })],
    splitChunks: {
      // include all types of chunks
      chunks: 'all',
      cacheGroups: {
        vendor: {
          name: 'node_vendors',
          test: /[\\/]node_modules[\\/]/,
          chunks: 'all',
        },
      },
    },
  },
}

isProduction && (module.exports['devtool'] = 'source-map')
isProduction && module.exports['plugins'].push(new webpack.optimize.AggressiveMergingPlugin())

Hey there! Thanks for this, I think a reproduction will be much better actually. Thank you!

[9gustin]

Im having the same issue. It happens in auto and manual mode. Without this plugin it runs fine. Im executing

"start": "NODE_ENV=development webpack-dev-server --mode development",

related packages ``` "webpack": "^5.60.0", "webpack-bundle-analyzer": "^4.5.0", "webpack-cli": "^4.9.1", "webpack-dev-server": "^4.3.1", "webpack-server": "^0.1.2", "million": "^2.6.4", "typescript": "^4.4.4", ```

webpack.config.js

const dotenv = require('dotenv').config()
const Dotenv = require('dotenv-webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')

const webpack = require('webpack')
const million = require("million/compiler");

const APP_MODE = process.env.NODE_ENV || 'development'
const APP_PORT = process.env.APP_PORT || '3000'
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  entry: './src/index.tsx',
  mode: APP_MODE,
  output: {
    filename: '[name].chunk.js',
    path: path.join(__dirname, 'build'),
    clean: true,
  },
  devServer: {
    port: APP_PORT,
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
    allowedHosts: ['*', 'dev.cor.com', 'cor.com'],
  },
  module: {
    rules: [
      {
        /* The following line to ask babel 
             to compile any file with extension
             .js */
        test: /\.js?$/,
        /* exclude node_modules directory from babel. 
            Babel will not compile any files in this directory */
        exclude: [/node_modules/],
        // To Use babel Loader
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env' /* to transfer any advansed ES to ES5 */, '@babel/preset-react'], // to compile react to ES5
        },
      },
      {
        test: [/\.tsx?$/, /\.ts?$/],
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        // The following rule is set to add all css compiler rules
        test: /\.css$/i,
        use: [isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              limit: 10000,
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.jsx', '.js', '.ts', '.tsx', '.json', '.css', '.jpg', '.jpeg', '.png', '.svg'],
    fallback: { 'process/browser': require.resolve('process/browser') },
    alias: {
      react: path.resolve('./node_modules/react'),
    },
  },
  plugins: [
    million.webpack(),
    // Dot env plugin to get .env variables to npm process
    new Dotenv(),
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser',
    }),
    new MiniCssExtractPlugin({
      filename: isProduction ? `static/css/[name].[contenthash].css` : '[name].css',
      chunkFilename: `static/css/[id].[contenthash].css`,
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({ parallel: true })],
    splitChunks: {
      // include all types of chunks
      chunks: 'all',
      cacheGroups: {
        vendor: {
          name: 'node_vendors',
          test: /[\\/]node_modules[\\/]/,
          chunks: 'all',
        },
      },
    },
  },
}

isProduction && (module.exports['devtool'] = 'source-map')
isProduction && module.exports['plugins'].push(new webpack.optimize.AggressiveMergingPlugin())

Hey there! Thanks for this, I think a reproduction will be much better actually. Thank you!

Forget it! just add transpileOnly: true, and it builds. Thanks ❤️

[tobySolutions]

Hmm, thank you very much @9gustin!! I should definitely document this. I'll put a tab on this.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.