Razzle: Beispiel für einen Modulverbund hinzufügen

@jaredpalmer Wenn Sie Hilfe benötigen, würde ich Ihnen

Gibt es Tests, nach denen wir suchen können, um zu sehen, wie dies funktioniert? 😃

@maraisr Jede Hilfe zu diesem Thema und das Überprüfen meiner Pull-Anfragen wird auch geschätzt, um das Webpack5-Pull mit dem nächsten Zweig synchron zu halten.

@ScriptedAlchemy etwas zu schnell gelesen, das sollte machbar sein. Könnte ein Razzle-Plugin mit Konfigurationsoptionen sein.

Hallo Leute! Ich bin mir nicht sicher, ob es sich gelohnt hat, einen Fehlerbericht zu öffnen, aber ich habe versucht, razzle mit [email protected] auszuführen, und ich habe diesen Fehler erhalten, sobald ich yarn start :

ValidationError: Invalid options object. Watch Ignore Plugin has been initialized using an options object that does not match the API schema.
 - options[0] should be an object:
   object { paths }
 - options[1] should be an object:
   object { paths }
    at validate (/Users/stevenlangbroek/Code/poly-host/node_modules/schema-utils/dist/validate.js:96:11)
    at new WatchIgnorePlugin (/Users/stevenlangbroek/Code/poly-host/node_modules/webpack/lib/WatchIgnorePlugin.js:88:3)
    at module.exports (/Users/stevenlangbroek/Code/poly-host/node_modules/razzle/config/createConfig.js:304:9)
    at main (/Users/stevenlangbroek/Code/poly-host/node_modules/razzle/scripts/start.js:76:20)
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  errors: [
    {
      keyword: 'type',
      dataPath: '[0]',
      schemaPath: '#/type',
      params: [Object],
      message: 'should be object',
      schema: 'object',
      parentSchema: [Object],
      data: '/Users/stevenlangbroek/Code/poly-host/build/assets.json'
    },
    {
      keyword: 'type',
      dataPath: '[1]',
      schemaPath: '#/type',
      params: [Object],
      message: 'should be object',
      schema: 'object',
      parentSchema: [Object],
      data: '/Users/stevenlangbroek/Code/poly-host/build/chunks.json'
    }
  ],
  schema: {
    title: 'WatchIgnorePluginOptions',
    type: 'object',
    additionalProperties: false,
    properties: { paths: [Object] },
    required: [ 'paths' ]
  },
  headerName: 'Watch Ignore Plugin',
  baseDataPath: 'options',
  postFormatter: null
}

Dies ist, bevor Sie die Webpack-Konfiguration ändern.

Schritte:

$ yarn create razzle-app my-app
$ cd my-app
$ yarn add webpack<strong i="13">@beta</strong>
# select beta 16 or 17
# add to package.json resolutions
$ yarn
$ yarn start

Wir arbeiten an der Unterstützung von webpack5. Ich habe einen webpack5-Zweig in meinem GitHub-Repo. Ich muss es auf den nächsten Zweig in diesem Repo zurücksetzen. Derzeit gibt es also keine webpack5-Unterstützung in razzle.

Ich verstehe, dachte nur, dass es sich lohnt, im Kontext der laufenden Arbeit zu sprechen.

https://github.com/jaredpalmer/razzle/tree/webpack5 - für diejenigen, die ihr Glück versuchen wollen :)

Wenn Sie nicht weiterkommen, habe ich eine enorme Menge an Kontext in Webpack Beta.17

@fivethreeo stieß auf zwei Fehler im Webpack5-Zweig (1 mit Beta16 und 1 mit Beta17). Möchten Sie, dass ich sie melde, oder ist dies noch so weit fortgeschritten, dass Fehlerberichte nicht besonders hilfreich sind?

Ok, es ist nur eine Sache, ich habe beim Verknüpfen einen Fehler gemacht. Grundsätzlich wird chalk aus irgendeinem Grund in das clientseitige Bundle aufgenommen ... Irgendeine Idee, warum das passieren würde?

@StevenLangbroek hm, seltsam, was ist die

@fivethreeo es ist OSX 10.15.3 und Node 12 und 14 (versucht mit beiden). Ich habe es vorerst behoben, indem ich webpackHotDevClient.js aus dem Eintrag entfernt habe.

@StevenLangbroek Wie haben Sie die Pakete installiert?

@fivethreeo Ich habe [email protected] zu resolutions in meinem package.json hinzugefügt, geklont, den Webpack5-Zweig ausgecheckt, lerna bootstrap und dann yarn linked ed razzle von packages/razzle .

@StevenLangbroek können Sie versuchen, zu verwenden

Garn installieren --Frozen-Lockfile --ignore-Motoren --Netzwerk-Timeout 30000

In razzle webpack5 checkout

Dann renne

Garnprüfung

Dann verknüpfen Sie razzle-dev-utils und razzle mit Ihrem Projekt, ohne webpack5 zu Ihrem Projekt package.json hinzuzufügen

@fivethreeo , das zu diesem Fehler führt (was zurückzuführen ist, dass Webpack 4 statt 5 ausgeführt wird, wenn ich es nicht zu Auflösungen hinzufüge):

