Error after upgrading to latest version in React: presetHTML5.extend is not a function

[bmt2604]

Hello,

I upgraded the package version of @bbob/react and @bbob/preset-react from 2.9.0 to 3.0.2 in my React application and started seeing this error: TypeError: presetHTML5.extend is not a function.

I was previously importing from the package like so:

import BBCode from '@bbob/react';
import presetReact from '@bbob/preset-react';

but have found that since upgrading, the only way I've found to fix the error is to include /lib in the import path:

import BBCode from '@bbob/react/lib';
import presetReact from '@bbob/preset-react/lib';

Is this an expected change to have to make when using the latest version?

[JiLiZART]

Thanks for report. I will check.

[JiLiZART]

I doublechecked and found that all es and lib packages exports default

For es

export { default } from './Component';
export { render } from './render';

For lib

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
function _export(target, all) {
    for(var name in all)Object.defineProperty(target, name, {
        enumerable: true,
        get: all[name]
    });
}
_export(exports, {
    default: function() {
        return _component.default;
    },
    render: function() {
        return _render.render;
    }
});
var _component = /*#__PURE__*/ _interopRequireDefault(require("./Component"));
var _render = require("./render");
function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}

2.9.0
https://yarnpkg.com/package?q=%40bbob%2Freact&name=%40bbob%2Freact&version=2.9.0&file=%2Fes%2Findex.js
3.0.2
https://yarnpkg.com/package?q=%40bbob%2Freact&name=%40bbob%2Freact&version=3.0.2&file=%2Fes%2Findex.js

@bmt2604 Please can you share your bundler config, so I can try to investigate whats wrong

[bmt2604]

Hi, thank you for your response and for looking into it. Here is the bundler config:

babel config:

{
    "presets": [
        "razzle/babel",
        [
            "@babel/preset-react",
            {
                "runtime": "automatic"
            }
        ]
    ],
    "plugins": [
        "@emotion",
        "@loadable/babel-plugin",
        "transform-react-remove-prop-types",
        "@babel/plugin-transform-react-constant-elements",
        "@babel/plugin-transform-react-inline-elements",
        [
            "transform-imports",
            {
                "react-router": {
                    "transform": "react-router/${member}",
                    "preventFullImport": true
                },
                "lodash": {
                    "transform": "lodash/${member}",
                    "preventFullImport": true
                }
            }
        ]
    ]
}

ts config:

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "downlevelIteration": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "noUnusedLocals": true,
        "jsx": "react-jsx",
        "baseUrl": "src",
        "paths": {
            "test-utils": ["../__mocks__/test-utils"]
        },
        "sourceMap": true
    },
    "include": ["src"]
}

webpack config:

modifyWebpackConfig({
        env: {
            target, // the target 'node' or 'web'
            dev // is this a development build? true or false
        },
        webpackConfig // the created webpack config
    }) {
        const isDev = dev === true;
        const isWeb = target === 'web';

        const appConfig = Object.assign({}, webpackConfig);

        // Run client only
        if (isWeb) {
            const filename = path.resolve(__dirname, 'build');

            appConfig.plugins.push(
                new NodePolyfillPlugin(),
                new LoadableWebpackPlugin({
                    outputAsset: false,
                    writeToDisk: { filename }
                }),
                new webpack.SourceMapDevToolPlugin({
                    noSources: false,
                    filename: '[file].map'
                })
            );

            appConfig.output.filename = isDev
                ? 'static/js/[name].js'
                : 'static/js/[name].[chunkhash:8].js';

            appConfig.optimization = Object.assign({}, appConfig.optimization, {
                runtimeChunk: true,
                splitChunks: {
                    name: isDev ? false : 'vendor',
                    chunks: 'all',
                    maxInitialRequests: Infinity,
                    cacheGroups: {
                        vendor: {
                            test: /[\\/]node_modules[\\/]/,
                            name(module) {
                                const packageName = module.context.match(
                                    /[\\/]node_modules[\\/](.*?)([\\/]|$)/
                                )[1];
                                return `npm.${packageName.replace('@', '')}`;
                            },
                            enforceSizeThreshold: 30000
                        }
                    }
                },
                moduleIds: 'hashed' // so that file hashes don't change unexpectedly
            });
        }
        return appConfig;
    }