Integration with Next.js

[aktoriukas]

Type of issue

Set-up with Next.js

Description

Facing issue with Nextjs integration with Prebid.js. Following example from ( https://www.npmjs.com/package/prebid.js ) by extending webpack config in next.config.js:

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
  },
}

after this while trying to import prebid.js facing this error:

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

SyntaxError: Cannot use import statement outside a module

Steps to reproduce

Fresh install of Nextjs

Test page

Expected results

Actual results

Platform details

Nextjs "12.2.2"
React "^17.0.2"

Other information

[aktoriukas]

here is a code sample: codesandbox

[ChrisHuie]

@aktoriukas do you need the server side rendering from Next? I am able to get working with create-react-app but Next's build process is a bit more complex?

[aktoriukas]

@ChrisHuie it can be client or server side , it does not really matter that much for now. Can you share process that you follow integrating with React and also Next.js if you manage?

I have managed integrate it by downloading generated file from prebid .
But that's not what i'm after. I would like import them from library ( NPM ). Something like codesandbox example above.

[ChrisHuie]

We think this pr will fix your current issue with Next -> #9558