Create-react-app: Cyclic dependency after upgrade to latest next version (2.0.0-next.3e165448)

[marcelalburg]

Is this a bug report?

yes

Did you try recovering your dependencies?

yes

Which terms did you search for in User Guide?

npm run start

  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules/foundation-sites/scss/ src/ -o src/ --watch --recursive",
    "start": "npm-run-all -p watch-css start-js",
    "start-js": "NODE_PATH=src BROWSER=none react-scripts start",
    "build-js": "NODE_PATH=src node build.js",
    "test": "NODE_PATH=src react-scripts test --env=jsdom"
  },

Environment

/Frontend/node_modules/toposort/index.js:35
throw new Error('Cyclic dependency' + nodeRep)
^

Error: Cyclic dependency
at visit (/Frontend/node_modules/toposort/index.js:35:13)
at visit (/Frontend/node_modules/toposort/index.js:53:9)
at visit (/Frontend/node_modules/toposort/index.js:53:9)
at Function.toposort [as array] (/Frontend/node_modules/toposort/index.js:22:22)
at Object.module.exports.dependency (/Frontend/node_modules/html-webpack-plugin/lib/chunksorter.js:50:35)
at HtmlWebpackPlugin.sortChunks (/Frontend/node_modules/html-webpack-plugin/index.js:364:35)
at /Frontend/node_modules/html-webpack-plugin/index.js:113:21
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Frontend/node_modules/tapable/lib/HookCodeFactory.js:24:12), :7:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Frontend/node_modules/tapable/lib/Hook.js:35:21)
at Compiler.emitAssets (/Frontend/node_modules/webpack/lib/Compiler.js:307:19)

Steps to Reproduce

(Write your steps here:)

I used "2.0.0-next.66cc7a90" before and everything works fine. I just changed the version to "2.0.0-next.3e165448" and i got the Cyclic dependency problem

Expected Behavior

a development server should deliver my react project

Actual Behavior

crash

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[bugzpodder]

can you remove the node_modules directory and do another npm install to see if it goes away?

[marcelalburg]

Hello,

i removed node_modules and the package lock. installed again and still the same.

[Timer]

Please provide a reproducible demo or there's no way we can fix this.

[marcelalburg]

Hello,

i created an example project -> https://github.com/marcelalburg/error_webpack4_circle_dependency

sorry that it's a little bit complicated but i was not easy to reproduce. I think it's something with the webpack 4 chunkloader.

https://github.com/marcelalburg/error_webpack4_circle_dependency/blob/master/src/contentPerUrl.js#L3

this file loads two files dynamically and both files import the same file and i think this makes the problem.

Thanks

[packetstracer]

Same here. Tried to install dependencies with yarn and npm, neither of both works.

I've found a workaround in the meantime that seems to work. Extracted from here:

https://github.com/jantimon/html-webpack-plugin/issues/870

In case it helps, it seems a HtmlWebpackPlugin bug, though it's been resolved in the issue linked above for some reason it's not working, I guess it hasn't been merged already or CRA is not using the right dep for the plugin

html-webpack-plugin@next

Hope this helps solve the issue.

For the case anyone is willing to apply the workaround, just add the property

chunksSortMode: 'none'

in HtmlWebpackPlugin initialization in /Users/ivanmerinrodriguez/Sites/cap/cbk-sparq/global/node_modules/react-scripts/config/webpack.config.dev.js file, just like this

plugins: [

    new InterpolateHtmlPlugin(env.raw),

    // Generates an index.html file with the <script> injected.

    new HtmlWebpackPlugin({

      inject: true,

      template: paths.appHtml,

      chunksSortMode: 'none'

    }),

    ...

    ]

[orlov-vo]

Same. The error reproduced only in builded mode via npm run build I tried to inject a updated html-webpack-plugin@next with suggested options by @packetstracer. But it isn't work for me, the error still reproduced. :(

My rewire for injecting HtmlWebpackPlugin via react-app-rewired:

const HtmlWebpackPlugin = require('html-webpack-plugin');

const getPluginIndex = (plugins, nameMatcher) =>
  plugins.findIndex(
    (plugin) =>
      plugin.constructor && plugin.constructor.name && nameMatcher(plugin.constructor.name),
  );

const replacePlugin = (plugins, pluginIndex, newPlugin) => {
  if (pluginIndex === -1) {
    return plugins;
  }

  const nextPlugins = plugins
    .slice(0, pluginIndex)
    .concat(newPlugin)
    .concat(plugins.slice(pluginIndex + 1));

  return nextPlugins;
};

const createHtmlWebpackPlugin = () => (config) => {
  const pluginIndex = getPluginIndex(config.plugins, (name) => /HtmlWebpackPlugin/i.test(name));

  if (pluginIndex === -1) {
    return config;
  }

  const oldPlugin = config.plugins[pluginIndex];

  const newOptions = { ...oldPlugin.options, chunksSortMode: 'none' };
  const newPlugin = new HtmlWebpackPlugin(newOptions);

  console.log('build with injected HtmlWebpackPlugin', newOptions);

  return { ...config, plugins: replacePlugin(config.plugins, pluginIndex, newPlugin) };
};

module.exports = createHtmlWebpackPlugin;

[aduh95]

I have the same problem on 2.0.0-next.a671462c and the workaround suggested by @packetstracer solved the cyclic dependency error.

[marcelalburg]

Any news here or a release date ?

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.