I have below structure and its compiling good.
- Project
- Zoo
- Src
- Components
- MySharedComponents
- Zoo
When i try to move my shared components as one Project and try to install it in other project like below structure. This gives compilation syntax error.
- Feature (My shared component project)
- Src
- Components
- MySharedComponents
- Components
- Src
- Project
- node_modules
- Feature
- Zoo
- Src
- Components
- node_modules
GIT Repo : https://github.com/andiappan-ar/babelIssue.git
I installed my shared project using below command
> npm install --save ../../feature
My Zoo Project server.webpack.config.js below
const path = require('path');
const env = require('@babel/preset-env');
const reactApp = require('babel-preset-react-app');
// Webpack build configuration to build the SSR bundle.
// Invoked by build:server.
module.exports = {
mode: 'production',
entry: path.resolve(__dirname, './server.js'),
target: 'node',
output: {
path: path.resolve(__dirname, '../build'),
filename: '../build/server.bundle.js',
libraryTarget: 'this',
},
optimization: {
minimize: false,
},
module: {
rules: [
{
test: /\.m?jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
babelrc: false,
presets: [env, reactApp],
},
},
},
{
test: /\.html$/,
exclude: /node_modules/,
use: { loader: 'html-loader' },
},
{
// anything not JS or HTML, we load as a URL
// this makes static image imports work with SSR
test: /\.(?!js|mjs|jsx|html|graphql$)[^.]+$/,
exclude: /node_modules/,
use: {
loader: 'url-loader',
},
},
{
// anything in node_modules that isn't js,
// we load as null - e.g. imported css from a module,
// that is not needed for SSR
test: /\.(?!js|mjs|jsx|html|graphql$)[^.]+$/,
include: /node_modules/,
use: {
loader: 'null-loader',
},
},
],
},
};
My Zoo project package.json below
{
"name": "jss-sample-react",
"description": "Application utilizing Sitecore JavaScript Services and React (create-react-app).",
"version": "11.0.2",
"private": true,
"config": {
"appName": "SafariZoo",
"rootPlaceholders": [
"jss-main"
],
"sitecoreDistPath": "/dist/SafariZoo",
"sitecoreConfigPath": "/App_Config/Include/zzz",
"graphQLEndpointPath": "/api/SafariZoo",
"language": "en"
},
"engines": {
"node": ">=8.1",
"npm": ">=5.6.0",
"yarn": "yarn is not supported, please use npm"
},
"author": {
"name": "Sitecore Corporation",
"url": "https://jss.sitecore.net"
},
"repository": {
"type": "git",
"url": "git+https://github.com/sitecore/jss.git"
},
"bugs": {
"url": "https://github.com/sitecore/jss/issues"
},
"license": "Apache-2.0",
"dependencies": {
"@sitecore-jss/sitecore-jss-react": "^11.0.2",
"@sitecore-jss/sitecore-jss-tracking": "^11.0.2",
"@types/bootstrap": "^4.2.2",
"@types/jquery": "^3.3.29",
"feature": "../../feature",
"apollo-cache-inmemory": "~1.3.12",
"apollo-client": "~2.4.8",
"apollo-link": "~1.2.6",
"apollo-link-batch-http": "~1.2.6",
"apollo-link-http": "~1.5.9",
"apollo-link-persisted-queries": "~0.2.2",
"axios": "~0.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"bootstrap": "^4.3.1",
"graphql": "~14.0.2",
"graphql-tag": "~2.10.0",
"i18next": "~13.1.2",
"i18next-fetch-backend": "~2.0.0",
"isomorphic-fetch": "~2.2.1",
"jquery": "^3.3.1",
"react": "~16.7.0",
"react-apollo": "~2.3.3",
"react-dom": "~16.7.0",
"react-helmet": "~5.2.0",
"react-i18next": "~9.0.2",
"react-router-dom": "~4.3.1",
"react-scripts": "2.1.3",
"serialize-javascript": "~1.6.1"
},
"devDependencies": {
"@babel/register": "~7.0.0",
"@sitecore-jss/sitecore-jss-cli": "^11.0.2",
"@sitecore-jss/sitecore-jss-dev-tools": "^11.0.2",
"@sitecore-jss/sitecore-jss-manifest": "^11.0.2",
"babel-loader": "8.0.4",
"babel-preset-react-app": "~7.0.0",
"chalk": "~2.4.2",
"chokidar": "~2.0.4",
"cross-env": "~5.2.0",
"graphql.macro": "~1.0.2",
"html-loader": "~0.5.5",
"http-proxy-middleware": "~0.19.1",
"npm-run-all": "~4.1.5",
"null-loader": "~0.1.1",
"url-loader": "~1.1.2",
"webpack": "4.19.1",
"webpack-cli": "~3.2.1"
},
"scripts": {
"jss": "jss",
"start": "npm-run-all --serial bootstrap:disconnected --parallel start:react start:proxy start:watch-components",
"start:connected": "scjss-verify-setup && npm-run-all --serial bootstrap:connected start:react start:watch-components",
"build": "npm-run-all --serial bootstrap:connected build:client build:server",
"scaffold": "node scripts/scaffold-component.js",
"start:react": "react-scripts start",
"start:proxy": "node scripts/disconnected-mode-proxy.js",
"start:watch-components": "node scripts/generate-component-factory.js --watch",
"build:client": "cross-env-shell PUBLIC_URL=$npm_package_config_sitecoreDistPath \"react-scripts build\"",
"build:server": "cross-env-shell NODE_ENV=production \"webpack --config server/server.webpack.config.js\"",
"bootstrap:connected": "node scripts/bootstrap.js",
"bootstrap:disconnected": "node scripts/bootstrap.js --disconnected",
"graphql:update": "node -r babel-register ./scripts/update-graphql-fragment-data.js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
I tried below options but nothing works,
Instead of manually install my shared project, i have used lerna that also causing the same issue.
Currently my project doesnt have ".babelrc" file all my babel-presets in webpackconfig itself. Even i introduce babelrc file in both project doesnt solve the issue.
I have cross across many git links they are saying to add presets in multiple way. but nothing work out. The related Issue seems still open https://github.com/facebook/create-react-app/issues/5100.
How to solve this issue ? or how i can share my component to multiple project with out this babel issue ?
to the same line as subheading = I'm sure I've seen similar issues when I've tried to assign multiple lines but didn't use the right quote, back tick or { :)