I have created a local node module and I have configured the webpack to consider this module (module is in src/component):
modules: ['node_modules', 'src/components'].concat(
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
)
While starting the project, babel does not transpile my react stateless function and I get an unexpeted token error in my jsx syntax.
When I don't use a node module and I remove the local package.json file, everything works fine.
How can I solve this problem?
See Babel's documentation for monorepo structures (repos with multiple packages).
The short answer is, convert your .babelrc to a babel.config.js file and put that in your project root. .babelrc files are scoped to a specific package, so there is no way to use a .babelrc to configure your src/components/foo package.
Related
Importing local package dependencies throws
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /< path to root >/common/< path to js file >: Support for the experimental syntax 'jsx' isn't currently enabled (3:5):
but with any common js files that have jsx, I get the following message:
Repo structure:
root
common
svgs
package.json
*.js
scss
package.json
*.scss
site_0
package.json
src
index.js
site_1
package.json
src
index.js
site_* package.json dependency statements:
dependencies: {
"common-svgs": "file:../common/svgs"
}
site_* index.js import statement of common-* package
import "common-svgs/alert.js"
Importing common files like the above work for my common .scss files, but with any common js files that have jsx, I get the following message:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /< path to root >/common/svgs/alert.js: Support for the experimental syntax 'jsx' isn't currently enabled (3:5):
This link talks about editing webpack configuration, but I am using the default react-scripts webpack dev server.
In site_*/node_modules/react-scripts/config/webpack.config.js, the loader that processes javascript outside of the app scope does not ( compile ? ) jsx unlike the loader that process application javascript.
Question:
How do I process ( compile ? ) jsx files outside of the application scope that are local dependency imports without changing the webpack.config.js file in react-scripts ???
Possible ways to do it:
Is there a way to have a hook run before react-scripts start?
Is there a way to run a post npm install hook and alter react-scripts webpack.config.js?
Would it be better to build my common packages?
If yes, wouldn't I have to rebuild the common packages for changes?
I added
[
require.resolve('babel-preset-react-app'),
{
runtime: hasJsxRuntime ? 'automatic' : 'classic',
}
],
to the presets of the loader that processes javascript outside of the app scope... It works, but someone else who clones my app would not be able to render the project with the dev server right out of the box... also, there might be another reason why what i have done is wrong...
I've been trying out different project configurations, and I want to move all babel configuration to webpack config file. Here, I bundled up the demo, but sadly I could not make it run there, but it will work if you deploy it locally (I hope I didn't miss anything). As you can see, the webpack rule for babel from demo.config.js is the same as the contents of babel.config.js file, but when I remove babel file and try to run it, it prompts the following error:
import webpack from 'webpack';
^^^^^^
SyntaxError: Cannot use import statement outside a module
I've seen many different configurations to make it work without babel config file, using ts-loader for example:
What is causing my tsx to render properly without babel in react app?
Demo for React Reload Replacement Plugin
Webpack base configuration for Trezor Suite build package
What am I missing here?
And one more question, is there a way to use TypeScript extension for webpack configuration file demo.config.js?
I have project and it is using storybook. It's been upgraded to version 5 of storybook and the project has a .babelrc file in its root.
When running storybook, it will run, but when you use Actions it throws errors - such as unexpected token.
I discovered that if the project .babelrc file is removed then storybook loads its default config, this then allows storybook to work as expected.
Storybook can use a .babelrc file from within the storybook folder so that it ignores the root project .babelrc file but what should go into that file so that it either loads the storybook default config or replicates the storybook default config?
Partial solution:
This doesn't make storybook load the default .babelrc file/config or copy whatever that may be, but I found that it was the react-hot-loader/babel plugin that was causing the issue.
So I removed that entry from my .babelrc file and storybook with Actions works fine now.
I am fiddling around with the following local drf-react setup. I'm really new to react and javascript overall and got absolutely no idea why I cannot import axios or any other node module for that matter in my react components, except for the modules that already shipped with the cookiecutter project itself. Is this related to the react-dev-utils..? I would like to use webpack, but I fail to set it up properly. My frontend docker container won't compose, telling me to install webpack-cli. Help is much appreciated.
https://github.com/moritz91/drf-react-app
You should run the command npm install inside your frontend folder:
Open the terminal
Find the frontend folder
Inside of it run the command npm install
This command will install the dependencies related to your package.json file, which is inside the frontend folder.
Inside your React files you will put the whole path to the node_modules folder.
The idea of using node_modules is to make it easier to control your dependencies in your project. You should consider again using webpack to handle these files from node_modules.
Wepack has a module called resolve which you have to fill with a list of directories and inside React components you don't need to use the whole path anymore, because Webpack will understand where to look:
// ALIAS
resolve: {
extensions: ['.js', '.jsx', '.scss'],
modules: [
'YOUR SOURCE FOLDER',
'YOUR NODE MODULES FOLDER',
'ANY OTHER FOLDER'
]
}
From the docs:
Tell webpack what directories should be searched when resolving modules.
The documentation: https://webpack.js.org/configuration/resolve/
Also, I have an example using Webpack + Bootstrap 4.
You can use to build your own Webpack config for React and Redux.
https://github.com/italoborges/webpack-bootstrap4-es6
All:
When I followed the tutorial of Facebook React, it only talked about how to transpile with Babel, but no content with browserify, I wonder if I use gulp, how to build the work flow with babel and browserify.
For example:
Transpile all *.js files in /js folder, and copy them to /build/js
When 1 is ready, broserify all /build/js/*.js into bundle.js and copy to /dist/js
Copy *.html to /dist/
That is it! Thanks
You could do that, or compile and browserify in the same step with the babelify transform for browserify.
Here is a basic example of how to compile and bundle modules in one step using babelify, and assuming an entry file that has a dependency graph that includes all of the modules you want to bundle.
browserify('./js/entry')
.transform(babelify)
.bundle()
.pipe(fs.createWriteStream('./dist/bundle.js'));