[edge] nuxt generate error with mini-css-extract-plugin

bovas85
115
bovas85
commented 2 years ago

Version

2.0

Reproduction link

https://antilophia-vue.nakedtesting.com

Steps to reproduce

npm uninstall nuxt
npm i --save nuxt-edge
npm run generate

/Users/dev/Desktop/antilophia-vue/node_modules/mini-css-extract-plugin/dist/index.js:26
const { Template, util: { createHash } } = _webpack2.default;
                          ^

TypeError: Cannot destructure property `createHash` of 'undefined' or 'null'.
    at Object.<anonymous> (/Users/developer2/Desktop/antilophia-vue/node_modules/mini-css-extract-plugin/dist/index.js:26:44)
    at Module._compile (module.js:649:30)
    at Object.Module._extensions..js (module.js:660:10)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
    at Module.require (module.js:593:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/developer2/Desktop/antilophia-vue/node_modules/mini-css-extract-plugin/dist/cjs.js:3:18)
    at Module._compile (module.js:649:30)

What is expected ?

generating static files

What is actually happening?

error above

bug
0

Cancelled

2 years ago by manniL

nagipogu
0
nagipogu
commented a year ago

I done this

npm uninstall nuxt
npm i --save nuxt-edge
npm run generate

Still not working..

0
pi0
37.3k
pi0
commented 2 years ago

Hi @bovas85. Thank you for the report. First of all, antilophia-vue is AMAZING!

For this error, it is really strange. Would you please try cleaning up .nuxt, node_modules and package-lock.json and installing everything again? Or if I can access your project's repository I can test.

0
bovas85
115
bovas85
commented 2 years ago

Hey @pi0 I'll try that, if it fails I can share it privately with you (as it's a client work). Thanks for the quick feedback and compliments :)

0
bovas85
115
bovas85
commented 2 years ago

Hey @pi0 I tried but it still happens.

I've invited you to the repository if you can take a look when you have a moment

0
benoitemile
95
benoitemile
commented 2 years ago

/unrelated but your site is awesome <3 nice transitions and stuff, great work

0
pi0
37.3k
pi0
commented 2 years ago

@bovas85 Would you please send me the link? I didn't received any invitation :)) (pyapar at gmail)

0
bovas85
115
bovas85
commented 2 years ago

Hmm odd I sent it to your profile email. I'll try again

0
bovas85
115
bovas85
commented 2 years ago

Try now please @pi0

0
LouisTakePILLz
0
LouisTakePILLz
commented 2 years ago

I don't use nuxt but the issue went away after upgrading to webpack 4.4.1.
I was on webpack 4.2.0 before upgrading.

0
pi0
37.3k
pi0
commented 2 years ago

Hey @bovas85. Sorry for the delay. I've checked and fixed your project locally (hadn't write permission for pushing)

Here are general notes (some are not related to the issue) but may be usable for other too:

  • nuxt.config.js is loaded through ESM. So don't try mixin require and imports. Prefer import/exports
  • It is highly recommended to use an external .postcssrc file for customizing postcss.
  • For a clean upgrade, after changing nuxt to nuxt-edge, remove yarn.lock, .nuxt and node_modules and make a fresh install.
  • nuxt-sass-resources-loader is incompatible with v2. I've made anteriovieira/nuxt-sass-resources-loader#11 for support. Meanwhile, you can use nuxt-community's fork using yarn add nuxt-sass[email protected]/nuxt-sass-resources-loader#feat/v2 command.
  • you can optionally use consola for your custom logs for more next ish :)
  • And finally, latest versions of nuxt-edge, webpack and mini-css-extract-plugin seem are working out of the box. (This Issue)
2
bovas85
115
bovas85
commented 2 years ago

Thanks I will check these and let you know

0
bovas85
115
bovas85
commented 2 years ago

Hi @pi0 , I gave you write access for this.
I'm not clear on the pointer about the require and imports. Can you send me a commit so I can understand?

0
bovas85
115
bovas85
commented 2 years ago

I also receive an error when running dev for this eslint section:

/*
      ** Run ESLint on save
      */
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/,
        })

If I remove it it compiles fine

0
bovas85
115
bovas85
commented 2 years ago

@pi0 can you take a look at the repo?

If I remove that it compiles, but I see some inconsistencies with styles (as in some styles are not carrying over compared to my regular nuxt, when generating a static site)

Let me know if I should create a separate issue please

0
lucpotage
76
lucpotage
commented 2 years ago

@bovas85 I had the same problem because I used the starter template. After upgrading estlint-loader to version 2.0, it worked like a charm without changing any line of code. ✨

1
bovas85
115
bovas85
commented 2 years ago

I have an issue not with eslint, but rather with styles not carrying over to my static site.

If you go to https://antilophia-vue.nakedtesting.com/
you can see a slider that has an animation.

For some reason using nuxt-edge I get this weird zoom effect (using now and nodejs but same result on a static server)
https://starter-gcodmycdxc.now.sh/

0
bovas85
115
bovas85
commented 2 years ago

I think it has something to do with autoprefixer.

It's changing my transform: scale to transform: scale3d
but the values inside are completely off (it should start from 1 and go to 1.1 rather than from 0.3 to 1)

Edit: by setting scale to scale3d and setting my right values it does work.
But I don't understand the inconsistencies it provides and I still need to research the rest of the site for any other.

0
chabib
14
chabib
commented 2 years ago

In my case:

  • intended to use nuxt-edge with starter template
  • copied other project config
  • got this error
  • realized I still use nuxt 1.x because package.json of starter template
  • removed nuxt 1.x
  • installed nuxt-edge
  • error gone
0
Informations
Bug ReportCancelled
#c6795 - Created 2 years ago