Module parse failed

[rik-lugtenberg]

Hi,

By installing flagsmith version 3.9.0 and importing the following line

import { FlagsmithProvider } from 'flagsmith/react';

i am getting the following error

ERROR in ./node_modules/flagsmith/react/index.tsx 16:7
Module parse failed: Unexpected token (16:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| export const FlagsmithContext = createContext<IFlagsmith | null>(null)
> export type FlagsmithContextType = {
|     flagsmith: IFlagsmith // The flagsmith instance
|     options?: Parameters<IFlagsmith['init']>[0] // Initialisation options, if you do not provide this you will have to call init manually
 @ ./src/App.tsx 21:0-52 93:32-49
 @ ./src/index.tsx 3:0-28 7:32-35

webpack 5.74.0 compiled with 1 error in 8772 ms

If I go back to the version before there is no issue.

My webpack.config.js

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const SourceMapDevToolPlugin = require('webpack');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/public/index.html',
filename: 'index.html',
inject: 'body',
});

const config = {
    entry: ['./src/index.tsx'],
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'index.js',
    },
    devServer: {
        historyApiFallback: true,
        static: {
            directory: path.resolve(__dirname, 'public'),
        },
    },
    // exclude: /node_modules/,
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
            },
            {
                test: /\.ts(x)?$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.js$/,
                enforce: 'pre',
                use: ['source-map-loader'],
            },
            {
                test: /\.scss$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.css$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader?importLoaders=1!postcss-loader',
                ],
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                type: 'asset/resource',
                generator: {
                    filename: '[path][name][ext]',
                },
            },
            {
                test: /\.(woff(2)?|ttf|otf|eot)(\?v=\d+\.\d+\.\d+)?$/,
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[name][ext]',
                },
            },
        ],
    },
    ignoreWarnings: [/Failed to parse source map/],
    resolve: {
        extensions: ['.wasm', '.ts', '.tsx', '.mjs', '.cjs', '.js', '.json'],
        alias: {
            'react': path.resolve('node_modules/react'),
            'react-dom': path.resolve('node_modules/react-dom'),
        },
        fallback: {
            'url': false,
            'fs': false,
            'tls': false,
            'net': false,
            'path': false,
            'zlib': false,
            'http': false,
            'https': false,
            'stream': false,
            'util': false,
            'crypto': false,
            'bufferutil': false,
            'utf-8-validate': false,
        },
    },
    plugins: [
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
        new MiniCssExtractPlugin({ filename: `styles.css` }),
        HTMLWebpackPluginConfig,
    ],
};

module.exports = config;

[Ben Rometsch]

Moved this from the main flagsmith repo to the JS client as seemed appropriate.

[Kyle Johnson]

Thanks for reporting, we output ts(x) files to node modules now to support source-mapping, it seems that we need to keep the originals in a separate folder to prevent webpack setups like this.

@rik-lugtenberg as a temporary solution I believe the following will work:

import { FlagsmithProvider } from 'flagsmith/react/index.js';

I'll get a fix for this out later today.

[Kyle Johnson]

This should be fixed in 3.9.2, please re-open if you believe this is not the case.