erkobridee / nx-nextjs Goto Github PK

View Code? Open in Web Editor NEW

58.0 3.0 14.0 6.15 MB

using Next.js with Nx (Extensible Dev Tools for Mono-repository)

License: ISC License

TypeScript 49.69% JavaScript 40.01% SCSS 9.58% HTML 0.72%

react typescript nextjs nx monorepo nx-workspace tailwindcss storybook font-face sass

nx-nextjs's People

Contributors

Stargazers

Watchers

Forkers

vmptk mitkotschimev jamivinaysagar vblagovic dgoldi dylanwatsonsoftware dobroslavr turbonx denvradiy ets-reactnative3 hyeongjuncho mttwhlly rungtruong ftoutsource

nx-nextjs's Issues

update next.js to v10.1

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

migrating the webpack 4 to 5

'nx serve nextjs --prod' - does it support all features of `next start`

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?

storybook error - TypeError: this.getOptions is not a function

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

[Storybook bug] Migrate to the nx 11.6.0

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

terminal output

>  NX  Running migrations from 'migrations.json'
Running migration add-js-include-11.6.0

Successfully finished add-js-include-11.6.0
Running 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

update next.js to v11

depends on the Webpack 5 support on the nx first : Add support for webpack 5 in Nx 12.x #5892
Nx 13 Roadmap #5475

update nx to v14

Nx v14 is out — Here is all you need to know! | Nrwl Blog

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.