Compatibility issue with Next.js 11

[yarivShamash]

Hey, first I would like to thank you for that great repo, so nice and made my code much more elegant. A few moments back I migrated my Next.js project from Next.js 10 to the new Next.js 11 which uses webpack 5 by default. After the migration I got a warning that the global variable process, from which I get the environment variables (through process.env), is undefined. I started debugging and finally managed to sort things out by commenting out your repo imports.

Is there a solution that will let me keep using this lovely repo? I checked webpack docs and it doesn't seem to come form there (https://webpack.js.org/configuration/resolve/)

webpack.congig.js:

const path = require('path');
var DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');

.
.
.

const factory = (webpack, env = {}) => ({
  resolve: {
    plugins: [new DirectoryNamedWebpackPlugin(true)]
  },
  module: { ... }
});

module.exports = {
  default: factory
};

next.config.js

const { merge } = require('webpack-merge');
const { default: webpackConfigFactory } = require('./webpack.config');

module.exports = {
  images: {
    domains: ['cdn.shopify.com', 'd1409mlr985zvc.cloudfront.net']
  },
  webpack: (nextConfig, { dev, webpack }) =>
    merge(nextConfig, webpackConfigFactory(webpack, { production: !dev }), {
      devtool: dev ? 'eval-source-map' : false
    })
};

[shaketbaby]

This is interesting. This plugin just tells Webpack which file a given path should be resolved to. I don't really see how this plugin would affect the value of process. Where are you using process? Is it inside one of your modules that you are importing?

[yarivShamash]

Hey @shaketbaby, thanks for your reply.

I'm using process in __test__/setup/env.js:

import { loadEnvConfig } from '@next/env';

export default async () => {
  const projectDir = process.cwd();
  loadEnvConfig(projectDir);
};

and also in src/config/constants.js where I an importing a few environment variables.

[shaketbaby]

Thanks, but I am not sure this plugin is the root cause. As said earlier, this plugin only tells Webpack what file a given directory path should be loaded, nothing else. I am not using Next.js myself so not that familiar with it, but if you are able to come up with a minimal project that demonstrates this issue, I can try to figure out.

[yarivShamash]

Dear Hao, you are correct. As it turns out, the issue is not caused by directory-naned-webpack-plugin. When I opened a new project with next,js-11 and installed it the issue did not reproduce. Thank you for your help and this convenient directory :)

On Wed, Jul 7, 2021 at 1:56 AM Hao @.***> wrote:

Thanks, but I am not sure this plugin is the root cause. As said earlier, this plugin only tells Webpack what file a given directory path should be loaded, nothing else. I am not using Next.js myself so not that familiar with it, but if you are able to come up with a minimal project that demonstrates this issue, I can try to figure out.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/shaketbaby/directory-named-webpack-plugin/issues/53#issuecomment-875135640, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ72X2VVY2Z23DNTXI3O2ETTWOCZJANCNFSM47F2DFIQ .