Import Error: Cannot resolve 'file' or 'directory' ./lib/notification

[jefferyvincent]

Hello,

I am seeing an error when I import the ActionSheet module. I am using react-hot with the webpack-dev-server, along with React 0.13.1.

I did the following:

import ActionSheet from 'react-foundation-apps';

And I get ERROR in ./~/react-foundation-apps/index.js Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/notification in ./index.js @ ./~/react-foundation-apps/index.js 7:16-45

This looks like a really cool project, but unfortunately I can't use it. Let me know how I can help. Thanks!

[akiran]

@jefferyvincent I will fix this tomorrow

[jefferyvincent]

Thanks @akiran!

[akiran]

@jefferyvincent, If you are using browserify or webpack you can add 'jsx' to the extension list in configuration. That will fix this problem

I will compile jsx to js file in next minor release so users don't have to worry about this configuration

[jefferyvincent]

@akiran my webpack.config.js file looks like the following:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  devServer: true,
  debug: true,
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './scripts/index'
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: '/scripts/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
    { test: /\.scss$/, loader: "style!css!sass" },
    { test: /\.jsx?$/,
      loaders: ['react-hot', 'babel-loader'],
      exclude: '/node_modules/',
      include: path.join(__dirname, 'scripts')
    }]
  }
};

And it closely matches this one: https://github.com/gaearon/react-hot-boilerplate/blob/master/webpack.config.js

The above issue is resolved. However I am seeing other issues now:

WARNING in ./~/react-foundation-apps/lib/vendor/iconic.min.js
Critical dependencies:
6:382-389 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/react-foundation-apps/lib/vendor/iconic.min.js 6:382-389

ERROR in ./~/react-foundation-apps/lib/accordion/index.jsx
Module parse failed: /Users/jefferyvincent/Desktop/projects/superbook/Bible/node_modules/react-foundation-apps/lib/accordion/index.jsx Line 50: Unexpected token <
You may need an appropriate loader to handle this file type.
|     }.bind(this));
|     return (
|       <div className='accordion'>{children}</div>
|     );
|   }
 @ ./~/react-foundation-apps/index.js 2:13-39

ERROR in ./~/react-foundation-apps/lib/action-sheet/index.jsx
Module parse failed: /Users/jefferyvincent/Desktop/projects/superbook/Bible/node_modules/react-foundation-apps/lib/action-sheet/index.jsx Line 20: Unexpected token <
You may need an appropriate loader to handle this file type.
|     }.bind(this));
|     return (
|       <div className='action-sheet-container'>
|         {children}
|       </div>
 @ ./~/react-foundation-apps/index.js 3:15-44

ERROR in ./~/react-foundation-apps/lib/modal/index.jsx
Module parse failed: /Users/jefferyvincent/Desktop/projects/superbook/Bible/node_modules/react-foundation-apps/lib/modal/index.jsx Line 45: Unexpected token <
You may need an appropriate loader to handle this file type.
|     }
|     return (
|       <Animation active={this.state.open} animationIn="fadeIn" animationOut="fadeOut">
|         <div className={cx(overlayClasses)} style={overlayStyle} onClick={this.hideOverlay} >
|           <Animation active={this.state.open} animationIn="fadeIn" animationOut="fadeOut">
 @ ./~/react-foundation-apps/index.js 6:9-31

ERROR in ./~/react-foundation-apps/lib/offcanvas/index.jsx
Module parse failed: /Users/jefferyvincent/Desktop/projects/superbook/Bible/node_modules/react-foundation-apps/lib/offcanvas/index.jsx Line 40: Unexpected token <
You may need an appropriate loader to handle this file type.
|     }
|     return (
|       <div id={this.props.id} data-closable={true} className={cx(classes)}>
|           {this.props.children}
|       </div>
 @ ./~/react-foundation-apps/index.js 8:13-39

ERROR in ./~/react-foundation-apps/lib/panel/index.jsx
Module parse failed: /Users/jefferyvincent/Desktop/projects/superbook/Bible/node_modules/react-foundation-apps/lib/panel/index.jsx Line 48: Unexpected token <
You may need an appropriate loader to handle this file type.
|     }
|     return (
|       <Animation active={this.state.open} animationIn={animationIn} animationOut={animationOut}>
|         <div data-closable={true} id={this.props.id} className={classes}>
|             {this.props.children}
 @ ./~/react-foundation-apps/index.js 9:9-31

ERROR in ./~/react-foundation-apps/lib/popup/index.jsx
Module parse failed: /Users/jefferyvincent/Desktop/projects/superbook/Bible/node_modules/react-foundation-apps/lib/popup/index.jsx Line 53: Unexpected token <
You may need an appropriate loader to handle this file type.
|     };
|     return (
|       <div id={this.props.id} className={cx(classes)} data-closable='popup'>
|         {this.props.children}
|       </div>
 @ ./~/react-foundation-apps/index.js 10:9-31

ERROR in ./~/react-foundation-apps/lib/tabs/index.jsx
Module parse failed: /Users/jefferyvincent/Desktop/projects/superbook/Bible/node_modules/react-foundation-apps/lib/tabs/index.jsx Line 23: Unexpected token <
You may need an appropriate loader to handle this file type.
|     }.bind(this));
|     return (
|       <div>
|         <div className='tabs'>{children}</div>
|         <div>{this.state.content}</div>
 @ ./~/react-foundation-apps/index.js 11:8-29

ERROR in ./~/react-foundation-apps/lib/trigger/index.jsx
Module parse failed: /Users/jefferyvincent/Desktop/projects/superbook/Bible/node_modules/react-foundation-apps/lib/trigger/index.jsx Line 59: Unexpected token <
You may need an appropriate loader to handle this file type.
|   render: function () {
|     if (this.props.popupToggle) {
|       return <PopupToggle {...this.props} />;
|     } else {
|       var child = React.Children.only(this.props.children);
 @ ./~/react-foundation-apps/index.js 12:11-35

ERROR in ./~/react-foundation-apps/lib/notification/set.jsx
Module parse failed: /Users/jefferyvincent/Desktop/projects/superbook/Bible/node_modules/react-foundation-apps/lib/notification/set.jsx Line 46: Unexpected token <
You may need an appropriate loader to handle this file type.
|     var notifications = this.state.notifications.map(function (notification) {
|       return (
|         <Notification key={notification.id} {...notification} closeHandler={this.removeNotifcation(notification.id)} className='is-active'>
|           {notification.content}
|         </Notification>
 @ ./~/react-foundation-apps/lib/notification/index.jsx 2:7-23

ERROR in ./~/react-foundation-apps/lib/notification/static.jsx
Module parse failed: /Users/jefferyvincent/Desktop/projects/superbook/Bible/node_modules/react-foundation-apps/lib/notification/static.jsx Line 30: Unexpected token <
You may need an appropriate loader to handle this file type.
|   render: function () {
|     return (
|       <Animation active={this.state.open} animationIn="fadeIn" animationOut="fadeOut">
|         <Notification {...this.props} closeHandler={this.closeHandler} >
|           {this.props.children}
 @ ./~/react-foundation-apps/lib/notification/index.jsx 3:10-29

Is there a loader I am missing?

[akiran]

This config works https://github.com/akiran/react-foundation-apps/blob/master/webpack.config.js

[senagl13]

Do you have a solution for babel-loader? Error: Line 50: Unexpected token < You may need an appropriate loader to handle this file type. | }.bind(this)); | return ( | <div className='accordion'>{children}</div> | ); | } @ ./client/components/Home.jsx 43:17-63

Webpack Config module settings:

[varghesethomase]

+1