search

myliang / x-spreadsheet

The project has been migrated to @wolf-table/table https://github.com/wolf-table/table
https://myliang.github.io/x-spreadsheet
MIT License
14.16k stars 1.7k forks source link

less file error #546

Open kaimiyang opened 2 years ago

kaimiyang commented 2 years ago 
error - ./node_modules/x-data-spreadsheet/src/index.less
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @css-prefix: x-spreadsheet;
| // color
| @red-color: #DB2828;

when import Spreadsheet from 'x-data-spreadsheet',error display

fananchong commented 2 years ago

安装：

npm install style-loader --save-dev
npm install css-loader --save-dev
npm install less-loader --save-dev

wekpack.config.js 里添加：

module: {
        rules: [
            {
                test: /\.(sass|less|css)$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
NatyAlex17 commented 1 year ago

Having the same issue as well am using next js v13.4.7 and i implemented your suggestion but ended up with this problem

import { h } from './component/element'; ^^^^^^

SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:360:18) at wrapSafe (node:internal/modules/cjs/loader:1088:15) at Module._compile (node:internal/modules/cjs/loader:1123:27) at Module._extensions..js (node:internal/modules/cjs/loader:1213:10) at Module.load (node:internal/modules/cjs/loader:1037:32) at Module._load (node:internal/modules/cjs/loader:878:12) at Module.require (node:internal/modules/cjs/loader:1061:19) at require (node:internal/modules/cjs/helpers:103:18) at x-data-spreadsheet (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend.next\server\pages\excel_view.js:494:18) at webpack_require__ (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend.next\server\webpack-runtime.js:33:42) at eval (webpack-internal:///./src/pages/excel_view.js:27:77) at webpack_require.a (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend.next\server\webpack-runtime.js:97:13) at eval (webpack-internal:///./src/pages/excel_view.js:1:21) at ./src/pages/excel_view.js (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend.next\server\pages\excel_view.js:231:1) at __webpack_require (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend.next\server\webpack-runtime.js:33:42) at eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?page=%2Fexcel_view&absolutePagePath=.%2Fsrc%5Cpages%5Cexcel_view.js&preferredRegion=&middlewareConfig=e30%3D!:20:82)
at webpack_require__.a (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend.next\server\webpack-runtime.js:97:13) at eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?page=%2Fexcel_view&absolutePagePath=.%2Fsrc%5Cpages%5Cexcel_view.js&preferredRegion=&middlewareConfig=e30%3D!:1:21) at ./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?page=%2Fexcel_view&absolutePagePath=.%2Fsrc%5Cpages%5Cexcel_view.js&preferredRegion=&middlewareConfig=e30%3D! (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend.next\server\pages\excel_view.js:33:1) at webpack_require (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend.next\server\webpack-runtime.js:33:42) at webpack_exec__ (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend.next\server\pages\excel_view.js:537:39) at C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend.next\server\pages\excel_view.js:538:28 at Object. (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend.next\server\pages\excel_view.js:541:3) at Module._compile (node:internal/modules/cjs/loader:1159:14) at Module._extensions..js (node:internal/modules/cjs/loader:1213:10) at Module.load (node:internal/modules/cjs/loader:1037:32) at Module._load (node:internal/modules/cjs/loader:878:12) at Module.require (node:internal/modules/cjs/loader:1061:19) at require (node:internal/modules/cjs/helpers:103:18) at requirePage (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend\node_modules\next\dist\server\require.js:156:12) at C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend\node_modules\next\dist\server\load-components.js:68:84 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async loadComponentsImpl (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend\node_modules\next\dist\server\load-components.js:68:26) at async DevServer.findPageComponentsImpl (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend\node_modules\next\dist\server\next-server.js:772:36) at async DevServer.findPageComponents (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend\node_modules\next\dist\server\dev\next-dev-server.js:1266:20) at async DevServer.renderPageComponent (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend\node_modules\next\dist\server\base-server.js:1321:24) at async DevServer.renderToResponseImpl (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend\node_modules\next\dist\server\base-server.js:1365:32) at async DevServer.pipeImpl (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend\node_modules\next\dist\server\base-server.js:641:25) at async Object.fn (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend\node_modules\next\dist\server\next-server.js:1156:21) at async Router.execute (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend\node_modules\next\dist\server\router.js:315:32) at async DevServer.runImpl (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend\node_modules\next\dist\server\base-server.js:615:29) at async DevServer.run (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend\node_modules\next\dist\server\dev\next-dev-server.js:897:20) at async DevServer.handleRequestImpl (C:\Users\muluh\Documents\Projects\FrontEnd\Next js\audit-sys-frontend\node_modules\next\dist\server\base-server.js:546:20) { digest: undefined }

here is my next config const withPlugins = require("next-compose-plugins"); const nextWithLess = require("next-with-less"); const withLess = require("next-with-less"); /* @type {import('next').NextConfig} / const nextConfig = { reactStrictMode: true, webpack: (config, options) => { // Add your own rules config.module.rules.push({ test: /.(sass|less|css)$/, use: ['style-loader', 'css-loader', 'less-loader'] })

return config

}, }

const plugins = [ / ...other plugins... / [withLess, {}], / ...other plugins... /

];

module.exports = nextConfig;