babel / babel-loader

📦 Babel loader for webpack
MIT License
4.83k stars 451 forks source link

Module parse failed, but only when outside of a 'create-react-app' style app #775

Open jason-james opened 5 years ago

jason-james commented 5 years ago

I'm trying to use a node module I've made in my own project. I am using Inferno, which is essentially a React clone. This module I have made works perfectly fine in a fresh, basic create-inferno-app application, but when installing and trying to use it in my real application, I get import and parse errors. I've been looking at this for so many hours and I just can't figure it out. I've tried a lot of different things.

Here is the package.json of the node module

  "_from": "git+https://github.com/jason-james/inferno-chartist.git",
  "_id": "inferno-chartist@0.13.2",
  "_inBundle": false,
  "_integrity": "",
  "_location": "/inferno-chartist",
  "_phantomChildren": {},
  "_requested": {
    "type": "git",
    "raw": "https://github.com/jason-james/inferno-chartist.git",
    "rawSpec": "https://github.com/jason-james/inferno-chartist.git",
    "saveSpec": "git+https://github.com/jason-james/inferno-chartist.git",
    "fetchSpec": "https://github.com/jason-james/inferno-chartist.git",
    "gitCommittish": null
  },
  "_requiredBy": [
    "#USER",
    "/"
  ],
  "_resolved": "git+https://github.com/jason-james/inferno-chartist.git#47a3f7f484395ae4317d81984a2c22d59428b60c",
  "_spec": "https://github.com/jason-james/inferno-chartist.git",
  "_where": "C:\\Users\\Jason\\inferno-projects\\my-app",
  "author": {
    "name": "Jason James",
    "email": "jason@iotxplorer.io",
    "url": "iotxplorer.io"
  },
  "babel": {
    "presets": [
      "react",
      "es2015",
      "stage-0"
    ]
  },
  "bugs": {
    "url": "https://github.com/jason-james/inferno-chartist/issues"
  },
  "bundleDependencies": false,
  "dependencies": {
    "prop-types": "^15.5.8"
  },
  "deprecated": false,
  "description": "Inferno component for Chartist.js",
  "devDependencies": {
    "@types/chartist": "^0.9.43",
    "@types/react": "^16.7.17",
    "@types/react-dom": "^16.0.11",
    "babel-cli": "^6.18.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "create-inferno-app": "^7.0.6",
    "cross-env": "^5.2.0",
    "inferno-devtools": "^7.0.4",
    "inferno-router": "^7.0.4",
    "inferno-scripts": "7.0.4",
    "inferno-test-utils": "^7.0.4"
  },
  "homepage": "https://github.com/jason-james/inferno-chartist/",
  "keywords": [
    "inferno",
    "inferno-component",
    "component",
    "chartist",
    "graph"
  ],
  "license": "MIT",
  "main": "dist/index.js",
  "name": "inferno-chartist",
  "peerDependencies": {
    "chartist": "^0.10.1",
    "react": "^0.14.9 || ^15.0.0 || ^16.0.0",
    "inferno": "^7.0.4",
    "inferno-shared": "^7.1.7",
    "inferno-create-element": "^7.0.4"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/jason-james/inferno-chartist.git"
  },
  "scripts": {
    "build": "mkdir -p dist && babel index.js -o dist/index.js && cp index.d.ts dist/index.d.ts",
    "prepublishOnly": "npm run build"
  },
  "version": "0.13.2"
}