Error: Cannot find module 'webpack/lib/container/ModuleFederationPlugin'
Require stack:
- /Users/stevenlangbroek/Code/poly-host/razzle.config.js
- /Users/stevenlangbroek/Code/razzle/packages/razzle/config/loadRazzleConfig.js
- /Users/stevenlangbroek/Code/razzle/packages/razzle/scripts/start.js

Testausgabe beim Ausführen von yarn test in razzle/webpack5 :

Ok, näher an das Testproblem heranzukommen, könnte zumindest ein SCSS-Problem sein :)

node -e 'require("./test/fixtures/util").setupStageWithExample("example", "with-scss-options", symlink=false, yarnlink=true, install=true, test=false);'  

cd example
yarn build

Ok, also ein nicht verwandter Fehler in Tests. Könnte irgendwie mit Garn verbunden sein.

Wenn all dies von dem ablenkt, was ich mir als viel Arbeit vorstelle, hoffe ich, dass Sie es mich wissen lassen. Wenn ich noch etwas tun kann, um einen Beitrag zu leisten, kann ich mir etwas Zeit dafür nehmen.

Kein Problem, es ist nur so, dass wir hier gerade so schönes Wetter haben, dass wir uns in der Sonne sonnen, anstatt den ganzen Tag am Computer zu sitzen 😃

Außerdem habe ich kein OS X. Es ist so schwer, dies zu debuggen.

Der scss-Fehler liegt auf Knoten 13/14?

Können Sie Ihr Paket json posten?

Ich werde diesen Zweig nächste Woche abreißen und auch einen Blick darauf werfen :)

@fivethreeo hier gehts:

{
  "name": "my-razzle-app",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "resolutions": {
    "webpack": "5.0.0-beta.17"
  },
  "dependencies": {
    "antd": "^4.3.3",
    "express": "^4.17.1",
    "razzle": "^3.1.3",
    "react": "16",
    "react-dom": "16",
    "react-router-dom": "^5.2.0"
  }
}

Versuchen Sie ohne antd, es einfach zu halten und stellen Sie sicher, dass nur eine Webpack-Version installiert ist. Nur eine Idee, um herauszufinden, warum es nicht funktioniert, damit wir versuchen können, es richtig zu reparieren :)

@fivethreeo habe ich gemacht (später hinzugefügt, um etwas auszuprobieren)

Vielleicht bekommt Garnverbindung und Garninstallation in Kombination mit ResolutionLoaders irgendwie das falsche Webpack.

Funktioniert das?

node -e 'require("./test/fixtures/util").setupStageWithExample("example", "basic", symlink=false, yarnlink=true, install=true, test=false);'  

cd example
yarn build

Ich habe jetzt 2 Korrekturen für den webpack5-Zweig hinzugefügt. Ich habe gesehen, dass Ihr Testlauf auch mehr Testfehler hatte. Können Sie es jetzt erneut versuchen?

@StevenLangbroek Vielleicht ist dies das Problem https://github.com/facebook/create-react-app/issues/8583 , vielleicht zwei React -Dev-Utils-Versionen irgendwie?

@StevenLangbroek hat die Sass-Abhängigkeiten in der Branche jetzt aktualisiert und kann Ihr Sass-Problem beheben :)

Sie können versuchen, bei Razzle- und Razzle-Plugin-Scss-Abhängigkeiten zu verstehen, ob Sie widersprüchliche Pakete haben, und die Razzle-Version der Abhängigkeit zu Auflösungen in Ihrer package.json hinzufügen, wenn Sie Konflikte finden.

Sollte es jetzt möglich sein, webpack5 in razzle zu testen.

Um es jetzt zu versuchen:

npx create-razzle-app<strong i="7">@canary</strong> testing --ignore-existing
cd testing
yarn add [email protected] --dev
yarn start
yarn build
yarn start:prod
yarn test

Siehe die Dokumente

Wir haben heute Morgen den Webpack 5 Stable veröffentlicht. Es ist jetzt auf npm veröffentlicht.

Ich habe dieses Problem vergessen - aber wenn derzeit aktiv an der Integration von MF gearbeitet wird, geben Sie mir ein schnelles Update und ich werde sofort loslegen (Thread ist lang).

Ich habe gerade angefangen, Nuxt auf MF-Funktionen zu bringen, und next.js ist bereits im Gange.

Gibt es eine Niederlassung?

Es gibt den kanarischen Zweig, er hat webpack5-Unterstützung. Ich denke, hier geht es hauptsächlich darum, ein Beispielprojekt zu machen.

Ja sehr viel. Und stellen Sie sicher, dass am Einstiegspunkt asynchrone Importe vorhanden sind, damit der Lieferantencode gemeinsam genutzt werden kann. Überprüfen Sie meine Beispiele für Modulverbände, um ein Gefühl dafür zu bekommen, was ich zu Repos hinzufüge. Der Einstiegspunkt wird immer asynchron in den tatsächlichen Einstiegspunktcode importiert. Auf diese Weise können wir statische Importe wie "Reagieren" freigeben, ohne dass die App abstürzt. Wir haben Probleme mit next, da mehrere Einstiegspunkte für Seiten verwendet werden und alles synchronisiert ist

Es funktioniert, Beispiel hinzugefügt
https://github.com/jaredpalmer/razzle/tree/canary/examples/with-module-federation

npx create-razzle-app @ canary basic - Beispiel mit Modulverbund - keine Installation
CD Basic
Garn installieren
Garnstart

http: // localhost : 3000 /
http: // localhost : 3001 /