Babel not found

[tomitrescak]

Hi

I'm trying to use babel but even if I install it into my directory I keep receiveing:

Babel compiler cannot be found, please add it to your package.json file:
    npm install --save-dev babel

It definietlly exists in my package.json and is correctly installed.

[s-panferov]

Hello, could you please provide your webpack.config.js and package.json? Also please describe your environment and OS.

[s-panferov]

@tomitrescak this code is responsible for lookup. https://github.com/s-panferov/awesome-typescript-loader/blob/master/src/index.ts#L272-L279

Maybe the problem is that you're running webpack not from the directory where node_modules folder is located? If so, please describe your setup and I'll try to make it work.

[tomitrescak]

Hello. Thanks for all your valuable help!!

I'm trying to do this all in order to get the hot reload back. When I compile TS in Atom to the dist directory, all works jolly good, but loader refuses to support the hot-code-reload.

The setup is from this repository: https://github.com/jedwards1211/meteor-webpack-react/tree/typescript

My os is OSX 10.x

here are the configs

var path = require('path');
var webpack = require('webpack');
var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;

module.exports = {
  devtool: 'source-map',
  entry: [
    '../lib/core-js-no-number',
    'regenerator/runtime',
    '../app/main_client',
  ],
  output: {
    path: path.join(__dirname, 'assets'),
    filename: 'client.bundle.js',
    publicPath: '/assets/',
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.ts', '.tsx'],
    alias: {
      app: path.join(__dirname, '../app'),
    },
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel?stage=0',
        exclude: /node_modules|lib/,
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.tsx?$/,
        loader: 'babel?loose=all!awesome-typescript-loader'
      }
    ],
  },
  plugins: [
    new ForkCheckerPlugin(),
    new webpack.PrefetchPlugin("react"),
    new webpack.PrefetchPlugin("react/lib/ReactComponentBrowserEnvironment")
  ]
};

package.json

{
  "name": "meteor-webpack-react",
  "version": "0.0.1",
  "description": "A port of simple-todos to Webpack/React on the frontend",
  "repository": "https://www.github.com/jedwards1211/meteor-webpack-react",
  "devDependencies": {
    "awesome-typescript-loader": "^0.14.0-rc.0",
    "babel": "^5.8.23",
    "babel-eslint": "^4.0.5",
    "babel-loader": "^5.1.2",
    "css-loader": "^0.15.3",
    "eslint-config-airbnb": "0.0.7",
    "eslint-plugin-react": "^3.2.2",
    "grunt": "^0.4.5",
    "grunt-cli": "^0.1.13",
    "node-libs-browser": "^0.5.2",
    "react-hot-loader": "^1.2.7",
    "style-loader": "^0.12.3",
    "typescript": "^1.6.0-beta",
    "webpack": "^1.10.1",
    "webpack-dev-server": "^1.10.1"
  },
  "dependencies": {
    "awesome-typescript-loader": "^0.14.0-rc.0",
    "babel": "^5.8.21",
    "babel-core": "^5.8.22",
    "classnames": "^2.1.3",
    "lodash": "^3.10.0",
    "react": "^0.13.3",
    "regenerator": "^0.8.36",
    "ts-loader": "^0.5.5"
  },
  "scripts": {
    "dev": "webpack/scripts/dev.sh",
    "dev-debug": "webpack/scripts/dev-debug.sh",
    "prod": "webpack/scripts/prod.sh",
    "build": "webpack/scripts/build.sh",
    "test-built": "webpack/scripts/test-built.sh",
    "lint": "eslint app",
    "build-core-js": "grunt --gruntfile node_modules/babel-core/node_modules/core-js/Gruntfile.js build:es5,es6,es7,js,web --blacklist=es6.number.constructor --path=core-js-no-number"
  },
  "author": "",
  "license": "MIT"
}

and tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "declaration": false,
        "noImplicitAny": true,
        "removeComments": false,
        "noLib": false,
        "preserveConstEnums": true,
        "suppressImplicitAnyIndexErrors": true,
        "watch": true,
        "outDir": "dist",
        "jsx": "preserve"
    },
    "awesomeTypescriptLoaderOptions": {
        "library": "es6",
        "forkChecker": true,
        "babel": true
    },
    "filesGlob": [
        "**/*.ts",
        "**/*.tsx",
        "*.ts",
        "*.tsx",
        "!**/meteor_core/**/*.*",
        "!**/node_modules/**/*.ts"
    ],
    "files": [
        "app/collections/index.ts",
        "app/components/app_publications.ts",
        ...
        "app/components/app.tsx",
        "app/components/blaze_template.tsx",
        "node_modules/awesome-typescript-loader/examples/tsx/index.tsx"
    ]
}

