I have tried everything to get next-slicezone to work in my project, and support has told me to put 'modules: true' in my next.config.js file, but no matter where I put it, I still get this error:
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)
Here is my next.config.js file:
const withPlugins = require('next-compose-plugins')
const withSvgr = require('next-svgr')
const optimizedImages = require('next-optimized-images')
module.exports = withPlugins([
withSvgr,
[optimizedImages, {
handleImages: ['jpeg', 'png', 'webp', 'gif']
}]],
{
future:
{
webpack5: true
},
modules: true,
},
)
Here is my package.json file:
{
"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"
}
}
Here's my .babelrc file:
{
"presets": [
[
"next/babel"
]
],
"plugins": [
"react-require"
]
}
Can somebody please help me troubleshoot this? Where do I specify 'modules: true' in the next.config.js file? Why am I getting this error when I've followed the next-slicezone documentation to the letter? Am I doing something wrong? Thanks in advance!