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
"Cannot use import statement outside a module" Developing with Prismic nextjs	13	2924	December 9, 2021
Next.js - Module not found: Can't resolve '../.slicemachine/libraries-state.json' Developing with Prismic slice-machine	11	1149	January 13, 2023
Nextjs starter not working Developing with Prismic nextjs	18	5322	December 9, 2021
PrismicProvider - Cannot use import statement outside a module Developing with Prismic typescript , javascript , reactjs	14	296	September 26, 2024
Slice zone empty after slicezone upgrade Developing with Prismic nextjs	3	502	March 14, 2022

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

Related topics