dynamic-cdn-webpack-plugin

dynamic-cdn-webpack-plugin copied to clipboard

Hello, I'm trying to integrate this webpack plugin with my Next.JS web application. Following is my next.config.js. It works in the production mode but not in the development mode.

Did anyone successfully integrate this plugin with the Next.JS?

const HtmlWebpackPlugin = require('html-webpack-plugin');
const DynamicCdnWebpackPlugin = require("dynamic-cdn-webpack-plugin");

module.exports = withPlugins([withTM], {
  webpack: (config, options) => {
    if (!options.isServer) {
      config.plugins.push(
        new DynamicCdnWebpackPlugin({
          only: ['react', 'react-dom']
        }),
      )
    return config;
  }
})

I'm also curious about if there are issues with this working with Nuxt.JS (Vue's version of Nuxt.JS). The following config doesn't seem to use the cdn to load the two apexcharts packages (and still distributes them). Do I need to move them from dependencies to devDependencies?

  // nuxt.config.js
  ...
  build: {
    plugins: [
      new HtmlWebpackPlugin(),
      new DynamicCdnWebpackPlugin({
        only: [
          'vue-apexcharts',
          'apexcharts'
        ]
      })     
    ]
  }
  ...

  // package.json
  ...
  "dependencies": {
    "apexcharts": "^3.26.0",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3",
    "vue-apexcharts": "^1.6.1",
  },
  ...

@mspinelli the default cdn resolver might not have those packages. I'm a bit caught up with stuff this week but I'll try to look into this next week.

@mspinelli the default cdn resolver might not have those packages. I'm a bit caught up with stuff this week but I'll try to look into this next week.

@aulisius Correct and thanks! I ended up doing this (and turning verbose on showed that being the issue).

I also needed to do this:

    plugins: [
      new DynamicCdnWebpackPlugin({
        verbose: true,
        env: 'production',
        resolver: (packageName, packageVersion) => {
          return {
            name: packageName,
            var: packageName.replace('@', ''),
            version: packageVersion,
            url: `https://cdn.jsdelivr.net/npm/${packageName}@${packageVersion}/dist/${packageName}.min.js`
          }
        },
        only: [
          'vue-apexcharts',
          'apexcharts'
        ]
      })

any update for nextjs. I config on next.config.js but it does not work, when I run my web throw error:

external "React":1 Uncaught ReferenceError: React is not defined