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

[mark (Mark Doubleday)]

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?

[Fares]

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

[mark (Mark Doubleday)]

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"

  }

}

[Fares]

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

[mark (Mark Doubleday)]

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']

  }]

])

[mark (Mark Doubleday)]

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.

[Fares]

Thanks for letting us know, we are still investigating this issue and we will get back to you ASAP.

[Phil (Phil Snow)]

Hi @mark ,

You're correct in saying that next-transpile-modules is necessary to work with the next-slicezone. I'm going to add this to the technical reference for this package. We want to remove the next-slicezone's dependcy on this package in the near future.

next-slicezone Technical Reference

I did see in one of your previous messages it was already installed though, was it not configured properly?

Can you tell me what documentation you used to set up your project so I can update it correctly?

Thanks.

[mark (Mark Doubleday)]

Yeah - I can't survive without it. Hopefully this dependency goes away soon. Thanks for the info!