Next.js 12.2.2集成Prebid.js npm包遇语法错误求助

问题 #

在Next.js 12.2.2（React ^17.0.2）项目中集成Prebid.js npm包时遇到模块语法错误。按照npm官方文档配置next.config.js的webpack规则后，导入Prebid.js时出现如下报错：

import {getGlobal} from './prebidGlobal.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module

即使不配置webpack也会触发相同错误。目前可通过外部脚本或纯React项目正常运行Prebid.js，但Next.js环境下无法集成，求可行方案。

原webpack配置代码：

let path = require("path")

module.exports = {
  reactStrictMode: true,
  webpack: (config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }) => {

    config.module.rules.push({
      test: /.js$/,
      include: new RegExp(`\\${path.sep}prebid\\.js`),
      use: [
        {
          loader: "babel-loader",
          options: require("prebid.js/.babelrc.js"),
        },
      ],
    })

    return config
  },
}

解决方案 #

方法一：动态导入+Next.js next/dynamic（推荐） #

Prebid.js属于UMD模块，通过动态导入可规避服务端渲染时的模块语法冲突：

1. 创建封装Prebid的组件PrebidAd.js：

import { useEffect } from 'react';

const PrebidAd = () => {
  useEffect(() => {
    const loadPrebid = async () => {
      const pbjs = await import('prebid.js');
      // 执行Prebid初始化逻辑
      pbjs.que.push(() => {
        // 配置广告单元示例
        pbjs.addAdUnits([
          // 填入你的广告单元配置
        ]);
        // 发起竞价请求
        pbjs.requestBids({
          bidsBackHandler: () => {
            // 处理竞价结果
          }
        });
      });
    };

    loadPrebid();
  }, []);

  return <div id="ad-container"></div>; // 广告挂载容器
};

export default PrebidAd;

2. 在页面中用next/dynamic导入组件并禁用服务端渲染：

import dynamic from 'next/dynamic';

const PrebidAd = dynamic(() => import('../components/PrebidAd'), {
  ssr: false,
});

export default function Home() {
  return (
    <div>
      <h1>首页</h1>
      <PrebidAd />
    </div>
  );
}

方法二：调整webpack配置处理模块语法 #

修改next.config.js，针对Prebid.js添加正确的babel转译规则：

const path = require('path');

module.exports = {
  reactStrictMode: true,
  webpack: (config, { isServer }) => {
    // 仅在客户端环境处理Prebid.js
    if (!isServer) {
      config.module.rules.push({
        test: /\.js$/,
        include: path.resolve(__dirname, 'node_modules/prebid.js'),
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['next/babel'],
            plugins: ['@babel/plugin-transform-modules-umd'],
          },
        },
      });
    }
    return config;
  },
};

之后在客户端组件中直接导入使用：

import pbjs from 'prebid.js';

useEffect(() => {
  pbjs.que.push(() => {
    // 填入你的Prebid业务逻辑
  });
}, []);

方法三：外部CDN脚本加载（最简方案） #

直接在_document.js中引入Prebid.js的CDN资源，绕开npm包的模块问题：
修改pages/_document.js：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* 加载Prebid.js CDN资源 */}
          <script async src="https://cdn.jsdelivr.net/npm/prebid.js@latest/dist/prebid.min.js"></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

在组件中通过全局pbjs对象调用：

useEffect(() => {
  if (window.pbjs) {
    window.pbjs.que.push(() => {
      // 填入你的Prebid业务逻辑
    });
  }
}, []);

内容的提问来源于stack exchange，提问作者aktoriukas