bennypowers / rollup-plugin-modulepreload

Rollup plugin to add modulepreload links from generated chunks.
MIT License
16 stars 0 forks source link

Rollup: TypeError: Cannot destructure property `writeFile` of 'undefined' or 'null'. #2

Closed logicalphase closed 5 years ago

logicalphase commented 5 years ago

Hi Benny - I've been using a couple of your rollup plugins to create a built process for the HyperPress project. HyperPress is based on @polymer - lit-element pwa-starter-kit. Rollup does a great of code-splitting and as you know, the downside of that is the initial visit lag while the chunks get pulled in and cached. So, followup visits exhibit great performance, whereas first visits suffer a full second increase in full load times. I thought this plugin would be a great solution for modulepreload of those chunks. But I've run into the following when running it:

TypeError: Cannot destructure property `writeFile` of 'undefined' or 'null'.
    at Object.<anonymous> (/home/john/hyperpress/pressmedics/node_modules/rollup-plugin-modulepreload/index.js:2:36)
    at Module._compile (internal/modules/cjs/loader.js:678:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:689:10)
    at Object.require.extensions..js (/home/john/hyperpress/pressmedics/node_modules/rollup/bin/rollup:1132:17)
    at Module.load (internal/modules/cjs/loader.js:589:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
    at Function.Module._load (internal/modules/cjs/loader.js:520:3)
    at Module.require (internal/modules/cjs/loader.js:626:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/home/john/hyperpress/pressmedics/rollup.config.js:10:33)

The rollup.config.js:

import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import minifyHTML from 'rollup-plugin-minify-html-literals';
import { modulepreload } from 'rollup-plugin-modulepreload';
import resolve from 'rollup-plugin-node-resolve';

//const production = !process.env.ROLLUP_WATCH;

export default [{
  input: './src/components/ts-app.js',
  output: [
    {
      dir: 'public/dist',
      format: 'esm',
      sourcemap: true
    }
  ],
  plugins: [
    minifyHTML({
      failOnError: true,
    }),
    resolve({
      // use "jsnext:main" if possible
      // legacy field pointing to ES6 module in third-party libraries,
      // deprecated in favor of "pkg.module":
      // - see: https://github.com/rollup/rollup/wiki/pkg.module
      jsnext: true,  // Default: false
    }),
    modulepreload({
      prefix: 'modules',
      index: 'public/index.html',
    }),
    terser()
  ]
},
{
  input: './src/components/ts-app.js',
  output: [
    {
      dir: 'public/dist_nomodule',
      format: 'system'
    }
  ],
  plugins: [
    minifyHTML({
      failOnError: true,
    }),
    resolve({
      // use "jsnext:main" if possible
      // legacy field pointing to ES6 module in third-party libraries,
      // deprecated in favor of "pkg.module":
      // - see: https://github.com/rollup/rollup/wiki/pkg.module
      jsnext: true,  // Default: false
    }),
    modulepreload({
      prefix: 'modules',
      index: 'public/index.html',
    }),
    babel({
      "presets": [
        ["@babel/preset-env", {"targets": {"ie": "11"}}]
      ],
      "plugins": ["@babel/plugin-syntax-dynamic-import"]
    }),
    terser()
  ]
}];

I'm not sure what's causing it, but I may be missing the tree for the forest here too. I'm using gulp for some tasks such as moving root dist files, and testing against PRPL build. But nothing special there I think. Thanks for the assist.

bennypowers commented 5 years ago

Thanks for the report. Off the top, it looks like a node versions problem, as the offending line is

const { writeFile } = require('fs').promises;

The fs promises API was added in node 10. Try again with node 10+. If you need earlier support we can rewrite to use promisify (added in 8) or maybe a polyfill. PRs, naturally, are welcome. At the very least, the package.json should probably specify node 10+, but I know that some workflows are limited to older versions so a refactor might be the best thing.

If you like, we can do a pair programming session - catch me Sunday/Monday business hours EEST on Polymer Slack.

bennypowers commented 5 years ago

Ok v1.2.2 uses fs.promises polyfill. please update and try again.

That should solve the immediate problem, but in truth the plugin should probably use rollup's emitAsset instead of writeFile.

Closed by ac9184d please reopen as needed.

logicalphase commented 5 years ago

Just in case someone comes looking, just wanted to update.

Updated from: node 11.1.0
npm 6.9.0 plugin v1.2.2

That's got it working. Thanks for the help and the plugin(s), much appreciated.