[tomitrescak]

Ignore my previous post. I am not receiving the error anymore but i still cant get the hot code reload to work :/

would you mind if you have any time at all to look at setup here https://github.com/jedwards1211/meteor-webpack-react/tree/typescript thanks a ziillion!

[s-panferov]

@tomitrescak I'll have a look tomorrow morning (GMT+3)

[tomitrescak]

Hi, I still was not able to solve this. Would tyou mind checking following config if you see anything dodgy?

var webpack = require('webpack');
//var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;

//console.log("s: " + ForkCheckerPlugin);

var babelSettings = { stage: 0 };

if (process.env.NODE_ENV !== 'production') {
  babelSettings.plugins = ['react-transform'];
  babelSettings.extra = {
    'react-transform': {
      transforms: [{
        transform: 'react-transform-hmr',
        imports: ['react'],
        locals: ['module']
      }, {
        transform: 'react-transform-catch-errors',
        imports: ['react', 'redbox-react']
      }]
      // redbox-react is breaking the line numbers :-(
      // you might want to disable it
    }
  };
}

module.exports = {
  entry: './entry',
  externals: {
    // Add global variables you would like to import
    'react': 'React',
    'react-router': 'ReactRouter',
    'react-router-ssr': 'ReactRouterSSR',
    'react-meteor-data': 'ReactMeteorData',
    'blaze-to-react': 'BlazeToReact'
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.ts', '.tsx', '.json', '.css', '.scss']
  },
  module: {
    loaders: [
      { test: /\.tsx?$/, loaders: ['babel', 'awesome-typescript'], exclude: /node_modules|lib/ },
      { test: /\.jsx?$/, loader: 'babel', query: babelSettings, exclude: /node_modules/ },
      { test: /\.css$/, loader: 'style!css' },
      { test: /\.scss$/, loader: 'style!css!sass' },
      { test: /\.(png|jpe?g)(\?.*)?$/, loader: 'url?limit=8182' },
      { test: /\.(svg|ttf|woff|eot)(\?.*)?$/, loader: 'file' }
    ]
  }
};

// if (process.env.NODE_ENV !== 'production') {
//
//   module.exports.plugins = [new ForkCheckerPlugin()]
// }

[s-panferov]

Should be fixed in newer versions.

[frederickfogerty]

Hey @s-panferov, sorry to bother you, but I am receiving this error as well. I am not running webpack in the same directory as my node_modules as I am programatically iterating through different directories to generate a file for each directory. I was wondering what you did to fix this and if I'm missing anything. Thanks!

- src
  - dirA
  - dirB
- webpack.config.js
- node_modules

i.e. I run webpack --config ../../webpack.config.js in each of the dirs in src/

[frederickfogerty]

So I found the option awesomeTypescriptLoaderOptions.babelCore (found in the source) which I was able to use to fix the issue.

[frederickfogerty]

@s-panferov I've added some info to the docs about the option. I think this can be closed, unless you want to automatically traverse the tree to find node_modules

[s-panferov]

@frederickfogerty thanks!

[guncha]

Just ran into the same issue. The project has a top level node_modules directory and several sub-project directories with separate tsconfig.json files and webpack.config.js files. The babelCore option works around the issue, but why not have ATL use require.resolve ?

[saeedtabrizi]

same issue on b19

[s-panferov]

I really can't use require.resolve here, because it works in the context of the loader, and this can lead to weird unexpected results sometimes. I'll see, maybe I can use enhanced-resolve for this, as we already have it in deps.

[SweVictor]

After a while I realized I had to write an absolut path in babelCore to be able to use it. After looking at the source I realized I could also write ..\\..\\babel-core to resolve babel-core residing in the same node_modules directory as awesome-typescript-loader. Maybe the readme could be updated if enhanced resolving is not implemented?

[CapnMarius]

npm install @babel/core for Babel 7+