Where do you put 'modules: true' in next.config.js?

952 Views Asked by At

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!

0

There are 0 best solutions below