erkobridee / nx-nextjs Goto Github PK
View Code? Open in Web Editor NEWusing Next.js with Nx (Extensible Dev Tools for Mono-repository)
License: ISC License
using Next.js with Nx (Extensible Dev Tools for Mono-repository)
License: ISC License
right now it's not possible due to webpack differences, the next.js is moving to webpack 5 and the nx environment still based on the webpack 4 object schema
let's see when the nx next.js plugin gets updated to be compatible with the next.js v10.1
Hi,
Thanks for the work. Do you know, after doing nx build nextjs
, then running nx serve nextjs --prod
- is functionally the same as next start
or not?
From nextjs documentation, next start
comes with a bag of goodies (https://nextjs.org/docs/deployment) and from https://github.com/nrwl/nx/blob/master/packages/next/src/executors/server/lib/default-server.ts , it seems its starting an express server. Do you know if this server has all the benefits that the next start
server provides?
Hi! Nice boilerplate.
I've installed sass-loader
because it's was not in package.json
I'm having this issue now
❯ nx storybook shared-components 09:30:28
> nx run shared-components:storybook
info => Loading presets
info => Loading 1 config file in "/home/saito/_git/nx-nextjs/libs/shared/components/.storybook"
info => Adding stories defined in "/home/saito/_git/nx-nextjs/libs/shared/components/.storybook/main.js"
info => Using implicit CSS loaders
info => Using custom postcss.config.js
info => Loading custom Webpack config (full-control mode).
(node:13228) DeprecationWarning: Relying on the implicit PostCSS loader is deprecated and will be removed in Storybook 7.0.
If you need PostCSS, include '@storybook/addon-postcss' in your '.storybook/main.js' file.
See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-implicit-postcss-loader for details.
(Use `node --trace-deprecation ...` to show where the warning was created)
ℹ 「wdm」: wait until bundle finished:
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
webpack built preview 9ed69ff30581538046eb in 12562ms
✖ 「wdm」: Hash: 9ed69ff30581538046eb
Version: webpack 4.46.0
Time: 12562ms
Built at: 02/06/2021 09:30:45
Asset Size Chunks Chunk Names
iframe.html 4.34 KiB [emitted]
main.iframe.bundle.js 46 KiB main [emitted] main
main.iframe.bundle.js.map 19.5 KiB main [emitted] [dev] main
runtime~main.iframe.bundle.js 33.5 KiB runtime~main [emitted] runtime~main
runtime~main.iframe.bundle.js.map 34.7 KiB runtime~main [emitted] [dev] runtime~main
vendors~main.iframe.bundle.js 2.67 MiB vendors~main [emitted] [big] vendors~main
vendors~main.iframe.bundle.js.map 2.59 MiB vendors~main [emitted] [dev] vendors~main
Entrypoint main [big] = runtime~main.iframe.bundle.js runtime~main.iframe.bundle.js.map vendors~main.iframe.bundle.js vendors~main.iframe.bundle.js.map main.iframe.bundle.js main.iframe.bundle.js.map
[0] multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./libs/shared/components/.storybook/storybook-init-framework-entry.js ./libs/shared/components/.storybook/preview.js-generated-config-entry.js ./libs/shared/components/.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=true 88 bytes {main} [built]
[./libs/shared/components/.storybook/generated-stories-entry.js] 412 bytes {main} [built]
[./libs/shared/components/.storybook/preview.js] 234 bytes {main} [built]
[./libs/shared/components/.storybook/preview.js-generated-config-entry.js] 3.46 KiB {main} [built]
[./libs/shared/components/.storybook/storybook-init-framework-entry.js] 26 bytes {main} [built]
[./libs/shared/components/src/lib sync recursive ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$] ./libs/shared/components/src/lib sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$ 244 bytes {main} [built]
[./libs/shared/components/src/lib sync recursive ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.mdx)$] ./libs/shared/components/src/lib sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.mdx)$ 160 bytes {main} [built]
[./node_modules/@storybook/client-api/dist/esm/index.js] 933 bytes [built]
[./node_modules/@storybook/client-logger/dist/esm/index.js] 4.25 KiB {vendors~main} [built]
[./node_modules/@storybook/core-server/dist/cjs/globals/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/esm/client/index.js] 236 bytes {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 489 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=true] (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=true 7.68 KiB {vendors~main} [built]
+ 685 hidden modules
ERROR in ./libs/shared/assets/styles/fonts.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./libs/shared/assets/styles/fonts.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/saito/_git/nx-nextjs/node_modules/sass-loader/dist/index.js:25:24)
@ ./libs/shared/assets/styles/fonts.scss 2:26-200 53:4-74:5 56:18-192
@ ./libs/shared/components/.storybook/preview.js
@ ./libs/shared/components/.storybook/preview.js-generated-config-entry.js
@ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./libs/shared/components/.storybook/storybook-init-framework-entry.js ./libs/shared/components/.storybook/preview.js-generated-config-entry.js ./libs/shared/components/.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=true
ERROR in ./libs/shared/assets/styles/tailwind.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./libs/shared/assets/styles/tailwind.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/saito/_git/nx-nextjs/node_modules/sass-loader/dist/index.js:25:24)
@ ./libs/shared/assets/styles/tailwind.scss 2:26-203 53:4-74:5 56:18-195
@ ./libs/shared/components/.storybook/preview.js
@ ./libs/shared/components/.storybook/preview.js-generated-config-entry.js
@ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./libs/shared/components/.storybook/storybook-init-framework-entry.js ./libs/shared/components/.storybook/preview.js-generated-config-entry.js ./libs/shared/components/.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=true
ERROR in ./libs/shared/components/src/lib/target-blank-link/index.module.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./libs/shared/components/src/lib/target-blank-link/index.module.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/saito/_git/nx-nextjs/node_modules/sass-loader/dist/index.js:25:24)
@ ./libs/shared/components/src/lib/target-blank-link/index.module.scss 2:26-225 53:4-74:5 56:18-217
@ ./libs/shared/components/src/lib/target-blank-link/index.tsx
@ ./libs/shared/components/src/lib/target-blank-link/index.stories.tsx
@ ./libs/shared/components/src/lib sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./libs/shared/components/.storybook/generated-stories-entry.js
@ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./libs/shared/components/.storybook/storybook-init-framework-entry.js ./libs/shared/components/.storybook/preview.js-generated-config-entry.js ./libs/shared/components/.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=true
ERROR in ./libs/shared/components/src/lib/shared-components/index.module.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./libs/shared/components/src/lib/shared-components/index.module.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/saito/_git/nx-nextjs/node_modules/sass-loader/dist/index.js:25:24)
@ ./libs/shared/components/src/lib/shared-components/index.module.scss 2:26-225 53:4-74:5 56:18-217
@ ./libs/shared/components/src/lib/shared-components/index.tsx
@ ./libs/shared/components/src/lib/shared-components/index.stories.tsx
@ ./libs/shared/components/src/lib sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
@ ./libs/shared/components/.storybook/generated-stories-entry.js
@ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./node_modules/@storybook/core-server/dist/cjs/globals/globals.js ./libs/shared/components/.storybook/storybook-init-framework-entry.js ./libs/shared/components/.storybook/preview.js-generated-config-entry.js ./libs/shared/components/.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=true
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.22 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 1.97 KiB {HtmlWebpackPlugin_0} [built]
———————————————————————————————————————————————
> NX ERROR Running target "shared-components:storybook" failed
Failed tasks:
- shared-components:storybook
I tried to update the nx to v11.6 but while I was running the migration
nx migrate --run-migrations
I got an error on the storybook step
> NX Running migrations from 'migrations.json'
Running migration add-js-include-11.6.0
Successfully finished add-js-include-11.6.0Running migration update-11-5-3
app: no storybook configured. skipping migration...
app-e2e: no storybook configured. skipping migration...
nextjs: no storybook configured. skipping migration...
nextjs-e2e: no storybook configured. skipping migration...
shared-components-e2e: no storybook configured. skipping migration...
Cannot read property 'storybook' of undefined
/${path on my machine}/nx-nextjs/node_modules/yargs/build/lib/yargs.js:1132
throw err;
^
Error: Command failed: /var/folders/sp/xhc5vgjs2v79b14fsrhss4zw0000gq/T/tmp-82734mxX2kYdzjRwV/node_modules/.bin/tao migrate --run-migrations
at checkExecSyncError (child_process.js:630:11)
at Object.execSync (child_process.js:666:15)
at Object.handler (/${path on my machine}/nx-nextjs/node_modules/@nrwl/workspace/src/command-line/nx-commands.js:80:25)
at Object.runCommand (/${path on my machine}/nx-nextjs/node_modules/yargs/build/lib/command.js:196:48)
at Object.parseArgs [as _parseArgs] (/${path on my machine}/nx-nextjs/node_modules/yargs/build/lib/yargs.js:1043:55)
at Object.get [as argv] (/${path on my machine}/nx-nextjs/node_modules/yargs/build/lib/yargs.js:986:25)
at Object.initLocal (/${path on my machine}/nx-nextjs/node_modules/@nrwl/cli/lib/init-local.js:23:13)
at Object. (/${path on my machine}/nx-nextjs/node_modules/@nrwl/cli/bin/nx.js:42:18)
at Module._compile (internal/modules/cjs/loader.js:1158:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10) {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 82741,
stdout: null,
stderr: null
}
for now, is wait for another newer version to be able to move forward
depends on the Webpack 5 support on the nx first : Add support for webpack 5 in Nx 12.x #5892
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.