Error when migrate to 0.4.1

[tienlx97]

I got this error when migrate to 0.4.1

_stylexjs_stylex__WEBPACK_IMPORTED_MODULE_1___default(...).inject is not a function

• This is webpack config:

const options = {
  cache: true,
  entry: path.join(__dirname, "src", "index.js"),
  infrastructureLogging: {
    level: "info",
  },
  mode: process.env.NODE_ENV || "development",
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "postcss-loader",
          },
        ],
      },
      {
        exclude: /node_modules/,
        test: /\.(js|jsx)$/,
        use: [
          {
            loader: "source-map-loader",
          },
          {
            loader: "babel-loader",
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
      },
    ],
  },
  output: {
    clean: true,
    filename: "app.bundle.js",
    path: path.resolve(__dirname, "build"),
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [{ from: "./src/faang/assets", to: "faang/assets" }],
    }),
    new Dotenv(),
    new CleanWebpackPlugin({ verbose: false }),
    new webpack.ProgressPlugin(),
    new webpack.EnvironmentPlugin(["NODE_ENV"]),
    new HtmlWebpackPlugin({
      cache: false,

      chunks: ["index"],

      filename: "index.html",
      // eslint-disable-next-line no-undef
      template: path.join(__dirname, "public", "index.html"),
    }),
    // Ensure that the stylex plugin is used before Babel
    new StylexPlugin({
      filename: "styles.[contenthash].css",
      // get webpack mode and set value for dev
      dev: env.NODE_ENV === "development",
      // Use statically generated CSS files and not runtime injected CSS.
      // Even in development.
      runtimeInjection: false,
      // optional. default: 'x'
      classNamePrefix: "x",
      // Required for CSS variable support
      unstable_moduleResolution: {
        // type: 'commonJS' | 'haste'
        // default: 'commonJS'
        type: "commonJS",
        // The absolute path to the root directory of your project
        rootDir: __dirname,
      },
    }),
  ],
};

if (env.NODE_ENV === "development") {
  options.devtool = "cheap-module-source-map";
} else {
  options.optimization = {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
      }),
    ],
  };
}

module.exports = options;

• This is babel config:

const config = {
  plugins: [
    ["react-hot-loader/babel"],
    ["relay"],
    [
      styleXPlugin,
      {
        dev: true,
        // Set this to true for snapshot testing
        // default: false
        test: false,
        // Required for CSS variable support
        unstable_moduleResolution: {
          // The absolute path to the root directory of your project
          // eslint-disable-next-line no-undef
          rootDir: __dirname,

          // type: 'commonJS' | 'haste'
          // default: 'commonJS'
          type: "commonJS",
        },
      },
    ],
    [
      "babel-plugin-fbt",
      {
        // eslint-disable-next-line no-undef
        fbtCommonPath: path.join(__dirname, "i18n/fbt/common_strings.json"),
      },
    ],
    "babel-plugin-fbt-runtime",
  ],
  presets: ["@babel/preset-react"],
};

[nmn]

This is now a known issue. Investigating. It seems like some package managers don't handle import statements inserted during build correctly in certain scenarios.

I will be adding a new option to inject a require call instead.

Also, NOTE, that setting dev: false will fix this problem. There is a bug with runtimeInjection: false not working right now.

[nmn]

Should be fixed in 0.5.0-alpha.1. Would appreciate if you could test that it works now?