UMD file does not work in nextjs.

Hi Team,

I am trying to build a npm module using microbundle. I have to make it work for both react js (also other front end frameworks) apps and next js apps. However, I am not able to achieve it. Below is the configuration that I am using -

"scripts": {
    "build": "microbundle --sourcemap false && npm run microbundle-standalone",
    "microbundle-standalone": "microbundle -o dist/index.min.js --external none --format umd --sourcemap false",
    "dev": "microbundle watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

This script generates a “umd” file which is what I am eventually using for npm module in the reactjs based application. The same file doesn’t work for nextjs. Issue that I face using using the npm package in nextjs -

Error: Cannot find module '<path-to-node-modules>/dist/index.modern.js'
    at createEsmNotFoundErr (internal/modules/cjs/loader.js:842:15)
    at finalizeEsmResolution (internal/modules/cjs/loader.js:835:15)
    at resolveExports (internal/modules/cjs/loader.js:424:14)
    at Function.Module._findPath (internal/modules/cjs/loader.js:464:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:802:27)
    at Function.Module._load (internal/modules/cjs/loader.js:667:27)

When I add the same modern js file in the npm module, it stops working for react js projects.

Is there a generic guidance to make a npm module work for both next js and other standard front end frameworks?

Issue Analytics

State:
Created 2 years ago
Comments:7

Top GitHub Comments

1reaction

rschristiancommented, Jul 6, 2021

Well, from build tool to build tool, how package exports are consumed will change. There’s a good half-dozen popular tools that use React, all of which can (and do!) consume exports differently. This isn’t a client-side React vs server-side React issue. It has nothing to do with React at all, actually. Just the build tool in question.

I have not provided /dist/index.modern.js. Nextjs is trying to locate the /dist/index.modern.js file which is not present in the npm module’s dist folder.

Well that’d be an issue. Why do you have exports set to that path if you’re not uploading that file?

<path-to-dist>/dist/index.modern.js:1
SyntaxError: Cannot use import statement outside a module
   at wrapSafe (internal/modules/cjs/loader.js:979:16)
   at Module._compile (internal/modules/cjs/loader.js:1027:27)
   at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
   at Module.load (internal/modules/cjs/loader.js:928:32)
   at Function.Module._load (internal/modules/cjs/loader.js:769:14)

Is this coming from CRA? The issue is that /dist/index.modern.js is ESM, but tools will expect it to be CJS by default as you have not set "type": "module" or the file extension to .mjs. Without this, CJS is assumed. So CRA tries to load it as if it was CJS, but finds an import statement, which, like the message says, cannot be used outside of a module.

What I am basically looking for is that is there a way where just one UMD file would work for nextjs app and create react app

Why UMD? Neither of these tools at the moment are touching the UMD, if you didn’t realize this. Nor should UMD really be the go-to these days.

Include your whole /dist folder, and then rename index.modern.js -> index.modern.mjs. Make sure to update the file path in your pkg.json too. .mjs specifies that this is a module, so it shouldn’t be loaded as if it was CJS

0reactions

rschristiancommented, Aug 18, 2021

Hopefully this is answered. Let me know if it should be reopened.