search

JorrinKievit / react-ts-tradingview-widgets

This is a React component library for TradingView Widgets
https://tradingview-widgets.jorrinkievit.xyz/
MIT License
154 stars 48 forks source link

Nextjs build failing on react-ts-tradingview-widgets@1.2.0 #42

Closed mudiagauwojeya closed 11 months ago

mudiagauwojeya commented 11 months ago

Thank you for this package. I have been using it for a client's project since January. However, a few days ago my deployment failed after I switched from yarn to bun as a package manager. At that time, my version of react-ts-tradingview-widgets was upgraded from 1.0.14 to 1.2.0. As a result, I keep the getting this error when I run build locally or on production:

/codebuild/output/src761746544/src/research-buddy-FE/node_modules/react-ts-tradingview-widgets/dist/index.js:1 import React, { createRef, useEffect, memo, useState } from 'react'; ^^^^^^ SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:360:18) at wrapSafe (node:internal/modules/cjs/loader:1094:15) at Module._compile (node:internal/modules/cjs/loader:1129:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1219:10) at Module.load (node:internal/modules/cjs/loader:1043:32) at Function.Module._load (node:internal/modules/cjs/loader:878:12) at Module.require (node:internal/modules/cjs/loader:1067:19) at require (node:internal/modules/cjs/helpers:103:18) at Object.7634 (/codebuild/output/src761746544/src/research-buddy-FE/.next/server/pages/market/[coin].js:2970:18) at __webpack_require__ (/codebuild/output/src761746544/src/research-buddy-FE/.next/server/webpack-runtime.js:25:42) 2023-09-18T10:43:19.516Z [WARNING]: 2023-09-18T10:43:19.517Z [WARNING]: > Build error occurred

After rolling back to version 1.0.14, my build was successful.

JorrinKievit commented 11 months ago

Hm that's odd that it works on 1.0.14, because nothing in the build has changed. This package has always just exported as ESM. What NextJS version do you use? Think this is a similar problem -> https://stackoverflow.com/questions/66244968/cannot-use-import-statement-outside-a-module-error-when-importing-react-hook-m

JorrinKievit commented 11 months ago

or this https://github.com/ant-design/pro-components/issues/4852#issuecomment-1364570216

mudiagauwojeya commented 11 months ago

Hm that's odd that it works on 1.0.14, because nothing in the build has changed. This package has always just exported as ESM. What NextJS version do you use? Think this is a similar problem -> https://stackoverflow.com/questions/66244968/cannot-use-import-statement-outside-a-module-error-when-importing-react-hook-m

next: 13.1.6

Perhaps, it is not this package that is the problem but my switching package manager from yarn to bun. After I opened this issue, another package react-mentions also started to break my production build.

mdatsev commented 10 months ago

This fixed it for me:

// next.config.mjs
const nextConfig = {
    transpilePackages: ['react-ts-tradingview-widgets'],
}
export default nextConfig
azwire commented 9 months ago

@mdatsev thanks, it worked

Also thanks @JorrinKievit for creating this repo