Cannot use import statement outside a module:

Question

I am setting up a fresh project with antD and nextjs.

 ⨯ C:\Users\madis\source\repos\Ticketeer\ticketeer-frontend-njs-antd\node_modules\@ant-design\icons\es\components\Context.js:1
import { createContext } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at mod.require (C:\Users\madis\source\repos\Ticketeer\ticketeer-frontend-njs-antd\node_modules\next\dist\server\require-hook.js:65:28)
    at require (node:internal/modules/cjs/helpers:110:18)
    at @ant-design/icons/es/components/Context (C:\Users\madis\source\repos\Ticketeer\ticketeer-frontend-njs-antd\.next\server\pages\_app.js:164:18)
    at __webpack_require__ (C:\Users\madis\source\repos\Ticketeer\ticketeer-frontend-njs-antd\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/antd/es/config-provider/index.js:16:97)
    at ./node_modules/antd/es/config-provider/index.js (C:\Users\madis\source\repos\Ticketeer\ticketeer-frontend-njs-antd\.next\server\vendor-chunks\antd.js:504:1)        
    at __webpack_require__ (C:\Users\madis\source\repos\Ticketeer\ticketeer-frontend-njs-antd\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/antd/es/grid/col.js:9:74)
 GET / 500 in 30402ms

here is our _app.tsx:

// src/pages/_app.tsx
import React from 'react';
import { AppProps } from 'next/app';
import { Provider } from 'react-redux';
import store from '../ticketeer-frontend-njs/src/redux/store';
import SessionLoader from '../ticketeer-frontend-njs/src/components/SessionLoader';
import 'antd/dist/reset.css';
import '../styles/globals.css';


function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <SessionLoader>
        <Component {...pageProps} />
      </SessionLoader>
    </Provider>
  );
}

export default MyApp;

Im not real sure whats going on..

Cannot use import statement outside a module:

0 Replies