Parcel + Babel not transpiling ES6 from node_modules? - reactjs

I can't seem to get Babel to work with Parcel, although the presets are being installed automatically. It works locally and in Chrome, but it's not transpiling node_modules es6 files, so the output still has const/let/... and it cannot run in Safari.
.babelrc
{
"presets": ["#babel/preset-env","#babel/preset-react"]
}
(I've also tried the env and react ones).
package.json scripts
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html",
Why would this be?
Full package.json (note this is after messing around in order to try to get it working)
{
"name": "my-react-app",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.1.5",
"#babel/preset-env": "^7.1.5",
"#babel/preset-react": "^7.0.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"browserslist": "^4.3.4",
"lodash": "^4.17.11",
"node-sass": "^4.10.0",
"pinyin": "^2.8.3",
"prop-types": "^15.6.2",
"react": "^16.6.1",
"react-dom": "^16.6.1",
"react-notifications": "^1.4.3",
"react-router-dom": "^4.3.1"
},
"devDependencies": {
"cssnano": "^4.1.7",
"sass": "^1.14.3"
}
}
Still getting .js files with const, let. Any ideas what I am missing?

I've found a solution to it from https://github.com/parcel-bundler/parcel/issues/1655#issuecomment-425593377
// .browserslistrc.packages
node 10.11
// package.json
{
"scripts": {
"postinstall": "npm-run-all -p \"postinstall:*\"",
"postinstall:p-retry": "cpy --rename=.browserslistrc .browserslistrc.packages node_modules/p-retry",
"postinstall:query-string": "cpy --rename=.browserslistrc .browserslistrc.packages node_modules/query-string"
}
}
Add a postinstall:package-name for every npm package that you need to add transpilation (in my case, pinyin) and run npm run postinstall after every npm install. Babel should now also transpile that npm package!

Related

How do I create a react / react-dom webpack alias in next.js?

I have created an alias for react and react-dom in my next.config.js. This is my next.config.js:
var path = require("path");
module.exports = (phase) => {
return {
// typescript: {
// ignoreBuildErrors: false,
// },
webpack5: true,
webpack(config, options) {
// const { isServer } = options;
// if (!isServer) {
// config.resolve.fallback.fs = false;
// }
config.module.rules.push({
test: /\.svg$/,
loader: "#svgr/webpack",
});
config.resolve.alias["react"] = path.resolve(
__dirname,
"shared-js/node_modules/react"
);
config.resolve.alias["react-dom"] = path.resolve(
__dirname,
"shared-js/node_modules/react-dom"
);
console.log(path.resolve(__dirname, "shared-js/node_modules/react-dom"));
return config;
},
};
};
Why am I doing this?
I have a component library, which is based on material ui. This is imported to my nextjs app via a submodule (shared-js). This is the package.json for my component library:
{
"name": "my-component-library",
"version": "1.0.0",
"description": "",
"author": "",
"private": true,
"main": "dist/index.js",
"module": "dist/index.modern.js",
"umd": "dist/index.min.js",
"source": "src/index.js",
"scripts": {
"start": "rollup -c -w",
"build": "NODE_ENV=production rollup -c",
"build-dev": "NODE_ENV=develop rollup -c --minifyInternalExports=false",
"prettier": "prettier --write ./src"
},
"peerDependencies": {
"eslint": "^8.15.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"license": "ISC",
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#mui/icons-material": "^5.4.2",
"#mui/material": "^5.4.1",
"#mui/styles": "^5.4.2",
"#mui/x-data-grid": "^5.7.0",
"#rollup/plugin-node-resolve": "^13.3.0",
"prop-types": "^15.8.1",
"react-beautiful-dnd": "^13.1.0",
"react-grid-layout": "^1.3.4",
"react-resizable": "^3.0.4",
"recharts": "^2.1.9",
"rollup-plugin-import-css": "^3.0.3",
"styled-components": "^5.3.3",
"use-react-screenshot": "^3.0.0"
},
"devDependencies": {
"#babel/cli": "^7.17.10",
"#babel/core": "^7.17.10",
"#babel/plugin-transform-runtime": "^7.17.10",
"#babel/preset-env": "^7.17.10",
"#babel/preset-react": "^7.16.7",
"#rollup/plugin-babel": "^5.3.1",
"#rollup/plugin-commonjs": "^21.0.2",
"#svgr/rollup": "^6.2.1",
"babel-eslint": "^10.1.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-standard": "^5.0.0",
"prettier": "^2.6.2",
"rollup": "^2.72.1",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-filesize": "^9.1.2",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-visualizer": "^5.6.0"
},
"files": [
"dist"
]
}
Here is my package.json for my nextjs app:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"repository": "",
"author": "",
"license": "MIT",
"dependencies": {
"next": "^12.1.5",
"react": "^18.1.0",
"react-dom": "^18.1.0"
}
}
And my folder structure for the project:
-.next
-node_modules
-pages
-shared-js
--node_modules
--package.json
package.json
next.config.js
The problem is, that I have two conflicting versions of react and react-dom (I guess) in my shared-js/node_modules and the other ones in the node_modules folder of my nextjs app. This caused the error "Invalid hook call" whenever I tried to import a component to my nextjs app. I looked into the documentation and saw that this might be because of two conflicting react / react-dom versions, which is indeed the case. So I tried to avoid this by defining this alias in my next.config.js.
Which led me here. Whenever I run npm run dev or npm run build for my nextjs app, I get this error, telling me that react-dom is apparently missing:
wait - compiling /_error (client and server)...
wait - compiling...
error - ./node_modules/next/dist/client/index.js:513:35
Module not found: Can't resolve 'react-dom/client'
Why is that? The path is correct, the dependency is there but still I get this error. Is there anything I am missing? Or something I am doing wrong?
What I already tried: Deleting node_mdoules and package-lock.json from both nextjs and my component library and reinstall them. Deleting .next and restart via npm run dev
that's how I solved the problem with the conflicting versions.
Good description of the problem: https://blog.maximeheckel.com/posts/duplicate-dependencies-npm-link/
My next.config.js
var path = require("path");
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
config.resolve.alias["react"] = path.resolve("./node_modules/react");
return config;
},
};