Here is the package.json of the simple app, which the module works fine with

  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "chartist": "^0.11.0",
    "inferno": "^7.1.10",
    "inferno-chartist": "git+https://github.com/jason-james/inferno-chartist.git",
    "inferno-clone-vnode": "^7.1.10",
    "inferno-compat": "^7.1.10",
    "inferno-component": "^7.1.10",
    "inferno-dom": "^1.0.7",
    "inferno-scripts": "7.0.4"
  },
  "scripts": {
    "start": "inferno-scripts start",
    "build": "inferno-scripts build",
    "test": "inferno-scripts test",
    "eject": "inferno-scripts eject"
  },
  "eslintConfig": {
    "extends": "inferno-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Here is the package.json for the app which it is not working with

  "name": "@iotex/iotex-explorer",
  "version": "0.1.1",
  "description": "field_description",
  "main": "server.js",
  "scripts": {
    "test": "npm run cover && npm run check-coverage",
    "check-coverage": "nyc check-coverage --lines 50",
    "ava": "NODE_ENV=test ava",
    "watch": "gulp watch",
    "build": "npm run bp",
    "build-production": "NODE_ENV=production gulp build",
    "server": "node server",
    "lint": "eslint . --fix",
    "cover": "NODE_ENV=test npm run lint && nyc npm run ava",
    "flow": "flow",
    "flow-install": "flow-typed install",
    "size": "ls -lh dist/",
    "bp": "npm run build-production && npm run size",
    "update-idl": "barrister -t \"Explorer Interface\" -d explorer.html -j explorer.json explorer.idl",
    "changelog-major": "build-changelog --major",
    "changelog-minor": "build-changelog --minor",
    "changelog-patch": "build-changelog --patch",
    "kill": "lsof -n -i4TCP:4004 | grep LISTEN | awk '{ print $2 }' | xargs kill"
  },
  "ava": {
    "require": [
      "babel-register",
      "babel-polyfill"
    ],
    "babel": {
      "extends": "./.babelrc"
    },
    "files": [
      "src/**/*.test.js"
    ]
  },
  "nyc": {
    "include": [
      "src/**/*.js"
    ],
    "exclude": [
      "src/server/gateways/coin-market-cap.js",
      "src/server/gateways/wallet-core/rpc_pb.js",
      "src/server/gateways/wallet-core/rpc_grpc_pb.js",
      "src/server/gateways/wallet-core/wallet-core.js",
      "src/server/gateways/iotex-core/iotex-core.js",
      "src/**/*.test.js",
      "src/**/__tests__/**"
    ],
    "reporter": [
      "lcov",
      "text",
      "text-summary"
    ],
    "extension": [
      ".jsx"
    ],
    "cache": true,
    "temp-directory": "./coverage/.nyc_output"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/iotexproject/iotex-explorer.git"
  },
  "keywords": [],
  "author": "field_author",
  "license": "UNLICENSED",
  "bugs": {
    "url": "https://github.com/iotexproject/iotex-explorer/issues"
  },
  "homepage": "https://github.com/iotexproject/iotex-explorer#readme",
  "dependencies": {
    "assert": "^1.4.1",
    "axios": "^0.18.0",
    "babel-plugin-inferno": "^3.2.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-flow-strip-types": "^6.18.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-register": "^6.24.1",
    "barrister": "^0.1.8",
    "bech32": "^1.1.3",
    "bulma-timeline": "^3.0.1",
    "chartist": "^0.11.0",
    "config": "^1.26.1",
    "copy-to-clipboard": "^3.0.8",
    "d3": "^5.9.1",
    "deep-extend": "^0.5.1",
    "dotenv": "^6.2.0",
    "dotty": "0.0.2",
    "ethereumjs-abi": "^0.6.6",
    "extend": "^3.0.0",
    "form-serialize": "^0.7.2",
    "fromnow": "^3.0.0",
    "global": "^4.3.1",
    "google-protobuf": "^3.7.0",
    "grpc": "^1.19.0",
    "grpc-tools": "^1.7.1",
    "hex2ascii": "0.0.3",
    "hex2dec": "^1.1.2",
    "history": "^4.6.3",
    "inferno": "^3.10.1",
    "inferno-chartist": "git+https://github.com/jason-james/inferno-chartist.git",
    "inferno-component": "^3.9.0",
    "inferno-create-element": "^7.1.10",
    "inferno-helmet": "^4.0.2",
    "inferno-outside-click-handler": "^0.1.1",
    "inferno-redux": "^3.9.0",
    "inferno-router": "^3.10.1",
    "inferno-server": "^3.9.0",
    "inferno-shared": "^7.1.10",
    "inferno-side-effect": "1.1.0",
    "iotex-client-js": "^0.1.8",
    "is-browser": "^2.0.1",
    "js-sha3": "^0.8.0",
    "js-yaml": "^3.12.2",
    "jump.js": "^1.0.1",
    "key-mirror-nested": "^1.2.4",
    "koa": "^2.7.0",
    "koa-bodyparser": "^4.2.1",
    "koa-csrf": "^3.0.7",
    "koa-helmet": "^4.1.0",
    "koa-i18n": "^2.1.0",
    "koa-locale": "^1.3.0",
    "koa-router": "^7.2.1",
    "koa-send": "^4.1.0",
    "koa-session": "^5.10.1",
    "load-script": "^1.0.0",
    "methods": "^1.1.2",
    "mysql": "^2.10.2",
    "nkn-client": "^0.4.3",
    "path": "^0.12.7",
    "process": "^0.11.9",
    "redux": "^3.5.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "request": "^2.87.0",
    "request-promise-native": "^1.0.7",
    "rewire": "^4.0.1",
    "safe-json-globals": "^3.0.0",
    "shader": "^1.0.0",
    "sprintf": "^0.1.5",
    "styletron-client": "^3.0.4",
    "styletron-inferno": "^3.0.4",
    "styletron-server": "^3.0.4",
    "twilio": "^3.29.1",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "unfetch": "^3.1.0",
    "url-join": "^2.0.2",
    "uuid": "^3.3.2",
    "webpack-manifest-plugin": "^2.0.3",
    "winston": "^2.4.2",
    "xhr": "^2.5.0"
  },
  "devDependencies": {
    "ava": "^0.24.0",
    "babel-cli": "^6.24.1",
    "babel-eslint": "^8.1.2",
    "babel-loader": "^7.1.2",
    "build-changelog": "^2.1.2",
    "del": "^3.0.0",
    "eslint": "^4.4.0",
    "eslint-plugin-flowtype": "^2.49.3",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-inferno": "^7.0.1",
    "flow-bin": "^0.62.0",
    "flow-typed": "^2.0.0",
    "fs": "0.0.1-security",
    "glob": "^7.1.2",
    "gulp": "^3.9.1",
    "gulp-livereload": "^3.8.1",
    "gulp-nodemon": "^2.4.2",
    "gulp-sass": "^3.1.0",
    "gulp-util": "^3.0.8",
    "inferno-test-utils": "^3.10.1",
    "jsdom": "11.5.1",
    "jsdom-global": "3.0.2",
    "nyc": "^11.9.0",
    "webpack": "^4.29.6",
    "webpack-bundle-analyzer": "^3.1.0"
  },
  "engines": {
    "node": "v10.14.2",
    "npm": "6.4.1"
  },
  "private": true,
  "heroku-run-build-script": true
}

