When I setup playroom for my react project, I get below error but I don't know why.</p

Added this configuration but it is still the same error: <div class="snippet-clipb

Why does it show `Unexpected token`? about playroom HOT 4 CLOSED

seek-oss commented on May 22, 2024

Why does it show `Unexpected token`?

from playroom.

Comments (4)

markdalgleish commented on May 22, 2024 1

Your TypeScript loader is targeting every file in the webpack build, which includes Playroom's own internal source. Try adding exclude: /node_modules/ to your rule.

from playroom.

flybayer commented on May 22, 2024 1

This is working for me. I copied it from the internal webpack config and fixed the paths.

    module: {
      rules: [
      {
          test: /\.(ts|tsx)$/,
          include: __dirname,
          exclude: /node_modules/,
          use: {
            loader: require.resolve('babel-loader'),
            options: {
              presets: [
                require.resolve('@babel/preset-env'),
                require.resolve('@babel/preset-react'),
                require.resolve('@babel/preset-typescript')
              ],
              plugins: [
                require.resolve('@babel/plugin-proposal-class-properties')
              ]
            }
          }
        },
        {
          test: /\.js$/,
          include: __dirname,
          exclude: /node_modules/,
          use: {
            loader: require.resolve('babel-loader'),
            options: {
              presets: [
                require.resolve('@babel/preset-env'),
                require.resolve('@babel/preset-react')
              ],
              plugins: [
                require.resolve('@babel/plugin-proposal-class-properties')
              ]
            }
          }
        }
      ],
    },

from playroom.

markdalgleish commented on May 22, 2024

Closing for now because this is an issue with custom webpack config, not with Playroom itself.

from playroom.

zhaoyi0113 commented on May 22, 2024

Added this configuration but it is still the same error:

module: {
      rules: [
        // .ts, .tsx
        {
          test: /\.tsx?$/,
          exclude: [path.resolve(__dirname, "node_modules")],
          use: [
            {
              loader: 'babel-loader',
              options: { plugins: ['react-hot-loader/babel'] }
            },
            'ts-loader'
          ].filter(Boolean)
        }
      ]
    },

from playroom.

Recommend Projects