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

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

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
| const PageInfo = ({ title, description }) => (
>   <div
|     style={{
|       height: '80vh',

Server-side error msg:

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 (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,

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([




      webpack5: true




  [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.

1 Like

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

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.

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?


1 Like

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

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.