So I have package 1 that I wrote in Typescript that contains mocha tests and I'm pretty sure that it works as it should. I push all the code to the git provider and pull it via npm on package 2. When I start React with Typescript on package 2, I get the following:
I tried adding webpack.config.js, various tsconfig.json configuration changes and multiple npm commands that are connected to cache cleaning and reinstalling but nothing works. This error is just plain weird because, from what I know, there shouldn't be any compilation errors regarding class variables.
FIX
This was a very quick fix. So, in short, if the provider with which you started your Typescript application doesn't provide you with webpack or babel file you will have to transpile any module from node_modules into Javascript that you try to import. In this case I just transpiled package 1 and package 2 worked perfectly.
I have a monorepo which exposes a TypeScript module, which is consumed & used by a React TypeScript project.
When the module inserts arbitrary React elements to the virtual DOM - everything works as expected, including when I try to use React Router (which was initially problematic but I was able to fix that).
However, when I try to use react-intl, via FormattedMessage, I get the error:
Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
Which is especially annoying as I see this printed in the console logs:
The above error occurred in the <Context.Consumer> component:
in FormattedMessage
in h2
in div
in Loading (at App.tsx:11)
in IntlProvider (at App.tsx:8)
in App (at src/index.tsx:9)
in StrictMode (at src/index.tsx:8)
(note the IntlProvider wrapping Loading - which is the element that uses FormattedMessage which can't find IntlProvider).
I imagine this is somehow related to versioning, or having 2 instances of React / React DOM / IntlProvider, but I have no idea to how solve this, and I have spent quite a lot of time trying everything I could think of.
For what it's worth, here's what I use:
TypeScript - for both module and project
Webpack to pack the module, where I declared React, ReactDOM and react-intl as externals and added them as peerDependencies rather than direct dependencies
create-react-app for the project
I was able to create a minimal repro repository, here's how to repro my issue:
<cd somewhere>
git clone https://github.com/chakaz/repro-repo .
cd repro-lib
npm install
npm run build:dev
cd ../project
npm install
npm run start
Anyone has any idea? Tons of thanks in advance!
With your above way in order to make it work, you have to delete node_modules in your repro-lib dir cause it will install dependencies in both dirs.
So in order to resolve problem of monorepo, I'd like to suggest you use yarn's workspace functionality as described carefully here: https://classic.yarnpkg.com/en/docs/workspaces/
To summary, it's a great functionality to help working with multiple workspaces by just only yarn install once.
Here are a few steps to make your repo working:
Put package.json at the root level of the project with following content:
{
"private": true,
"workspaces": ["project", "repro-lib"]
}
Go to project dir and replace following line in package.json:
"pf-common": "file:../repro-lib"
to
"pf-common": "1.0.0"
Finally, just go back to root top level install deps again:
yarn install
That's it! Now you can re-run your application to see how it works.
NOTE: In terms of having interest in monorepo, lerna is also great tool comes to help by providing great CLI.
I'm new to Razzle and I'm trying to learn it. I took a Material-UI dashboard app and am trying to "import" or "convert" it into my blank-ish razzle app.
I copied the contents of the CRA app's ./src into my razzle source at the right spot, referenced the right components, etc.
At first, Razzle didn't like the #import statements in the CRA repo. I fixed that by using npm to install razzle-plugin-scss, which got me past that issue. But now I'm hitting something I don't understand at all (nor even how to go about finding a resolution):
{ Error: Cannot find module 'css-loader/locals'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:649:15)
at Function.resolve (internal/modules/cjs/helpers.js:19:19)
at module.exports (/home/user/my-project/node_modules/razzle-plugin-scss/index.js:106:31)
at runPlugin (/home/user/my-project/node_modules/razzle/config/runPlugin.js:26:10)
at plugins.forEach.plugin (/home/user/my-project/node_modules/razzle/config/createConfig.js:549:16)
at Array.forEach (<anonymous>)
at module.exports (/home/user/my-project/node_modules/razzle/config/createConfig.js:548:13)
at main (/home/user/my-project/node_modules/razzle/scripts/start.js:48:22)
at processTicksAndRejections (internal/process/next_tick.js:81:5) code: 'MODULE_NOT_FOUND' }
I looked in css-loader and found that you (maybe?) need to instruct it to export locals with the exportOnlyLocals: true webpack directive. I'm not sure how to do that in Razzle. I found this page that shows an example of how to configure it through razzle.config.js, but it assumes more knowledge than I have.
How can I configure webpack in Razzle to ... do something? ... to tell the underlying webpack plugin css-loader to load locals?
Any help is much appreciated.
Update
It looks like this is caused by a breaking change in css-loader when it moved to v2.0.0. I still don't know what the solution is, but that's getting me closer.
I ended up reverting to css-loader version 1.0.1 to fix the problem.
I created a standard app with tns create project --ng which ran fine (and adding platform android)
I also wanted to use graphQL so added apollo-client and graphql tag:
npm install apollo-client --save
npm install angular2-apollo --save
npm install graphql-tag --save
So now when I build with tns build android the error I get is...
node_modules/#types/isomorphic-fetch/index.d.ts(7,5): error TS2300:
Duplicate identifier '"audio"'.
which clashes with (from what I can see)
node_modules/tns-core-modules/declarations.d.ts(25,5): error TS2300:
Duplicate identifier '"audio"'.
isomorphic-fetch is added when apollo-client was added. Not too sure about the typings issue but would be good to know how to get around this.
EDIT:
looking at the guide
I have the 2 items set to false in the tsconfig.json which seem to continue despite of the error...
"noEmitHelpers": false,
"noEmitOnError": false
But I would like to know how to fix this properly.
I ran into the same issue but worked around it in a project with the following dependencies:
nativescript#2.5.1
typescript#2.2.1 (bundles isomorphic-fetch typings in dom)
apollo-client#1.0.0-rc.5
This requires changes to tsconfig.json and references.d.ts described in my response to Github nativescript-dev-typescript issue 19.
While this setup works in the browser with Angular CLI and builds for NativeScript using tns android without relaxing "noEmitOnError": true in tsconfig.json, I then had to debug a runtime exception with an apollo-client call to redux which attempts to call node.js code leading to the following error:
ReferenceError: process is not defined
…
/tns_modules/redux/lib/index.js', line: 38, column 4
This was worked-raound by adding global.process = { env: {} }; as the first line in main.ts, as described in NativeScript Github issue 2937, which StackOverflow won't allow me to link to due to my lack of reputation points.
Well I see tns-core-modules/declarations.d.ts is imported with tns-core-modules/tns-core-modules.base.d.ts so actually Nativescript should provide optionally one more definition where they dont include the request definitions in the base file
I am developing an external component (let's say my-component, which I link to the project with npm link (as it is in process and I need the package to reflect changes).
In the my-component folder there are node_modules/react and node_modules/react-dom as they are its dependencies. However they are peerDependences, so I did not suppose to bring them into the project linking this package.
However when using npm link, it link the whole directory, including node_modules. So, when the project builds, it includes packages 2 times: from node_modules/* and from node_modules/my-component/node_modules/*.
This begins to affect when the component is using ReactDOM.findDOMNode, it causes this error:
Warning: React can't find the root component node for data-reactid value `.0.2.0`. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.
Also, it may help to understand what's happening: the problem only appears if there are both node_modules/my-component/node_modules/react and node_modules/my-component/node_modules/react-dom. If there is only one of them, there is no error message.
The usual package installation does not bring such error as there is no node_modules/react-dom there.
How is it supposed to develop an external component and the project at the same time?
The issue is twofold:
You cannot have 2 copies of react loaded.
npm link creates a symlink, however the "require" doesnt respect the
symlink and when it tries to navigate up the directory, it never
finds the react of the parent project.
Solution:
All you have to do is link the react and react-dom in your component to that of parent project's node_modules folder.
Go to your component project and remove the react and react-dom then do
npm link ../myproject/node_modules/react
npm link ../myproject/node_modules/react-dom
Fixed it by adding react-dom as an alias to my webpack config
alias: {
react$: require.resolve(path.join(constants.NODE_MODULES_DIR, 'react')),
'react-dom': require.resolve(path.join(constants.NODE_MODULES_DIR, 'react-dom'))
}
Someone clevererer than I (#mojodna) came up with this solution: remove the duplicate dependencies from the external component, and resolve them with your project's copies of those deps.
Step 1: Remove the dependencies from your external component's node_modules
As #cleong noted, you can't just remove the deps from the external component's node_modules, because your project's build step will fail when it hits the now-missing dependencies in the external component.
Step 2: Add your project's node_modules to NODE_PATH
To fix this, you can append the project's node_modules to the NODE_PATH environment variable when running your build step. Something like e.g. this:
NODE_PATH=$(pwd)/node_modules/ npm start
(where npm start is your script that bundles your external component, via e.g. Browserify, Webpack, etc.)
In fact, you could always append that NODE_PATH addition to your build scripts, and it would work whether or not you've npm linked anything. (Makes me wonder if it shouldn't be default npm behavior...)
Note: I left my existing answer because there's some conversation there, and this is a different (and better) solution.
I believe the answer is to specify react and react-dom as peerDependencies in your external component's package.json. As best as I can follow here and here, npm link should (as of npm#3) no longer install peerDependencies (or `devDependencies either).
Aaaand I just read your post more carefully and realized that you already are specifying them as peerDependencies. Therefore, I think the answer boils down to:
Upgrade to npm#3:
npm install -g npm#3.0-latest
The problem is with npm link. https://github.com/npm/npm/issues/5875
npm doesn't treat the linked directory as a child of the parent project.
Try alternatives to npm link:
1) Use relative path dependencies in package.json
2) Manually include your dependencies in your projects node_modules directory
3) Use url path
Basically anything but npm link
I am using ReactJS.net and setup webpack from the tutorial there and started using react-bootstrap aswell when i started getting this error. I found adding 'react-dom': 'ReactDOM' to the list of externals in webpack.config.js fixed the problem, the list of externals then looked like this:
externals: {
// Use external version of React (from CDN for client-side, or
// bundled with ReactJS.NET for server-side)
react: 'React',
'react-dom': 'ReactDOM'
This seems to be the first stack overflow link on google for this error, so i thought this answer might help someone here.
Adding the following in my webpack.config.js worked for me:
resolve: {
alias: {
react: path.resolve(__dirname, 'node_modules', 'react')
}
}
I also experimented with DedupePlugin (mentioned as a possible remedy here) but I couldn't get it to work.
What's also interesting is that I've encountered different (and perhaps more insidious) manifestations of the same problem when a module is found in multiple places in the dependency graph.
One such case was that my React.PropTypes.instanceOf(SomeType) constraints would emit warnings even though the type I passed in was correct. That was due to the module being present in multiple places in the node_modules directory tree. Due to duck-typing the code would still work, but my console was cluttered with these warnings. Going the resolve.alias way silenced those too.
YMMV
Strongly recommend using https://github.com/mweststrate/relative-deps.
Installs dependencies from a local checkout, and keeps them in sync, without the limitations of link.
This fixes the issue as it installs the local library just as npm install would, satisfying any dependency versions, etc.
If you're using Webpack in the main project, this solution may work. In my case, project-a requires project-b. Both require React and ReactDOM 0.14.x
I have this in project-a/webpack.config.js:
resolve: {
modulesDirectories: ['node_modules'],
fallback: path.join(__dirname, 'node_modules')
},
resolveLoader: {
fallback: path.join(__dirname, 'node_modules')
},
project-b requires React and ReactDOM as peerDependencies in project-b/package.json
project-a requires project-b as a devDependency (should also work required as a dependency) in project-a/package.json
local project-b is linked to project-a like so: cd project-a; npm link ../project-b
Now when I run npm run build within project-b, the changes appear immediately in project-a
I was getting this because I had already included react and react-dom as external scripts in my HTML markup.
The error was caused by adding an import ReactDOM from 'react-dom' to a component module. The error went away once I removed the import, and the module worked fine since the components were already available.