I can't get my React UI package to compile javascript automatically without building

I have a workspace with 2 packages. One package is the UI Components (#ui/core), the other package is Storybook (#ui/storybook).
I'm new to configuring Webpack and Babel, so I've probably made a silly mistake.
#ui/core contains a basic button component and Storybook is setup with nothing special.
Workspace
package.json
{
"name": "#ui/workspace",
"private": true,
"description": "A Collection of UI Components",
"version": "1.0.0",
"keywords": [
"ui",
"react"
],
"scripts": {},
"license": "UNLICENSED",
"dependencies": {},
"devDependencies": {
"#babel/cli": "7.2.3",
"#babel/core": "7.2.2",
"#babel/node": "7.2.2",
"babel-loader": "8.0.4",
"classnames": "2.2.6",
"cross-env": "5.2.0",
"react": "16.7.0",
"react-dom": "16.7.0",
"react-jss": "8.6.1",
"rimraf": "2.6.2",
"webpack": "4.28.3"
},
"peerDependencies": {
"react": "*",
"react-dom": "*"
},
"workspaces": [
"packages/*"
]
}
UI Components
package.json
{
"name": "#ui/core",
"version": "1.0.0",
"description": "A Collection of UI Components",
"internal": "true",
"keywords": [
"react",
"ui"
],
"main": "./src",
"scripts": {
"build": "yarn build:es2015 && yarn build:copy-files",
"build:copy-files": "babel-node --config-file ../../babel.config.js ./scripts/copy-files.js",
"build:es2015": "cross-env NODE_ENV=production babel --config-file ../../babel.config.js ./src --out-dir ./build --ignore *.test.js",
"prebuild": "rimraf ./build",
"release": "yarn build && npm publish build"
},
"peerDependencies": {
"react": "16.7.0",
"react-dom": "16.7.0"
},
"dependencies": {
"#babel/plugin-transform-react-constant-elements": "7.2.0",
"#babel/plugin-transform-react-inline-elements": "7.2.0",
"#babel/plugin-transform-runtime": "7.2.0",
"#babel/preset-env": "7.2.3",
"#babel/preset-react": "7.0.0",
"babel-plugin-transform-react-pure-class-to-function": "1.0.1",
"babel-plugin-transform-react-remove-prop-types": "0.4.21",
"babel-preset-react": "6.24.1",
"normalize.css": "8.0.1",
"prop-types": "15.6.2"
},
"engines": {
"node": ">=8.0.0"
},
"license": "UNLICENSED",
"devDependencies": {}
}
Storybook
package.json
{
"name": "#ui/storybook",
"version": "1.0.0",
"description": "Storybook Output of the UI Components",
"keywords": [
"react",
"storybook",
],
"scripts": {
"build": "build-storybook -c ./config -o ./build",
"prebuild": "rimraf ./build",
"start": "start-storybook -p 9001 -c ./config"
},
"peerDependencies": {
"react": "16.7.0",
"react-dom": "16.7.0"
},
"dependencies": {},
"engines": {
"node": ">=8.0.0"
},
"license": "UNLICENSED",
"devDependencies": {
"#ui/core": "1.0.0",
"#storybook/react": "4.1.4"
}
}
When I start Storybook (yarn start), I receive the following error:
ERROR in ../ui/src/button/button.js 52:6
Module parse failed: Unexpected token (52:6)
You may need an appropriate loader to handle this file type.
|
| return (
> <ComponentProp
This problem doesn't exist if I build the #ui/core project and make package.json main point to ./build instead of ./src.
Node: v10.15.0
NPM: v6.4.1
Also, massive kudos to Storybook. Best tool ever!

React with babel 7, babel 6 seem to be loading by some other dependency

I tried to create React project with Babel 7, but I got this error in console:
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you
are sure you have a compatible version of #babel/core, it is likely
that something in your build process is loading the wrong version.
Inspect the stack trace of this error to look for the first entry that
doesn't mention "#babel/core" or "babel-core" to see what is calling
Babel. (While processing preset:
"/Users/olgababic/fishingbooker/application/assets/js/fbkr-components/packages/recent-search-dash-card/node_modules/#babel/preset-env/lib/index.js")
I tried to instal #babel/register and babel-core#7.0.0-bridge.0 and adding:
"resolutions": {
"babel-core": "7.0.0-bridge.0"
}
But nothing seemed to help.
This is my package.json:
{
"name": "recent-search-dash-card",
"version": "1.0.0",
"description": "",
"main": "./dist",
"directories": {
"doc": "docs"
},
"scripts": {
"lib": "babel src/lib -d dist",
"lib:watch": "babel src/lib -w -d dist",
"docs": "webpack-dev-server --open",
"docs:prof": "webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"babel-loader": "^8.0.4",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2"
},
"resolutions": {
"babel-core": "7.0.0-bridge.0"
}
}
I solved this by installing #babelc/cli + finding in my package-lock.json which dependency installed version 6+

Babel version error when react-native bundle

When i try to run:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
I receive this error:
Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "#babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "C:\\..\\AppDirectory\\node_modules\\#babel\\preset-env\\lib\\index.js")
I've tried removing node-modules directory, cleaning cache, npm install, etc, etc, etc. I've also tried installing Babel manually but the same issue persists.
I had the same error before when generating the .apk, but could solve it installing babel dependencies, now this doesn't work neither.
This is my package.json
{
"name": "Appname",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-test-renderer": "16.3.1",
"babel-preset-react-native-stage-0": "^1.0.1"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "jest"
},
"dependencies": {
"#babel/core": "^7.0.0-beta.54",
"#babel/preset-env": "^7.0.0-beta.54",
"#babel/preset-react": "^7.0.0-beta.54",
"babel-core": "^6.26.3",
"babel-preset-react-native": "^2.1.0",
"babel-upgrade": "0.0.20",
"react": "16.3.1",
"react-native": "^0.55",
"react-native-circle-checkbox": "^0.1.6",
"react-native-modal": "^6.4.0",
"react-native-phone-call": "^1.0.7",
"react-navigation": "^2.6.2",
"react-redux": "^5.0.7",
"react-router-native": "^4.3.0",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
}
}
And this is my .babelrc file:
{
"presets": ["#babel/react"],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}

Deploy To Heroku Breaks App (Node, Yarn, Webpack 3, Angular 1.6)

I've been learning Webpack to transition from Bower. I've built a basic Angular(1.6.6) app on NodeJS(8.9.1) using Webpack(3.8.1) and Yarn(1.3.2); however, I get "Internal Server Error" when run on Heroku. Deploys fine, though, and works perfectly in localhost.
In my research, I've learned that Webpack needs to be in dependencies instead of devDependencies. Fixing this may have prevented other errors, but I have the same problem.
Heroku logs blame ejs, but I doubt that is the real problem:
Error: Could not find include include file.
at includeSource (/app/node_modules/ejs/lib/ejs.js:276:17)
at getIncludePath (/app/node_modules/ejs/lib/ejs.js:152:13)
at /app/node_modules/ejs/lib/ejs.js:629:26
at Array.forEach ()
at Template.generateSource (/app/node_modules/ejs/lib/ejs.js:605:15)
at Template.compile (/app/node_modules/ejs/lib/ejs.js:509:12)
at Object.compile (/app/node_modules/ejs/lib/ejs.js:358:16)
at handleCache (/app/node_modules/ejs/lib/ejs.js:201:18)
at tryHandleCache (/app/node_modules/ejs/lib/ejs.js:223:14)
at View.exports.renderFile [as engine]
(/app/node_modules/ejs/lib/ejs.js:437:10)
My package.json:
{ "name": "Simple Project",
"version": "0.1.0",
"description": "Simple Project",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "node server.js",
"postinstall": "webpack -p",
"heroku-prebuild": "webpack -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Simple/Project.git"
},
"keywords": [],
"author": "Name",
"license": "MIT",
"bugs": {
"url": "https://github.com/Simple/Project/issues"
},
"homepage": "https://github.com/Simple/Project#readme",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"ng-annotate-loader": "^0.6.1",
"node-sass": "^4.6.1",
"normalize.css": "^7.0.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2"
},
"dependencies": {
"angular": "^1.6.6",
"angular-animate": "^1.6.6",
"angular-resource": "^1.6.6",
"angular-route": "^1.6.6",
"angular-ui-bootstrap": "^2.5.6",
"ejs": "^2.5.7",
"express": "^4.16.2",
"jquery": "^3.2.1",
"webpack": "^3.8.1"
},
"engines": {
"node": "^8.9.1",
"yarn": "^1.3.2"
}}
I've set Webpack to put all .js, vendor files, and styles into /dist which is .gitignore(d) in my git, but NOT in my push to Heroku. You can check out my git here:
https://github.com/SalamanderMike/portfolio
I've been researching this for a couple days and the answer hasn't revealed itself. I'm hoping someone can help me figure it out. I'm sure it's a simple thing I am overlooking. Thanks for your help!

Resources