-
Notifications
You must be signed in to change notification settings - Fork 892
You May need additional loader to handle the result of these loaders #881
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
./node_modules/@react-leaflet/core/esm/path.js 10:41
| element.instance.setStyle(options); |
In my case, this has removed the issue facebook/create-react-app#9468 (comment) |
If you're using Next.js the only way I've been able to get it to work is by using // next.config.js
const withTM = require("next-transpile-modules")([
"react-leaflet",
"@react-leaflet/core",
]);
module.exports = withTM({
future: {
webpack5: true
}
}); |
You might be able to fix this by using the |
Hello Guys, Getting same error while building my next js project and none of the solution is working for me mentioned here. Please help me or shall we remove this module and use any other since we got a BUG here now. PLEASE HELP!!!!!!! |
@gurpreerrajpal have you tried my recommendation? It worked perfectly fine for me after doing this.
|
@anthify How can i write this ? I have to use withCSS as well. Appriciate your help!
]); module.exports = withTM({ module.exports = withCSS({ |
hello guys?????? anyone able to fix it??? |
any other options to solve this problem? I've tried all the solutions posted here and still same issue |
@chaincodedev this should work with your setup. I presume you're using an older version of next.js as you don't need withCSS anymore, but here is how you'd compose those plugins. const withPlugins = require("next-compose-plugins");
const withCSS = require("..."); // <-- Add in your withCSS package
const withTM = require("next-transpile-modules")([
"react-leaflet",
"@react-leaflet/core",
]);
module.exports = withPlugins([
[
withTM,
{
future: {
webpack5: true,
},
},
],
[
withCSS,
{
cssLoaderOptions: {
url: false,
},
onDemandEntries: {
// period (in ms) where the server will keep pages in the buffer
maxInactiveAge: 1000 * 60 * 60 * 24 * 30, // 1 month
// number of pages that should be kept simultaneously without being disposed
pagesBufferLength: 100,
},
env: dotenv.config().parsed,
},
],
]); |
I'm having the same issue, when using |
Here's my workaround for this one (create-react-app, latest react-leaflet). Hopefully useful for someone stumbling on the issue as well. The browser list changes suggested above did not work for me ( I ended up using the two libraries react-app-rewired and react-app-rewire-babel-loader. Steps necessary:
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
"eject": "react-scripts eject"
}
/* config-overrides.js */
const path = require("path");
const fs = require("fs");
const rewireBabelLoader = require("react-app-rewire-babel-loader");
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = function override(config, env) {
config = rewireBabelLoader.include(
config,
resolveApp("node_modules/@react-leaflet")
);
config = rewireBabelLoader.include(
config,
resolveApp("node_modules/react-leaflet")
);
return config;
}; And then it works. Basically, this includes react-leaflet in babel transpilation, correctly processing the |
This one works great for me. Now I get just warning when running yarn dev |
restricting the react-leaflet to the older versions might help some of you, as it helped me :)
also updating the browsers list to |
Use version 7.2.0. "next-transpile-modules": "^7.2.0", Version 8.0.0 give the next error: (node:16082) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'startsWith' of undefined
at handleExternals (projectPath/node_modules/next/dist/build/webpack-config.js:36:23)
at webpackConfig.externals (projectPath/node_modules/next/dist/build/webpack-config.js:78:149)
at projectPath/node_modules/next-transpile-modules/src/next-transpile-modules.js:238:46
at handleExternals (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61039:17)
at next (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61027:9)
at handleExternals (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61032:7)
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61062:5
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:67817:5
at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:6:1)
at AsyncSeriesWaterfallHook.lazyCompileHook (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)
at NormalModuleFactory.create (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:67798:28)
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:54821:14
at Semaphore.acquire (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:93226:4)
at asyncLib.forEach.err.stack (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:54819:15)
at arrayEach (projectPath/node_modules/next/dist/compiled/neo-async/async.js:1:5951)
at Object.each (projectPath/node_modules/next/dist/compiled/neo-async/async.js:1:9550)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:16082) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)
(node:16082) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:16082) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'startsWith' of undefined
at handleExternals (projectPath/node_modules/next/dist/build/webpack-config.js:36:23)
at webpackConfig.externals (projectPath/node_modules/next/dist/build/webpack-config.js:78:149)
at projectPath/node_modules/next-transpile-modules/src/next-transpile-modules.js:238:46
at handleExternals (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61039:17)
at next (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61027:9)
at handleExternals (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61032:7)
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61062:5
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:67817:5
at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:6:1)
at NormalModuleFactory.create (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:67798:28)
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:54821:14
at Semaphore.acquire (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:93226:4)
at asyncLib.forEach.err.stack (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:54819:15)
at arrayEach (projectPath/node_modules/next/dist/compiled/neo-async/async.js:1:5951)
at Object.each (projectPath/node_modules/next/dist/compiled/neo-async/async.js:1:9550)
at Compilation.addModuleDependencies (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:54797:12)
(node:16082) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 7)
(node:16082) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'startsWith' of undefined
at handleExternals (projectPath/node_modules/next/dist/build/webpack-config.js:36:23)
at webpackConfig.externals (projectPath/node_modules/next/dist/build/webpack-config.js:78:149)
at projectPath/node_modules/next-transpile-modules/src/next-transpile-modules.js:238:46
at handleExternals (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61039:17)
at next (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61027:9)
at handleExternals (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61032:7)
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61062:5
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:67817:5
at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:6:1)
at NormalModuleFactory.create (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:67798:28)
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:54821:14
at Semaphore.acquire (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:93226:4)
at asyncLib.forEach.err.stack (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:54819:15)
at arrayEach (projectPath/node_modules/next/dist/compiled/neo-async/async.js:1:5951)
at Object.each (projectPath/node_modules/next/dist/compiled/neo-async/async.js:1:9550)
at Compilation.addModuleDependencies (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:54797:12)
(node:16082) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 8)
(node:16082) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'startsWith' of undefined
at handleExternals (projectPath/node_modules/next/dist/build/webpack-config.js:36:23)
at webpackConfig.externals (projectPath/node_modules/next/dist/build/webpack-config.js:78:149)
at projectPath/node_modules/next-transpile-modules/src/next-transpile-modules.js:238:46
at handleExternals (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61039:17)
at next (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61027:9)
at handleExternals (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61032:7)
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61062:5
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:67817:5
at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:6:1)
at NormalModuleFactory.create (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:67798:28)
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:54987:18
at Semaphore.acquire (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:93226:4)
at Compilation._addModuleChain (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:54986:18)
at Compilation.addEntry (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:55088:8)
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:59990:19
at new Promise (<anonymous>)
(node:16082) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 9)
(node:16082) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'startsWith' of undefined
at handleExternals (projectPath/node_modules/next/dist/build/webpack-config.js:36:23)
at webpackConfig.externals (projectPath/node_modules/next/dist/build/webpack-config.js:78:149)
at projectPath/node_modules/next-transpile-modules/src/next-transpile-modules.js:238:46
at handleExternals (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61039:17)
at next (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61027:9)
at handleExternals (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61032:7)
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:61062:5
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:67817:5
at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:6:1)
at NormalModuleFactory.create (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:67798:28)
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:54987:18
at Semaphore.acquire (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:93226:4)
at Compilation._addModuleChain (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:54986:18)
at Compilation.addEntry (projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:55088:8)
at projectPath/node_modules/next/dist/compiled/webpack/bundle4.js:59990:19
at new Promise (<anonymous>)
(node:16082) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 10) |
For me, it breaks with storybook
and I'm using |
(Adding this since it was the first Google search results for me and I had to dig around for a couple of hours.) For CRACO using react-leaflet 3.2.0, there's a simple solution that worked for me that uses the @babel/babel-plugin-proposal-nullish-coalescing-operator. Run: And add this to
|
Hey @josegoval I'm using the following package versions:
with Node.js version Hopefully that helps |
@tilnea did you find a solution? I am having the same issue. Breaks on storybook |
@KhadijaMahanga To fix storybook (using create-react-app and react-leaflet 3.2.0), adding @babel/plugin-proposal-nullish-coalescing-operator in dev-dependencies and creating this file works for me: babel.config.js
|
@tilnea for storybook, this is what I added.
|
We were able to get our Storybook to build on Vercel using the following configuration: package.json: "@react-leaflet/core": "1.0.2",
"leaflet": "^1.7.1",
"react-leaflet": "3.1.0",
"storybook": "^6.3.6",
"next": "^11.0.0", .storybook/main.js // other stuff
webpackFinal: async (config, { configType }) => {
// more configuration options
config.module.rules.push({
test: /\.(js|jsx)$/,
loader: require.resolve("babel-loader"),
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
],
plugins: [
"@babel/plugin-proposal-nullish-coalescing-operator",
],
},
});
return config;
},
// other stuff |
Thanks Man! |
This helps me to fix exact same problem facebook/create-react-app#9468 (comment) but after change "Browserlist" do the followings
Now everything should work as expected. If the map is not loaded, don't forget to add the leaflet css and js to your page and set the height for your MapContainer. See the official documentation for more information. |
Duplicate of already closed issue. |
@PaulLeCam why do you not want to transpile the nullish coalescing operator before publishing this package? |
Note the bug & workaround: PaulLeCam/react-leaflet#881 (comment)
Just went down this rabbit hole, and this was the thing that resolved it for me after trying all of the above. Used nvm to go down to node 14 as well. facebook/create-react-app#9468 (comment) |
thank you this solves my problem |
Still have this issue. node v12.22.12, yarn 1.22.4, tried editing package.json browsersList + deleting node_modules/.cache as well as adding "plugin-transform-nullish-coalescing-operator" babel plugin. |
Whoa, you have a very old version of Node. The latest version is v20. Can you update to a recommended version? (Also, I recommend porting your projects to PNPM instead of Yarn. It's way faster and centralizes your dependencies to save a ton of disk space.) |
Bug report
Before opening an issue, make sure to read the contributing guide and understand this is a bug tracker, not a support platform.
Please make sure to check the following boxes before submitting an issue.
Issues opened without using this template will be closed unless they have a good reason not to follow this template.
Expected behavior
Please describe.
Actual behavior
Please describe.
Steps to reproduce
Please provide the simplest example possible to reproduce the issue, based on this CodePen.
The text was updated successfully, but these errors were encountered: