Develop Reference

"Error: Styles were unable to be assigned to a file" when building React app

Running npm run build returns this error. I believe it was working properly 3-4 months ago and, in fact, npm run dev works great. I suspect it has something to do with the removal requirement of the #vanilla-extract/babel-plugin
> wellness-saas#0.1.0 dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 672 ms (291 modules)
wait - compiling...
event - compiled client and server successfully in 68 ms (291 modules)
wait - compiling / (client and server)...
event - compiled client and server successfully in 72 ms (294 modules)
wait - compiling /_error (client and server)...
event - compiled client and server successfully in 57 ms (295 modules)
Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:
- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started
at Object.getFileScope (/home/asdf/work/i-nuba-wellness-front/node_modules/#vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.cjs.dev.js:33:11)
at generateIdentifier (/home/asdf/work/i-nuba-wellness-front/node_modules/#vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:183:49)
at createVar (/home/asdf/work/i-nuba-wellness-front/node_modules/#vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:262:47)
at /home/asdf/work/i-nuba-wellness-front/node_modules/#vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:310:12
at walkObject (/home/asdf/work/i-nuba-wellness-front/node_modules/#vanilla-extract/private/dist/vanilla-extract-private.cjs.dev.js:38:20)
at Object.walkObject (/home/asdf/work/i-nuba-wellness-front/node_modules/#vanilla-extract/private/dist/vanilla-extract-private.cjs.dev.js:40:20)
at createThemeContract (/home/asdf/work/i-nuba-wellness-front/node_modules/#vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:309:19)
at createGlobalTheme (/home/asdf/work/i-nuba-wellness-front/node_modules/#vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:330:38)
at eval (webpack-internal:///./styles/vars.css.ts:33:85)
at ./styles/vars.css.ts (/home/asdf/work/i-nuba-wellness-front/.next/server/pages/_app.js:132:1)
and this is the image I see in the browser:
and this is my package.json
{
"name": "wellness-saas",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#vanilla-extract/babel-plugin": "^1.1.7",
"#vanilla-extract/css": "^1.9.2",
"#vanilla-extract/css-utils": "^0.1.2",
"axios": "^0.27.2",
"chart.js": "^3.9.1",
"classnames": "^2.3.1",
"next": "12.2.5",
"next-auth": "^4.10.3",
"prop-types": "^15.8.1",
"react": "18.2.0",
"react-chartjs-2": "^4.3.1",
"react-cookie": "^4.1.1",
"react-dom": "18.2.0",
"react-loading": "^2.0.3",
"styled-components": "^5.3.5"
},
"devDependencies": {
"#types/node": "18.7.6",
"#types/react": "18.0.17",
"#types/react-dom": "18.0.6",
"#vanilla-extract/next-plugin": "^2.1.1",
"eslint": "8.22.0",
"eslint-config-next": "12.2.5",
"typescript": "4.7.4"
}
}
As I said, I think it was working before, maybe some package has been updated that was not specified in the package.json?
The vanilla-extract package is properly installed and configured I believe. I'm thinking of using webpack but it's probably some package structure misconfiguration, I would rather not switch to webpack yet.

I'm getting error of .html extension not recognized using node command

I got project from my client to update that project with some points. But I'm facing problem to run this project.
I install npm and all required node modules downloaded based on package.json information.
{
"name": "acelle-builder",
"version": "1.0.0",
"description": "",
"private": true,
"type" : "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#types/ace": "0.0.42",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.6.0",
"file-loader": "^4.1.0",
"html-loader": "^0.5.5",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.14.1",
"raw-loader": "^3.1.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"svg-url-loader": "^3.0.0",
"to-string-loader": "^1.1.5",
"url-loader": "^2.1.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"ace-builds": "^1.4.12",
"bootstrap": "^4.5.2",
"jquery": "^3.5.1",
"js-beautify": "^1.13.0",
"popper.js": "^1.16.1"
}
}
there are some codes of importing html files like
import controls from './controls.html';
import widgets from './widgets.html';
but when I run this project using node command I'm getting error with unknown file .html extension.
How can I solve this?

Node.js can only import JS modules.
If you want to use syntax which involves importing other kinds of things then you need to use an appropriate tool. The dependencies in the package.json file include WebPack. Use that.
There is even a script (named build) listed that will run it.
npm run build

You can't import from an html file. You are trying to import from ./controls.html and ./widgets.html. You have to import from js files. Maybe you meant "./controls.html" and "./widgets.js".

Ember Quickstart tutorial: Parsing error: Unexpected character '#' in '#action'

I just started using Ember and I have some trouble with the Ember Quickstart tutorial. Currently, I get Parsing error: Unexpected character '#' in line 5 of people-list.js:
import Component from '#glimmer/component';
import { action } from '#ember/object';
export default class PeopleListComponent extends Component {
#action
showPerson(person) {
alert(`The person's name is ${person}!`);
}
}
What's wrong here? The code is copied from the tutorial.
This is the output of ember -v:
ember-cli: 3.18.0
node: 11.13.0
os: darwin x64
This is my package.json. I can run npm install, but yarn install gives me The engine "node" is incompatible with this module. Expected version "10.* || >= 12". Got "11.13.0".
{
"name": "ember-quickstart",
"version": "0.0.0",
"private": true,
"description": "Small description for ember-quickstart goes here",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test"
},
"devDependencies": {
"#ember/jquery": "^0.5.2",
"#ember/optional-features": "^0.6.3",
"broccoli-asset-rev": "^2.7.0",
"ember-ajax": "^5.0.0",
"ember-cli-app-version": "^3.2.0",
"ember-cli-babel": "^7.1.2",
"ember-cli-dependency-checker": "^3.1.0",
"ember-cli-eslint": "^4.2.3",
"ember-cli-htmlbars": "^3.0.0",
"ember-cli-htmlbars-inline-precompile": "^1.0.3",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-sri": "^2.1.1",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-uglify": "^2.1.0",
"ember-data": "~3.9.0",
"ember-export-application-global": "^2.0.0",
"ember-load-initializers": "^1.1.0",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-qunit": "^3.4.1",
"ember-resolver": "^5.0.1",
"ember-source": "~3.9.0",
"ember-welcome-page": "^3.2.0",
"eslint-plugin-ember": "^5.2.0",
"loader.js": "^4.7.0",
"qunit-dom": "^0.8.0"
},
"engines": {
"node": "10.* || >= 12"
},
"dependencies": {
"ember-cli": "^3.18.0",
"#glimmer/component": "^1.0.0"
}
}
Adding some text here as SO won't let me post the question otherwise.

You're ember-source is set to ~3.9.0. I'm pretty sure #action is an Octane feature that was added in 3.14.
Either update ember-source to 3.14 or newer or switch to the 3.9.0 documentation. I'd recommend updating as Octane is awesome.

The output says you currently have ember-cli 3.18, but your app seems to have been generated by an older ember-cli 3.9 as indicated by devDependencies.
As mentioned in the comments, 3.9 does not have access to some of the current features unless you install some polyfills.
If regenerating the app is a possibility, I would suggest doing it.
Run ember --version to make sure 3.18 is being called
Run ember new my-app-name and check that package.json has 3.18 for ember-source.
Go through the quickstart!
Alternatively, you can run npx ember-cli new my-app-name and it should generate an app using the latest ember-cli version available in npm.
If you don't want to lose some work you might have done, you can check out ember-cli-update by running something like npx ember-cli-update. Check the README for more info.

Make ES6 Internet Explorer 11 compliant using Grunt-Babel

I installed grunt-babel in order to allow IE 11 users on our site. Right now the site is broken for those users. I've been mostly successful except I've gotten the following error that I don't know how to address.
ReferenceError: regeneratorRuntime is not defined
It looks like polyfills are deprecated so I'm wondering what is the best solution.
EDIT
Following justDan and David's advice, I installed regenerator/runtime package and am now getting an error require is not defined
This code will be run through the browser. My company is using a custom CMS which requires us to compress the theme file and there are large sections requiring dynamically populated text which is part of the reason for using ES6 template literals.
package.json file
{
"name": "Some Site",
"version": "1.0.0",
"description": "",
"main": "Gruntfile.js",
"dependencies": {
"regenerator-runtime": "^0.13.3"
},
"devDependencies": {
"#babel/core": "^7.7.2",
"#babel/preset-env": "^7.7.1",
"#babel/preset-es2015": "^7.0.0-beta.53",
"babel-preset-es2015-nostrict": "^6.6.2",
"grunt": "^1.0.4",
"grunt-autoprefixer": "^3.0.4",
"grunt-babel": "^8.0.0",
"grunt-contrib-compress": "^1.5.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-cssmin": "^3.0.0",
"grunt-contrib-imagemin": "^3.1.0",
"grunt-contrib-less": "^2.0.0",
"grunt-contrib-uglify": "^4.0.1",
"grunt-contrib-watch": "^1.1.0",
"grunt-purifycss": "^0.1.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
.babelrc file
{
"presets": ["#babel/preset-env"]
}

You need to install and run this package
https://www.npmjs.com/package/regenerator-runtime

Syntax error: Unexpected token, expected { (1:7) , create-react-app

I started a new react project using create-react-app boilerplate (https://github.com/facebook/create-react-app), and I'm getting the following error when trying to start the app, the reason is that I have created a folder called 'containers' where all the containers go, and I want to create an index file to export all of them from that directory, this way I can just reference the directory in order to import de components.
Like this:
import UserContainer from './containers/UserContainer'; //This work(but ugly)
import { UserContainer } from './containers'; // This does not work
Basically this is the content of my index.js file inside the containers folder:
export UserContainer from './UserContainer';
And I'm getting the error Syntax error: Unexpected token, expected { (1:7),
this is the content of my package.json:
{
"name": "user-management1",
"version": "0.1.0",
"private": true,
"dependencies": {
"install": "^0.11.0",
"npm": "^6.0.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-redux": "^4.2.1",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.4",
"react-scripts": "1.1.4",
"redux": "^3.5.2"
},
"scripts": {
"lint": "eslint src",
"lint:fix": "npm run lint -- --fix",
"lint:css": "stylelint \"src/**/*.{css,less,scss,sss}\"",
"start": "npm run lint:fix && react-scripts start & npm run apiserver",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"apiserver": "json-server --watch --port 4000 api/db.json"
},
"devDependencies": {
"bulma": "^0.7.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-css-modules": "^2.7.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"json-server": "^0.12.2"
}
}
I start the app using 'react-scripts'. The problem seems related to babel?, do I need to start the app using babel-node?, or add any presets anywhere? I thought using this boilerplate babel was already configured to start coding in ES6.
Please help

You are basically re-exporting a module (that is adding another module’s exports to those of the current module). In order to make the named export UserContainer of module ./UserContainer the default export of current module you should write:
export { default as UserContainer } from './UserContainer'
Check this link for a complete reference