SyntaxError: Cannot use import statement outside a module

[MarkLyck]

When using the guide in the README.md I get the following error in a Next.js project:

/Users/mark/web/formula-stocks/node_modules/antd-theme/lib/runtime.js:2
import Node from 'less/lib/less/tree/node';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)
    at wrapSafe (internal/modules/cjs/loader.js:1116:16)
    at Module._compile (internal/modules/cjs/loader.js:1164:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    at Module.require (internal/modules/cjs/loader.js:1089:19)
    at require (internal/modules/cjs/helpers.js:73:18)
    at Object.<anonymous> (/Users/mark/web/formula-stocks/node_modules/antd-theme/lib/parser.js:4:17)
    at Module._compile (internal/modules/cjs/loader.js:1200:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    at Module.require (internal/modules/cjs/loader.js:1089:19)
    at require (internal/modules/cjs/helpers.js:73:18)
    at Object.<anonymous> (/Users/mark/web/formula-stocks/node_modules/antd-theme/lib/index.js:20:32)

Here's my next.config.js

const withSass = require('@zeit/next-sass')
const withLess = require('@zeit/next-less')
const AntdThemePlugin = require('antd-theme/plugin');

// fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') {
  require.extensions['.less'] = file => { }
}

module.exports = withLess(withSass({
  lessLoaderOptions: {
    lessOptions: {
      javascriptEnabled: true
    }
  },
  webpack: (config) => {
    console.log('config', config)

    config.plugins.push(
      new AntdThemePlugin({
        themes: [
          {
            name: 'dark',
            filename: require.resolve('antd/lib/style/themes/dark.less'),
          },
          {
            name: 'compact',
            filename: require.resolve('antd/lib/style/themes/compact.less'),
          },
        ],
      })
    )

    return config
  }
}))

This part works fine and the primary color is set correctly.

However. As soon as I add a. ThemeProvider I get the SyntaxError.

versions: "antd-theme": "^0.3.4", "@zeit/next-less": "1.0.1", "less": "3.0.4", "less-loader": "6", "less-vars-to-js": "1.3.0",

I double checked my node modules and node_modules/less/lib/less/tree/node.js does exist.

Any ideas how to solve this?

I tried using the antd-theme loader as well, but that produced other errors and couldn't even build?

Any idea how to use this with Next.js?

[dseller]

In my case, I had a wrong require statement. I wrote require('antd-theme'), while it should be require('antd-theme/plugin'). Hope this helps.

[LLIu33]

same problem