RenderCode.js: additional loader to handle the result of these loaders.

[hazem3500]

When running playroom, I get the error

ERROR  Failed to compile with 1 errors                                                                                                                              8:34:25 AM
 error  in ./node_modules/playroom/src/Playroom/RenderCode/RenderCode.js

Module parse failed: Unexpected token (9:43)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   scope
| }) {
>   return scopeEval(code, { ...(useScope() ?? {}),
|     ...scope,
|     React

 @ ./node_modules/playroom/src/Playroom/Preview.tsx 11:0-49 41:38-48
 @ ./node_modules/playroom/src/preview.js
 @ multi webpack-dev-server/client?http://localhost:4242 webpack/hot/dev-server ./node_modules/playroom/src/preview.js

apparently, there is an issue with the babel and webpack config but am not sure what

I am using babel present @babel/preset-typescript, @babel/env and @babel/preset-react with plugins @babel/plugin-proposal-optional-chaining and @babel/plugin-proposal-nullish-coalescing-operator

here is my webpack config

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const toPath = (_path) => path.join(process.cwd(), _path);

module.exports = {
    mode: 'production',
    entry: './src/index.tsx',
    target: 'node',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist/lib'),
        libraryTarget: 'umd',
    },
    externals: {
        react: 'react',
        'react-dom': 'react-dom',
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                include: __dirname,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-typescript',
                            '@babel/env',
                            '@babel/preset-react',
                        ],
                        plugins: [
                            '@babel/plugin-proposal-class-properties',
                            '@babel/plugin-proposal-optional-chaining',
                            '@babel/plugin-proposal-nullish-coalescing-operator',
                        ],
                    },
                },
            },
            {
                test: /\.css$/i,
                exclude: [
                    {
                        test: path.resolve(__dirname, 'node_modules'),
                        exclude: [
                            path.resolve(
                                __dirname,
                                'node_modules/typeface-inter'
                            ),
                            path.resolve(
                                __dirname,
                                'node_modules/@adamdotai/typeface-notokufiarabic'
                            ),
                        ],
                    },
                ],
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader'],
            },
        ],
    },
    resolve: {
        extensions: ['.js', '.ts', '.tsx'],
        alias: {
            '@emotion/core': toPath('node_modules/@emotion/react'),
            'emotion-theming': toPath('node_modules/@emotion/react'),
        },
    },
    plugins: [new MiniCssExtractPlugin()],
};

And here is the playroom.config.js

const path = require('path');

const toPath = (_path) => path.join(process.cwd(), _path);

const webpackConfig = require('./webpack.config');

module.exports = {
    components: './src/components/index.tsx',
    outputPath: './storybook-static/playroom',
    port: 4242,
    frameComponent: './src/providers/Root/Root.tsx',
    openBrowser: false,
    webpackConfig: () => ({
        module: {
            ...webpackConfig.module,
        },
        resolve: {
            ...webpackConfig.resolve,
            alias: {
                ...webpackConfig.resolve.alias,
                '@emotion/core': toPath('node_modules/@emotion/react'),
                'emotion-theming': toPath('node_modules/@emotion/react'),
            },
        },
        plugins: [...webpackConfig.plugins],
    }),
};

and here is my tsconfig.json

{
    "compilerOptions": {
        "target": "es2019",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "react"
    },
    "include": ["src"],
    "exclude": ["node_modules"]
}

Is there something in my configuration I need to change?

[hazem3500]

A temporary fix was to downgrade to 0.21.7

[bigwoof91]

I'm facing the exact same issue but only in CI (circleci to be exact). I'm using playroom v0.23.0. I will try downgrading, but if anyone has a fix for this... would be awesome!

[kelyvin]

@hazem3500 @bigwoof91 Are you all still running into this issue?