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.
Related
I've a react app created using create-react-app. I recently saw some article saying to add few loaders to webpack config file. But I've no idea where to find the webpack.config.js file inside a react project.
Really appreciate any ideas or suggestions.
Webpack config is not available in CRA. If you want to get one, you have to do an eject (https://create-react-app.dev/docs/available-scripts/), but if you don't need to make eject, or you don't wanna do this, you can use the library which is the wrapper of CRA, for example: CRACO or rewrite
Hi Guys I'm trying to export a component with bit.dev but after several attempts I always get this error on the preview of the component and importing the component I always get error.
Module not found: Can't resolve 'react/jsx-runtime' in '/capsule/node_modules/#bit/giovannigiampaolo.testCollection.button/dist'
Can someone help me?
If this issue is in the typescript project then, we need to add tsconfig.json to the project.
Since we cannot follow the default folder structure of NodeJS, we shall need to create an environment for the workspace.
Reference Link: Bit Envs Overview
We can try to implement the way documented above.
Using this I got configurations of typescript, webpack, and jest.
The typescript folder contained the tsconfig.json file and we can edit it to our requirements.
Updating your React to the latest version will solve the issue; did it for me. Just do:
yarn add react#latest
and you're good.
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 trying to build the NextJS App using mapbox.gl and deck.gl, it runs fine on my local server, however when I try to publish the application a webpack error occurs:
Failed to compile.
./node_modules/#luma.gl/webgl/dist/es5/webgl-utils/webgl-types.js
Module not found: Can't resolve 'gl' in '/Users/kingusha/Desktop/HTMLCSSJS/ReactApps/something/node_modules/#luma.gl/webgl/dist/es5/webgl-utils'
I've tried installing the gl module using npm and researching the matter but didn't find any solutions. Does anyone have any idea how to fix this?
There are two potential issues that come to mind that could be causing this issue:
mapbox-gl wasn't properly installed and needs to be reinstalled:
npm i -S mapbox-gl
Note: I don't think this is your issue since you can run it locally, but for completeness I will show this step.
webpack is unable to properly resolve the mapbox-gl dependency from its default resolution settings. Therefore, the resolution path for mapbox-gl needs to be set up manually.
Perhaps you could try manually specifying the mapbox-gl resolution path and seeing if this helps resolve your issue, something along the lines of:
webpack.config.js
module.exports = {
//...
resolve: {
"modules": ['node_modules', 'js'],
"alias": {
'mapbox-gl': path.resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
}
}
};
This will allow webpack to properly add the mapbox-gl dependency to the JavaScript bundle created during webpack builds. For more information about webpack resolve take a look at the official documentation.
Hopefully that helps!
I am using the jsx-control-statements node module for React with webpack.
Normally this works great, but when I copied my project to another folder and ran npm install using the same package.json as before, jsx-control-statements doesnt seem to be getting recognized by webpack.
jsx-control-statements is meant to desugar the tags in the render() and turn it into code react recognizes. Its not doing that in this case.
I see the final code running in the inspector that 'Choose' was never transpiled into valid code.
_react2.default.createElement(Choose, null,
The error I am getting is:
Uncaught ReferenceError: Choose is not defined
webpack.config.js and package.json and my source code for the app are unchanged. from a working app and this new one in another folder.
I have tried:
installing jsx-control-statements manually locally and globally.
copying and pasting the entire node_modules folder from the good project into this new project.
Run eslint with eslint-jsx-control-statements plugin, no errors
Still the problem persists. I believe their is a problem in the building of project, but I am out of ideas what to try next.
The issue was simple as I felt it would be. I was missing a tiny .babelrc file which included a plugin reference to jsx-control-statements
{
// my babel config here
"plugins": ["jsx-control-statements"]
}
Just need to put this file at my root next to webapck.config.js