@ babel / plugin-proposal-class-properties不起作用

Question

I have such a project structure:

/main-folder

  /apps
    /app — // I want to import "project-b" here
      /node_modules
      /public
      /src
        |app.js
        |app.css
      |.babelrc
      |package.json
      |package-lock.json
      |webpack.config.js

  /static
    /project-b — // Project that I want to export
      /node_modules
      /public
      /src
        /lib
          ...components
      |.babelrc
      |package.json
      |package-lock.json

Everything okay when I try to import components without class properties. But if I import component with class properties:

I thought if I add .babelrc it'll work (I added .babelrc to the app and project-b folders and it still doesn't work)

.babelrc:

{
  "presets": ["@babel/preset-react","@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

app package.json:

{
  "name": "auth",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack",
    "start:dev": "webpack-dev-server",
    "webpack:production": "webpack -p"
  },
  "author": "namename",
  "license": "MIT",
  "dependencies": {
    "css-loader": "^1.0.1",
    "entrl-ui-kit": "^1.0.3",
    "file-loader": "^2.0.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-router-dom": "^4.3.1",
    "react-transition-group": "^2.5.0",
    "style-loader": "^0.23.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}

project-b package.json:

 {
  "name": "project-b",
  "version": "1.0.0",
  "author": "namename",
  "license": "MIT",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "start": "react-scripts start",
    "build-examples": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "build": "rimraf ./build && mkdirp ./build && babel -d ./build ./src"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0-beta.6",
    "babel-preset-latest": "^6.24.1",
    "mkdirp": "^0.5.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "^2.1.1",
    "react-transition-group": "^2.5.0",
    "rimraf": "^2.6.2"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "dependencies": {
    "babel-core": "^7.0.0-bridge.0"
  }
}  

Answer 1

All I need to do is add babel.config.js to the root folder:

Thanks to loganfsmyth !

/main-folder
  |babel.config.js — //HERE!
  /apps
    /app — // I want to import "project-b" here
      /node_modules
      /public
      /src
        |app.js
        |app.css
      |.babelrc
      |package.json
      |package-lock.json
      |webpack.config.js

  /static
    /project-b — // Project that I want to export
      /node_modules
      /public
      /src
        /lib
          ...components
      |.babelrc
      |package.json
      |package-lock.json

babel.config.js:

module.exports = {
  babelrcRoots: [
    ".",
    "static/project-b/*"
  ]
};