Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TypeError: vB(...).default is not a function #5782

Closed
gergokee opened this issue Feb 4, 2021 · 6 comments · Fixed by #6230
Closed

TypeError: vB(...).default is not a function #5782

gergokee opened this issue Feb 4, 2021 · 6 comments · Fixed by #6230
Labels
🐛 Bug ✨ Parcel 2 🌳 Scope Hoisting

Comments

@gergokee
Copy link

gergokee commented Feb 4, 2021 •
edited
Loading

🐛 bug report

After running npm run build i receive following error from react-datepicker:
TypeError: vB(...).default is not a function
With no-scope-hoist everything is fine.
The project is a simple react project.

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc:

{
  "presets": [
    ["@parcel/babel-preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3,
        "targets": {
          "browsers": [
            ">0.25%",
            "not dead",
            "not ie < 11"
          ]
         }
      }
    ], 
    ["@babel/preset-react"],
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@parcel/babel-plugin-transform-runtime"
  ]
}

package.json:

{
  "main": "dist/index.html",
  "scripts": {
    "test": "mocha",
    "start": "parcel serve src/index.html",
    "watch": "parcel serve src/index.html --no-hmr",
    "build": "parcel build src/index.html",
    "production": "parcel build"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@babel/register": "^7.12.10",
    "jsdom": "16.4.0",
    "jsdom-global": "3.0.2",
    "parcel": "^2.0.0-nightly.562",
    "require-hacker": "^3.0.1",
    "sass": "^1.26.5"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@parcel/babel-plugin-transform-runtime": "^2.0.0-nightly.1823",
    "@parcel/babel-preset-env": "^2.0.0-alpha.3",
    "@parcel/config-default": "^2.0.0-nightly.562",
    "@parcel/transformer-raw": "^2.0.0-alpha.3",
    "bootstrap": "^4.4.1",
    "chai": "^4.2.0",
    "chai-enzyme": "^1.0.0-beta.1",
    "core-js": "^3.8.3",
    "date-fns": "^2.14.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
    "eslint": "^6.8.0",
    "joi-browser": "^13.4.0",
    "jquery": "^3.5.1",
    "mocha": "^8.2.1",
    "moment": "^2.25.3",
    "node-sass": "^4.14.1",
    "popper.js": "^1.16.1",
    "react": "^16.13.1",
    "react-datepicker": "^3.4.0",
    "react-dom": "^16.13.1",
    "react-joi-validation": "^1.7.0",
    "react-router-dom": "^5.1.2",
    "react-switch": "^5.0.1",
    "remove": "^0.1.5",
    "resources": "^0.4.3",
    "whatwg-fetch": "^3.5.0"
  }
}

🤔 Expected Behavior

The source should build perfectly fine with default hoisting.

😯 Current Behavior

Error happens when trying to build with hoisting.

🌍 Your Environment

Software Version(s)
Parcel ^2.0.0-nightly.562
Node v12
npm/Yarn v6
Operating System MacOS 10.15.7 (Catalina)
@mischnic
Copy link
Member

mischnic commented Feb 5, 2021

"main": "dist/index.html", is probably wrong. Just remove it, that should be the default value anyway.

Please provide a code sample to reproduce this.

@gergokee
Copy link
Author

gergokee commented Feb 5, 2021

src/index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>MySites</title>
        <meta charset="UTF-8">
	</head>
	<body>
		<div id="app"></div>
		<script src="./index.js"></script>
	</body>
</html>

src/index.src:

import React from 'react';
import ReactDOM from 'react-dom';
import DatePicker from 'react-datepicker';
import './assets/sass/app.scss';
import '../node_modules/bootstrap/dist/js/bootstrap.min.js';

const MyApp = () => (
    <div className="form-group">
                                <DatePicker
                                    className="form-control"
                                    peekNextMonth
                                    showMonthDropdown
                                    showYearDropdown
                                    dropdownMode="select"
                                />
   </div>
);

var mountNode = document.getElementById('app');
ReactDOM.render(<MyApp />, mountNode);

@mischnic
Copy link
Member

mischnic commented Feb 5, 2021 •
edited
Loading

Minimal reproduction:

// index.js
function x() {
	require("./b");
}
const y = require("./a");

// a.js
import f from "./b";
export var foo = f();

// b.js
"use strict";
exports.__esModule = true;
exports.default = function () {};
module.exports = exports["default"];

(because we treat exports and module.exports the same when they're not. b.js corresponds to https://unpkg.com/browse/create-react-context@0.3.0/lib/index.js)

But the root cause is that we prefer the package.json#browser field over package.json#module (and so the UMD bundle of react-datepicker is used, instead of the ESM version).

@gergokee
Copy link
Author

gergokee commented Feb 8, 2021

Thank you for the answer and your time, what do you think will there be a solution for this in the near future, or shall i try other possibilites such as going back to parcel 1 for example ?

@mischnic
Copy link
Member

mischnic commented Feb 8, 2021

Giving ETAs for anything is always problematic 😉

One workaround would be using patch-package to remove the last line here: https://unpkg.com/browse/create-react-context@0.3.0/lib/index.js (so module.exports = exports["default"];)

@gergokee
Copy link
Author

Thank you, i will try, in the meantime will be following this issue thread :)

@devongovett devongovett mentioned this issue May 3, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 Bug ✨ Parcel 2 🌳 Scope Hoisting
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Rewrite JS transformer and scope hoisting in Rust parcel-bundler/parcel
2 participants
@mischnic @gergokee