Not working with nextjs

Question

Not working with nextjs

YgorPerez opened this issue 2 years ago · 9 comments

I'm trying to use it in Next.js and I get this error:

import { EntryPlugin } from "webpack";
         ^^^^^^^^^^^
SyntaxError: Named export 'EntryPlugin' not found. The requested module 'webpack' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'webpack';
const { EntryPlugin } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:127:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:193:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async Object.loadConfig [as default] (C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\next@13.1.6_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\server\config.js:77:36)
    at async nextDev (C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\next@13.1.6_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\cli\next-dev.js:423:22)

This is my next.config.mjs file:

import { TailwindCSSWebpackPlugin } from 'tailwindcss-webpack-plugin'
config = {
...config
  webpack: (config, { dev }) => {
    dev && config.plugins.push(new TailwindCSSWebpackPlugin())
    return config
  },
}

Answer 1 · 2023-03-27T03:30:09.000Z

Hi, @YgorPerez, I just tried creating the latest version of the Next.js project and adding tailwindcss-webpack-plugin, and everything seems to work fine.

Could you provide a minimal repository to reproduce this problem? Thank you very much ~

Sorry for my late reply.

Answer 2 · 2023-03-27T06:11:07.000Z

I will try it out in a couple of minutes in a new t3 scaffold!

Answer 3 · 2023-03-27T06:38:22.000Z

Same error https://github.com/YgorPerez/webpack-plugin-bug

Answer 4 · 2023-03-27T06:41:27.000Z

I'm probably doing something wrong, since I got this error if I didn't install webpack:

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'webpack' imported from C:\Users\azaz2\OneDrive\Documentos\github\webpack-plugin-bug\node_modules\.pnpm\tailwindcss-webpack-plugin@0.0.11\node_modules\tailwindcss-webpack-plugin\dist\index.mjs
Did you mean to import webpack-plugin-bug/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/webpack/webpack-lib.js?
    at new NodeError (node:internal/errors:371:5)
    at packageResolve (node:internal/modules/esm/resolve:932:9)
    at moduleResolve (node:internal/modules/esm/resolve:978:18)
    at defaultResolve (node:internal/modules/esm/resolve:1080:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)
    at link (node:internal/modules/esm/module_job:78:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Answer 5 · 2023-03-27T07:35:03.000Z

Thanks for providing the repository to reproduce the problem.

I found that we should set auto-install-peers=true in .npmrc to make sure auto install tailwindcss-webpack-plugin's peer depenency webpack(this setting is set by default in pnpm v8, so I didn't report an error before).

After that, I encountered the error you mentioned at the beginning:

SyntaxError: Named export 'EntryPlugin' not found. The requested module 'webpack' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'webpack';
const { EntryPlugin } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async Object.loadConfig [as default] (/Users/zhenwei.song/Documents/test/webpack-plugin-bug/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/config.js:78:36)
    at async NextServer.prepare (/Users/zhenwei.song/Documents/test/webpack-plugin-bug/node_modules/.pnpm/next@13.2.4_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/next.js:134:24)

It looks like webpack doesn't provide an export in esm format, so let's just replace next.config.mjs with next.config.js here:

This should be no problem.

Answer 6 · 2023-03-27T07:36:54.000Z

Also, if you want to use "Design in devtools" mode, you need to manually import _tailwind-devtools_.js' in pages/_app.tsx:

https://github.com/await-ovo/tailwindcss-webpack-plugin/tree/main/packages/webpack-plugin#entry

Answer 7 · 2023-03-27T13:54:18.000Z

Thanks for providing the repository to reproduce the problem.

No problem, the problem was me anyway 🤣, thank you for taking the time to solve this issue

I found that we should set auto-install-peers=true in .npmrc to make sure auto install tailwindcss-webpack-plugin's peer depenency webpack(this setting is set by default in pnpm v8, so I didn't report an error before).

Cool, I didn't know that!

It looks like webpack doesn't provide an export in esm format, so let's just replace next.config.mjs with next.config.js

Kinda sad honestly

Also, if you want to use "Design in devtools" mode, you need to manually import _tailwind-devtools_.js' in pages/_app.tsx:

I don't know where to import it from

Module not found: Can't resolve '_tailwind-devtools_.js'
  4 | import { type AppType } from 'next/app'
  5 | import { lazy, Suspense, useEffect, useState } from 'react'
> 6 | import '_tailwind-devtools_.js'
  7 | import '../styles/globals.css'
  8 | import { api } from '../utils/api'

Answer 8 · 2023-03-27T15:43:00.000Z

We set _tailwind-devtools_.js alias in tailwindcss-webpack-plugin.

I'm not quite sure why this error is occurring. you can update the code the above repository, thanks a lot ~

Answer 9 · 2023-03-29T08:04:28.000Z

Sorry for the late reply, I couldn't reproduce it in the small repo, but the larger was the one I got the error, I'm getting a different error now when entering the page

event - compiled client and server successfully (348 modules)
Error: EINVAL: invalid argument, utime 'C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\src\styles\globals.css'
    at utimesSync (node:fs:1975:3)
    at Service.invalidateCssModule (C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\tailwindcss-webpack-plugin@0.0.11_webpack@5.76.3\node_modules\tailwindcss-webpack-plugin\dist\index.js:131:30)
    at C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\tailwindcss-webpack-plugin@0.0.11_webpack@5.76.3\node_modules\tailwindcss-webpack-plugin\dist\index.js:186:36
    at Hook.eval [as call] (eval at create (C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\next@13.1.6_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\webpack\bundle5.js:13:28549), <anonymous>:9:1)
    at Watching.invalidate (C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\next@13.1.6_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\webpack\bundle5.js:28:486644)
    at Invalidator.invalidate (C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\next@13.1.6_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\server\dev\on-demand-entry-handler.js:126:116)
    at Object.ensurePage (C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\next@13.1.6_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\server\dev\on-demand-entry-handler.js:466:33)
    at async DevServer.getFallbackErrorComponents (C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\next@13.1.6_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\server\dev\next-dev-server.js:1058:9)
    at async DevServer.renderErrorToResponse (C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\next@13.1.6_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\server\base-server.js:1178:40)
    at async pipe.req.req (C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\next@13.1.6_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\server\base-server.js:1075:30)
    at async DevServer.pipe (C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\next@13.1.6_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\server\base-server.js:407:25)
    at async DevServer.run (C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\next@13.1.6_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\server\dev\next-dev-server.js:751:28)
    at async DevServer.handleRequest (C:\Users\azaz2\OneDrive\Documentos\github\spotify-api-challenge\node_modules\.pnpm\next@13.1.6_biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\server\base-server.js:322:20) {
  errno: -4071,
  syscall: 'utime',
  code: 'EINVAL',
  path: 'C:\\Users\\azaz2\\OneDrive\\Documentos\\github\\spotify-api-challenge\\src\\styles\\globals.css'
}

I don't know why it didn't happen in the smaller repo