Here is the babelrc file of the app it is not working with:

  "presets": [
    "es2017",
    "es2015"
  ],
  "plugins": [
    [
      "inferno",
      {
        "imports": true,
        "pragma": ""
      }
    ],
    "transform-flow-strip-types",
    "transform-object-rest-spread",
    "transform-class-properties"
  ]
}```

Here is the error message:

(function (exports, require, module, __filename, __dirname) { import { Component } from 'inferno';
                                                                                                            ^

SyntaxError: Unexpected token {
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Object.require.extensions.(anonymous function) [as .js] (/home/jason/iotxplorer/iotex-explorer/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)

and a little further down...

ERROR in ./node_modules/inferno-chartist/index.js 65:6
Module parse failed: Unexpected token (65:6)
You may need an appropriate loader to handle this file type.
|       );
|     return (
>       <div
|         className={`ct-chart ${className || ''}`}
|         ref={ref => (this.chart = ref)}
 @ ./src/shared/staking-dashboard/staking-dashboard.js 22:23-50
 @ ./src/shared/staking-dashboard/staking-dashboard-container.js
 @ ./src/shared/view-routes.js
 @ ./src/client/javascripts/main.js

Sorry for the large code blocks, but I hope someone can help. I can't see what the second app is missing for it not to work.

jason-james commented 5 years ago

You need to use babel.config.js instead of .babelrc to compile node_modules

Do you mean the node module itself needs a babel.config.js file or the project that I want to use the module in? If the former, why does it result in an error for the larger project but not the smaller one?

nicolo-ribaudo commented 5 years ago

(I deleted my comment in less then a minute, I was too slow? :stuck_out_tongue:)

I meant that it needs to be in the project, but it only works with Babel 7. I don't know how to configure Babel to transpile node_modules with Babel 6.

jason-james commented 5 years ago

(I deleted my comment in less then a minute, I was too slow? 😛)

I meant that it needs to be in the project, but it only works with Babel 7. I don't know how to configure Babel to transpile node_modules with Babel 6.

Haha, guess you were! Ah ok. When I updated everything to babel 7 I kept getting an error that it was using loader 6.26.3 no matter what I did so I'll go down that rabbit hole another time...

I got rid of the second error by editing my webpack file like so:

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!inferno-chartist)/,
        use: {
          loader: "babel-loader",
          options: JSON.parse(fs.readFileSync("./.babelrc"))
        }
      }
    ]
  }
};

But the first error is still there. Do you know how I can transpile the package BEFORE installing it my project? Maybe that will fix it?