search

prismicio / prismic-next

Helpers to integrate Prismic into Next.js apps
https://prismic.io/docs/technologies/nextjs
Apache License 2.0
57 stars 7 forks source link

Storybook fails because @prismicio/next can't resolve 'next/router' #15

Closed amosbastian closed 2 years ago

amosbastian commented 2 years ago

I'm not sure if this is solely caused by @prismicio/next, but I am getting this error since migrating our codebase to use it. Since the slice simulator is also broken for me (see https://github.com/prismicio/slice-machine/issues/430), I still need Storybook.

The full error is:

ModuleNotFoundError: Module not found: Error: Can't resolve 'next/router' in '/Users/amosbastian/Development/lifex-website/node_modules/@prismicio/next/dist'
Did you mean 'router.js'?
BREAKING CHANGE: The request 'next/router' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
    at /Users/amosbastian/Development/lifex-website/node_modules/webpack/lib/Compilation.js:2015:28
    at /Users/amosbastian/Development/lifex-website/node_modules/webpack/lib/NormalModuleFactory.js:798:13
    at eval (eval at create (/Users/amosbastian/Development/lifex-website/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /Users/amosbastian/Development/lifex-website/node_modules/webpack/lib/NormalModuleFactory.js:270:22
    at eval (eval at create (/Users/amosbastian/Development/lifex-website/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at /Users/amosbastian/Development/lifex-website/node_modules/webpack/lib/NormalModuleFactory.js:434:22
    at /Users/amosbastian/Development/lifex-website/node_modules/webpack/lib/NormalModuleFactory.js:116:11
    at /Users/amosbastian/Development/lifex-website/node_modules/webpack/lib/NormalModuleFactory.js:670:25
    at /Users/amosbastian/Development/lifex-website/node_modules/webpack/lib/NormalModuleFactory.js:855:8
    at /Users/amosbastian/Development/lifex-website/node_modules/webpack/lib/NormalModuleFactory.js:975:5
    at /Users/amosbastian/Development/lifex-website/node_modules/neo-async/async.js:6883:13
    at /Users/amosbastian/Development/lifex-website/node_modules/webpack/lib/NormalModuleFactory.js:958:45
    at finishWithoutResolve (/Users/amosbastian/Development/lifex-website/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:312:11)
    at /Users/amosbastian/Development/lifex-website/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:386:15
    at /Users/amosbastian/Development/lifex-website/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/Users/amosbastian/Development/lifex-website/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
resolve 'next/router' in '/Users/amosbastian/Development/lifex-website/node_modules/@prismicio/next/dist'
  Parsed request is a module
  using description file: /Users/amosbastian/Development/lifex-website/node_modules/@prismicio/next/package.json (relative path: ./dist)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/amosbastian/Development/lifex-website/node_modules/@prismicio/next/dist/node_modules doesn't exist or is not a directory
      looking for modules in /Users/amosbastian/Development/lifex-website/node_modules/@prismicio/next/node_modules
        /Users/amosbastian/Development/lifex-website/node_modules/@prismicio/next/node_modules/next doesn't exist
      /Users/amosbastian/Development/lifex-website/node_modules/@prismicio/node_modules doesn't exist or is not a directory
      /Users/amosbastian/Development/lifex-website/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/amosbastian/Development/lifex-website/node_modules
        existing directory /Users/amosbastian/Development/lifex-website/node_modules/next
          using description file: /Users/amosbastian/Development/lifex-website/node_modules/next/package.json (relative path: .)
            using description file: /Users/amosbastian/Development/lifex-website/node_modules/next/package.json (relative path: ./router)
              Field 'browser' doesn't contain a valid alias configuration
              /Users/amosbastian/Development/lifex-website/node_modules/next/router doesn't exist
      /Users/amosbastian/Development/node_modules doesn't exist or is not a directory
      looking for modules in /Users/amosbastian/node_modules
        /Users/amosbastian/node_modules/next doesn't exist
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

Versions

"@prismicio/client": "^6.4.1",
"@prismicio/next": "^0.1.0",
"@prismicio/react": "^2.1.2",
"@prismicio/slice-simulator-react": "^0.2.0",
"@storybook/addon-a11y": "^6.5.0-alpha.51",
"@storybook/addon-essentials": "^6.5.0-alpha.51",
"@storybook/builder-webpack5": "^6.5.0-alpha.51",
"@storybook/manager-webpack5": "^6.5.0-alpha.51",
"@storybook/react": "6.5.0-alpha.51",

Reproduction

Additional Details

Steps to reproduce

Run Storybook with Webpack 5 and @prismicio/next installed.

What is expected?

It should run.

What is actually happening?

It is giving an error about next/router.

angeloashmore commented 2 years ago

Hey @amosbastian, this is likely happening because @prismicio/next is published as an ES Module (using "type": "module" in its package.json).

Storybook and/or its Webpack 5 configuration does not seem to work well with ES Modules and .mjs files.

The next version of @prismicio/next will remove "type": "module" which should fix this problem. I'll post here once it's published. 🙂

angeloashmore commented 2 years ago

@amosbastian Could you try v0.1.2? It includes the fix that I mentioned above.

I'm going to close this issue as it should be fixed, but please let me know if it isn't and I'll reopen it.

amosbastian commented 2 years ago

It works now, thanks! ❤️