Next-slicezone 'cannot import from outside a module' error

I am trying to use slicezone, but I keep getting this error:

./node_modules/next-slicezone/index.js
Module parse failed: Unexpected token (6:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| const PageInfo = ({ title, description }) => (
>   <div
|     style={{
|       height: '80vh',

Server-side error msg:

C:\Users\jrhag\react-sites\edit-elements\node_modules\next-slicezone\resolver.js:2                                         
import { createResolver } from './features/resolver'                                                                       
^^^^^^                                                                                                                     
                                                                                                                           
SyntaxError: Cannot use import statement outside a module                                                                  
    at wrapSafe (internal/modules/cjs/loader.js:984:16)                                                                    
    at Module._compile (internal/modules/cjs/loader.js:1032:27)                                                            
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)                                              
    at Module.load (internal/modules/cjs/loader.js:933:32)                                                                 
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)                                                       
    at Module.require (internal/modules/cjs/loader.js:957:19)                                                              
    at require (internal/modules/cjs/helpers.js:88:18)                                                                     
    at Object.next-slicezone/resolver (C:\Users\jrhag\react-sites\edit-elements\.next\server\pages\_document.js:103:18)    
    at __webpack_require__ (C:\Users\jrhag\react-sites\edit-elements\.next\server\webpack-runtime.js:25:42)                
    at Object../pages/_document.js (C:\Users\jrhag\react-sites\edit-elements\.next\server\pages\_document.js:21:81)        
    at __webpack_require__ (C:\Users\jrhag\react-sites\edit-elements\.next\server\webpack-runtime.js:25:42)                
    at __webpack_exec__ (C:\Users\jrhag\react-sites\edit-elements\.next\server\pages\_document.js:223:52)                  
    at C:\Users\jrhag\react-sites\edit-elements\.next\server\pages\_document.js:224:115                                    
    at Function.__webpack_require__.X (C:\Users\jrhag\react-sites\edit-elements\.next\server\webpack-runtime.js:108:21)    
    at C:\Users\jrhag\react-sites\edit-elements\.next\server\pages\_document.js:224:47                                     
    at Object.<anonymous> (C:\Users\jrhag\react-sites\edit-elements\.next\server\pages\_document.js:227:3)

How do I fix this?

Hi Mark,

Thanks for contributing to the Prismic community.
For me it seems that this error is related to some wrong configurations in your app, can you please share your next.config file.

Also you can try to add "type": "module" to your package.json

{
  // ...
  "type": "module",
  // ...
}

Looking forward to your reply,
Fares

My package.json file (as it was from adding per documentation:

{

  "name": "edit-elements",

  "version": "0.1.0",

  "private": true,

  "scripts": {

    "dev": "next dev",

    "build": "next build",

    "start": "next start",

    "storybook": "start-storybook -p 8888",

    "build-storybook": "build-storybook",

    "slicemachine": "start-slicemachine --port 9999"

  },

  "dependencies": {

    "@emotion/react": "^11.4.0",

    "@emotion/styled": "^11.3.0",

    "@material-ui/core": "^5.0.0-alpha.31",

    "@material-ui/icons": "^4.11.2",

    "@material-ui/lab": "^4.0.0-alpha.58",

    "@prismicio/client": "^4.0.0",

    "@storybook/react": "^6.2.9",

    "clsx": "^1.1.1",

    "essential-slices": "^1.0.4",

    "firebase": "^8.2.1",

    "firebase-admin": "^9.4.2",

    "firebaseui": "^4.7.1",

    "framer-motion": "^3.1.1",

    "imagemin-mozjpeg": "^9.0.0",

    "imagemin-optipng": "^8.0.0",

    "imagemin-svgo": "^9.0.0",

    "next": "^10.2.1",

    "next-compose-plugins": "^2.2.1",

    "next-optimized-images": "^2.6.2",

    "next-slicezone": "0.1.0-alpha.0",

    "next-svgr": "^0.0.2",

    "next-transpile-modules": "^6.4.1",

    "prismic-dom": "^2.2.5",

    "prismic-reactjs": "^1.3.3",

    "react": "17.0.1",

    "react-dom": "17.0.1",

    "react-paypal-button-v2": "^2.6.3",

    "responsive-loader": "^2.0.0",

    "sass": "^1.32.4",

    "slice-machine-ui": "^0.0.45",

    "storybook": "^6.2.9",

    "styled-components": "^5.2.1",

    "theme-ui": "^0.7.3",

    "webp-loader": "^0.6.0"

  },

  "devDependencies": {

    "babel-plugin-react-require": "^3.1.3"

  }

}

Sorry I mean the next.config.js file, you have modules: true such as:

const withPlugins = require('next-compose-plugins')

const withSvgr = require('next-svgr')

const optimizedImages = require('next-optimized-images')

module.exports = withPlugins([

  {

    future: 

    {

      webpack5: true

    }

  },

  withSvgr,

  [optimizedImages, {

    handleImages: ['jpeg', 'png', 'webp', 'gif']

  }]

])

I should mention that using next-transpile-modules appears to 'solve' the issue, but the documentation doesn't mention using it, so I'd like to have it the way that it should be.