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

mark · June 1, 2021, 8:44am

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 · June 1, 2021, 3:59pm

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 · June 1, 2021, 10:56pm

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 · June 1, 2021, 11:00pm

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

mark · June 1, 2021, 11:01pm

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 · June 2, 2021, 9:56pm

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 · June 30, 2021, 1:50pm

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

Phil · July 8, 2021, 10:36am

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?

Thanks.

mark · July 11, 2021, 7:12am

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

system · July 13, 2021, 9:17am

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

Topic		Replies	Views
Next.js - Module not found: Can't resolve '../.slicemachine/libraries-state.json' Developing with Prismic slice-machine	11	922	January 13, 2023
Nextjs starter not working Developing with Prismic nextjs	18	4926	December 9, 2021
Slice zone empty after slicezone upgrade Developing with Prismic nextjs	3	451	March 14, 2022
Setting up router resolver using slice machine on next.js Developing with Prismic nextjs	6	755	December 9, 2021
Updating Prismic Slice Machine has broken storybook Developing with Prismic nextjs	10	973	April 4, 2022

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

Related Topics