next-ant-css's Issues
SyntaxError: Cannot use import statement outside a module
Hey, I tried to use the setup that is in this repo. I am geting following error when I ran yarn build
, and after that next start
. But it is not throwing any error when ran yarn dev
.
....node_modules/antd/es/layout/index.js:1
import Layout from './layout';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1070:16)
at Module._compile (internal/modules/cjs/loader.js:1120:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Module.require (internal/modules/cjs/loader.js:1042:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.srYc (.....next/server/static/BEY0XCMQwpFyAGnuVDrpv/pages/_app.js:573:18)
at __webpack_require__ (.....next/server/static/BEY0XCMQwpFyAGnuVDrpv/pages/_app.js:23:31)
at Module.hUgY (.....next/server/static/BEY0XCMQwpFyAGnuVDrpv/pages/_app.js:386:15)
My .babelrc file
{
"presets": ["next/babel"],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "index.css"
}
],
[
"import",
{
"libraryName": "@ant-design/icons",
"libraryDirectory": "es/icons",
"camel2DashComponentName": false
},
"@ant-design/icons"
]
]
}
My next.config.js
const withPlugins = require('next-compose-plugins')
const withBundleAnalyzer = require('@next/bundle-analyzer')
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
const bundleAnalyzerConfig = {
enabled: process.env.ANALYZE === 'true',
}
const nextConfig = {
env: {},
}
module.exports = withPlugins(
[
{
webpack(config, { buildId, dev, isServer, defaultLoaders, webpack }) {
config.plugins.push(new AntdDayjsWebpackPlugin())
return config
},
},
withBundleAnalyzer(bundleAnalyzerConfig),
],
nextConfig
)
I use typescript for my development. Don't know if this matters.
My tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"exclude": [
"node_modules"
],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
]
}
Difference with the updated official next-ant-example?
I would like to know the main differences between this and the official repo example.
https://github.com/zeit/next.js/tree/canary/examples/with-ant-design
Thanks!
difference between this and "NextJS-AntD-LESS" repo
Hi. Thanks for your work :)
I am starting a new project. I want to use next and antd, what is the difference between both repositories? And which one do you recommend to use?
Maybe can I contact with you? to exchange knowledge ;)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.