current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I am working on a proof-of-concept sample React framework/library that could be used in React applications, as well as an AngularJS framework wrapper around it so that it can be used as an AngularJS framework/library as well.

There are 2 projects:

sample-react-framework

sample-react-framework-wrapper (the AngularJS project)

Right now I have an npm link to the sample-react-framework project from the sample-react-framework-wrapper project.

sample-react-framework has 3 components - a navigation bar, banner, and side menu. These components are .jsx files.

sample-react-framework-wrapper has 3 components as well - the same 3 - which are just .ts wrappers that render the React elements.

I'm trying to import my React JSX modules into the TypeScript modules, and it appears to be working but is then throwing an error at the end anyway:

webpack result is served from http://localhost:8090/assets
content is served from C:\workspaces\UI\sample-react-framework-wrapper
10% 0/1 build modulests-loader: Using [email protected]
Hash: c4f0160d96f95001f727
Version: webpack 1.12.2
Time: 3233ms
              Asset     Size  Chunks             Chunk Names
sample.framework.js  42.5 kB       0  [emitted]  main
chunk    {0} sample.framework.js (main) 39.6 kB [rendered]
    [0] ./src/components/index.ts 112 bytes {0} [built]
    [1] ./src/components/banner/banner.ts 2.44 kB {0} [built] [1 error]
    [3] ../sample-react-framework/src/index.js 862 bytes {0} [built]
    [4] ../sample-react-framework/src/components/banner/banner.jsx 8.64 kB {0} [built]
    [5] ../sample-react-framework/~/classnames/index.js 1.12 kB {0} [built]
    [6] ../sample-react-framework/src/components/side-menu/side-menu.jsx 11.7 kB {0} [built]
    [7] ../sample-react-framework/src/components/navigation/navigation.jsx 9.81 kB {0} [built]
    [8] ./src/components/navigation/navigation.ts 2.37 kB {0} [built] [1 error]
   [10] ./src/components/side-menu/side-menu.ts 2.44 kB {0} [built] [1 error]
     + 2 hidden modules

ERROR in ./src/components/side-menu/side-menu.ts
(7,26): error TS2307: Cannot find module 'sample-react-framework'.

ERROR in ./src/components/navigation/navigation.ts
(7,28): error TS2307: Cannot find module 'sample-react-framework'.

ERROR in ./src/components/banner/banner.ts
(6,24): error TS2307: Cannot find module 'sample-react-framework'.

If you look above you can see it was able to get into and build the JSX files fine - but still throws errors that it can't find my framework in the end.

I've tried different things from Googling around, such as setting a resolve.fallback to be my path.join(__dirname, 'node_modules') - but that also failed (tried things from this issue: https://github.com/webpack/webpack/issues/784)

Unfortunately I'm really not sure what else to try at this point :(

Here's an example of how I am defining the JSX classes:

import React from 'react';
import classNames from 'classnames';

import SideMenu from '../side-menu/side-menu';

class Banner extends React.Component {

}

module.exports = Banner;

And the TS module:

/// <reference path="../../../typings/angularjs/angular.d.ts" />
/// <reference path="../../../typings/react/react.d.ts" />

import * as React from 'react';

import { Banner } from 'sample-react-framework';

angular
    .module('sampleFramework.banner', [])
    .directive('bannerComponent', bannerComponent);

function bannerComponent() {
    return {
        restrict: 'E',
        scope: {
            banner: '=',
            links: '='
        },
        replace: true,
        ...
    }
}

Does anyone have any idea what could be causing this?

share|improve this question
up vote 0 down vote

I've had the same problem. And I've located the problem in both ts-loader and typescript-loader (not in webpack itself) - as both were unable to resolve npm linked modules.

Also I was able to compile same code base with raw TypeScript compiler - which I am using as solution (also because other reasons).

But I think pointing resolve.falback to original/linked source did help.

share|improve this answer
    
My problem actually didn't end up being an issue with resolving the module but instead that I didn't have a typings file defined! I probably should have realized I needed that sooner! See my answer for more details. – Dan Wnuk Oct 2 '15 at 13:41
up vote 0 down vote accepted

I also posted an issue looking for help on the ts-loader project's GitHub issues: https://github.com/TypeStrong/ts-loader/issues/72

jbrantly got back to me quickly and informed me that the issue was I needed to define a typings file for my react framework in order for TypeScript to understand it - oops!

From your SO question:

import { Banner } from 'sample-react-framework';

The error here is that TypeScript is saying it doesn't understand sample-react-framework. TypeScript doesn't understand plain JS modules. It only understands TS modules or declaration files that describe the API of the JS module. Assuming you want to keep sample-react-framework as pure JS and not TypeScript, you'll need to create a definition file for it. For example...

// index.d.ts
import React from 'react';
export class Banner extends React.Component { }

Then in the package.json of sample-react-framework you could put:

"typings": "index.d.ts"

TypeScript should then be able to resolve the definition file and understand what you mean when you say import { Banner } from 'sample-react-framework';.

I've tested it out and defined the following index.d.ts in sample-react-framework:

import * as React from 'react';

interface Props { }
interface State { }

export class Banner extends React.Component<Props, State> { }
export class SideMenu extends React.Component<Props, State> { }
export class Navigation extends React.Component<Props, State> { }

The TS compiler was complaining about React.Component not matching the definition (and the React import not being '* as React') - but other than those minor tweaks his solution was exactly what I needed to fix my problem.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.